A free, open-source music composition tool for beat-making, loops, and arrangements — built with Web Audio, WASM, and modern web tech.
| ComposeYogi | Traditional DAWs |
|---|---|
| Open source | Closed source |
| Runs in browser | Heavy desktop installs |
| Free forever | Paid subscriptions |
| Community-driven | Vendor-controlled |
| Hackable & extensible | Locked ecosystems |
- 🎹 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.)
- 🎸 64 Built-in Instruments — Synths, bass, keys, leads, pads, drum kits, strings, wind and idiophones, 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, installable, works fully offline
- 🎵 Export Anywhere — WAV, MP3, MIDI, or a portable JSON project file
- ⌨️ 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 devOpen 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 composeyogidocker pull appsyogi/composeyogi:latest
docker run -p 3000:3000 appsyogi/composeyogi:latest| Category | Technology |
|---|---|
| Framework | Next.js 15 with App Router |
| Language | TypeScript |
| Audio Engine | Tone.js |
| State Management | Zustand + Zundo |
| Styling | Tailwind CSS |
| UI Components | Radix UI |
| Drag & Drop | @dnd-kit |
| Persistence | IndexedDB via idb |
| i18n | next-intl |
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
│ └── design/ # Design tokens — the source of every colour
├── design/ # The design system: rules, artboards, previews
├── hooks/ # Custom React hooks
├── types/ # TypeScript definitions
├── tests/ # Vitest suites
└── messages/ # i18n translation files
ARCHITECTURE.md goes deeper: how scheduling, state and persistence actually work, and which invariants a change must not break.
Press / in the studio for the full, always-current list — it renders
from the shortcut registry in lib/shortcuts/, and every shortcut is rebindable
from that same panel.
The ones worth knowing before you open it — note that while musical typing is on (K), the letter keys play notes instead, and the shortcuts bound to them stand down until you turn it off:
| Action | Shortcut |
|---|---|
| Play / Pause | Space |
| Stop (return to start) | Enter |
| Record | R |
| Loop | L |
| Play with the computer keyboard | K |
| Sustain, while playing | Shift (hold) |
| Silence a stuck note | Esc |
| Undo / Redo | Cmd/Ctrl + Z / Shift + Z |
| Shortcut reference | / |
ROADMAP.md is the single source of truth for what has shipped and what is coming next. It is kept in step with every release, so this README does not repeat it.
Shipped so far: a full multi-track studio with recording and latency calibration, 64 instruments, piano roll and drum sequencer, MIDI/WAV/MP3/JSON export, offline PWA support, and local-first persistence with autosave.
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 test # Run the test suite (Vitest)
npm run check # Locales + types + lint + tests — what CI runsNew to the codebase? ARCHITECTURE.md explains how the
audio engine, state and persistence fit together, and where the sharp edges are.
Issues labelled good first issue
are scoped to be picked up without reading the whole thing first.
Building anything visual? design/ is the design system —
tokens, usage rules and artboards. Every colour, radius and duration in the
product comes from one source, and npm run check fails if a component invents
its own. Read it before you start; it will save you a review round.
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 💜
Made with ❤️ by AppsYogi