ComposeYogi

The open-source Ableton-style music composer for the web.

A free, open-source music composition tool for beat-making, loops, and arrangements — built with Web Audio, WASM, and modern web tech.

Live Demo · Report Bug · Request Feature

• 🎹 Multi-track Timeline — Audio, MIDI, and Drum tracks with drag-and-drop clips
• 🎼 Piano Roll Editor — Full-featured MIDI note editor with scale lock
• 🥁 Drum Sequencer — Step sequencer with pattern presets (Four on Floor, Hip Hop, Trap, etc.)
• 🎸 Built-in Instruments — Synths, bass, keys, leads, and pads powered by Tone.js
• 📊 Real-time Visualizer — Frequency bars and waveform display
• 🎚️ Mixer Controls — Volume, pan, mute, and solo per track
• ⏺️ Audio Recording — Record directly from your microphone with latency calibration
• 💾 Local-first Storage — Auto-save to IndexedDB, works offline
• 🎵 MIDI Export — Export your compositions to MIDI files
• ⌨️ Keyboard Shortcuts — Professional workflow with hotkeys
• 🌙 Dark/Light Theme — Easy on the eyes
• 🌍 Internationalization — English and Spanish supported

• Node.js 18.17 or later
• npm, yarn, or pnpm

# Clone the repository git clone git@github.com:AppsYogi-com/ComposeYogi.git cd ComposeYogi # Install dependencies npm install # Start development server npm run dev

Open http://localhost:3000 in your browser.

npm run build npm start

# Clone the repository git clone git@github.com:AppsYogi-com/ComposeYogi.git cd ComposeYogi # Start with Docker Compose docker-compose up -d # Access at http://localhost:3000

# Build the image docker build -t composeyogi . # Run the container docker run -p 3000:3000 composeyogi

docker pull appsyogi/composeyogi:latest docker run -p 3000:3000 appsyogi/composeyogi:latest

composeyogi.com/ ├── app/ # Next.js App Router │ └── [locale]/ # i18n routing │ ├── compose/ # Main DAW page │ └── page.tsx # Landing page ├── components/ │ ├── compose/ # DAW components │ │ ├── editors/ # Clip editors (DrumSequencer, PianoRoll, WaveformEditor) │ │ ├── AudioVisualizer.tsx │ │ ├── BrowserPanel.tsx │ │ ├── EditorPanel.tsx │ │ ├── Inspector.tsx │ │ ├── TrackList.tsx │ │ └── Transport.tsx │ └── ui/ # Reusable UI primitives ├── lib/ │ ├── audio/ # Tone.js wrappers, recording, export │ ├── store/ # Zustand stores │ ├── persistence/ # IndexedDB operations │ └── canvas/ # Canvas renderers ├── hooks/ # Custom React hooks ├── types/ # TypeScript definitions └── messages/ # i18n translation files 

📍 See our detailed roadmap for the full picture of what's coming next!

• Core DAW with multi-track timeline
• Audio engine with Tone.js (play, stop, seek, loop)
• MIDI and Drum clip editors
• Recording with latency calibration
• IndexedDB persistence with auto-save
• MIDI export
• Keyboard shortcuts
• Dark/Light theme
• i18n (English, Spanish)

• User authentication (Firebase/supabase)
• Cloud project sync
• Share links for projects
• WAV export
• Additional templates

• Multi-take recording with comping
• Automation lanes
• Collaboration features
• Remix/fork system
• Time-stamped comments

Contributions are welcome! Please read our Contributing Guide and Code of Conduct before submitting a Pull Request.

npm run dev # Start dev server with Turbopack npm run build # Production build npm run start # Start production server npm run lint # Run ESLint npm run type-check # TypeScript type checking

This project is licensed under the MIT License - see the LICENSE file for details.

ComposeYogi is built on the belief that creative tools should be:

• Open and inspectable
• Free from lock-in
• Community-driven
• Accessible to everyone

We welcome contributors, musicians, designers, and developers.

If you find ComposeYogi useful, please consider:

• Starring the repository
• Reporting bugs or requesting features
• Sponsoring on GitHub
• Supporting on Patreon

• Tone.js for the amazing Web Audio framework
• Radix UI for accessible UI primitives
• Vercel for hosting
• The open source community 💜