Lilylet Live Editor

A web-based editor for Lilylet music notation with real-time rendering and MIDI playback.

Live Demo

• Live Editor - Write Lilylet code and see rendered notation instantly
• Markdown Editor - Embed music notation in Markdown documents
• Tutorial - Learn Lilylet syntax

Features

Live Editor

• Real-time music notation rendering via Verovio
• Syntax highlighting with CodeMirror
• Shareable URLs with compressed code
• Drag-and-drop file import: LilyPond (.ly), MusicXML (.musicxml, .xml), and ABC notation (.abc)

Markdown Editor

• Embed Lilylet code blocks in Markdown documents
• Static notation rendering with ```lilylet code blocks
• Playable notation with ```lilylet.play code blocks
• MIDI playback with note highlighting
• Live preview as you type

Development

Prerequisites

• Node.js 18+
• npm

Setup

# Install dependencies
npm install

# Start development server
npm run dev

Build

# Build for production (includes docs)
npm run build

# Build docs only
npm run build:docs

# Preview production build
npm run preview

Deploy

# Deploy to GitHub Pages
npm run deploy

Tech Stack

• SvelteKit - Web framework
• Verovio - Music notation rendering
• CodeMirror - Code editor
• markdown-it - Markdown parser
• @k-l-lambda/lilylet - Lilylet parser
• @k-l-lambda/lilylet-markdown - Markdown plugin for Lilylet
• @k-l-lambda/music-widgets - MIDI playback

Related Projects

• Lilylet - The Lilylet language parser and MEI encoder

License

MIT