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

---

Why ComposeYogi?

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

---

Features

• 🎹 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

Screenshots

One-Click Deploy

Quick Start

Prerequisites

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

Installation

# Clone the repository
git clone [email protected]:AppsYogi-com/ComposeYogi.git
cd ComposeYogi

# Install dependencies
npm install

# Start development server
npm run dev

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

Production Build

npm run build
npm start

Docker

Using Docker Compose (Recommended)

# Clone the repository
git clone [email protected]:AppsYogi-com/ComposeYogi.git
cd ComposeYogi

# Start with Docker Compose
docker-compose up -d

# Access at http://localhost:3000

Using Docker directly

# Build the image
docker build -t composeyogi .

# Run the container
docker run -p 3000:3000 composeyogi

Pull from Docker Hub

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

Tech Stack

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

Project Structure

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

Keyboard Shortcuts

Action	Shortcut
Play/Pause	Space
Stop (Return to start)	Enter
Toggle Record	R
Toggle Metronome	M
Toggle Loop	L
Undo	Cmd/Ctrl + Z
Redo	Cmd/Ctrl + Shift + Z
Duplicate Clip	Cmd/Ctrl + D
Delete Selection	Delete / Backspace
Toggle Browser	B
Toggle Editor	E
Toggle Inspector	I
Toggle Visualizer	V
Zoom In	+ / =
Zoom Out	-

Development Roadmap

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

Phase 1.0 — MVP (Complete)

• 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)

Phase 1.5 — Cloud Sync (Planned)

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

Phase 2.0 — Pro Features (Future)

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

Contributing

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

Development Commands

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

License

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

Open Source First

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.

Support

If you find ComposeYogi useful, please consider:

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

Acknowledgments

• 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