---

Why ComposeYogi?

---

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

Screenshots

One-Click Deploy

Quick Start

Prerequisites

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

Installation

# 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.

Production Build

npm run build
npm start

Docker

Using Docker Compose (Recommended)

# 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

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

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
│   └── 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.

Keyboard Shortcuts

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:

Roadmap

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.

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 test             # Run the test suite (Vitest)
npm run check        # Locales + types + lint + tests — what CI runs

New 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.

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 💜

---