Notenotes

A free, open-source pre-DAW: a place to catch a musical idea before it becomes a production project.

Try it now | Report a bug or idea | Contribute

Why it exists

Notenotes is the napkin sketch before the recording studio. It uses scale-locked pads, a small piano, drums, a microphone, controllers, color, and shapes to make music approachable without pretending to replace a DAW.

I built it because I am a long-time musician who still finds it hard to get an idea into a DAW. Notenotes is a noodling board: find the hook here, then take it somewhere else to finish the song.

• No account, telemetry, or hosted project service.
• Your workspace and audio stay in browser storage unless you export them.
• The core app works offline after it has been loaded and cached. Optional CC0 sample packs can be cached individually on first use or downloaded together from Settings for offline use.
• It is installable as a Progressive Web App, but installation is optional.

Open the live app and press a pad. Browsers require a user gesture before they allow sound.

A quick tour

Create

Pick a key, scale, meter, and patch, then play Pads, Piano, Kit, Audio In, or a connected controller. Record a take and it becomes a reusable snippet.

Pads can stay inside the project scale while Piano remains chromatic or uses optional correction. The scale library includes Western modes, pentatonic colors, and clearly labelled 12-TET approximations of several maqam- and raga-inspired collections. Drum pads are rhythmic instruments and are not described as being "in key."

Create includes Chip, Modern, and FM synth presets; four synthesized drum kits; ten compact CC0 sample instruments; friendly Tone controls; Height Velocity; Hold and Arpeggio modes; Step Play; degree colors; chord suggestions; and gamepad, computer-keyboard, and Web MIDI input.

Empty workspaces open in Create. Choose Record your first idea, then play a pad or key to start capturing. On phones, More holds key, meter, arming, and other secondary controls so the playing surface has more room.

Canvas

Arrange MIDI, drum, and audio snippets on typed tracks. Move and trim clips, switch half-time or double-time non-destructively, mute or solo tracks, set pan and color, and export the result. Clips snap to useful edges and avoid accidental overlaps.

Click or keyboard-activate a snippet in the Canvas dock to append it to a compatible track, or drag it to choose a position.

Inspect

Inspect is both the snippet library and the detail editor. Search, filter, and sort the library, then edit MIDI notes, drum hits, velocity, lyrics, timing, and clip length. Fit Rhythm can place an existing performance into one, two, or four bars without changing its pitches or drum choices.

MIDI and drum snippets remember the patch or kit used to audition them and carry that choice when first dropped on Canvas. Clips stay linked to their library snippet, so editing a snippet updates its placements, including after reloading the workspace.

Stage

Stage turns live Create input into Trace, Thread, Pulse, Halo, or Pocket visualizations. From Canvas it shows the arranged tracks moving through a performance view. Stage is intentionally a live visual surface today; recorded video and GIF export are future work.

Useful capabilities

• Record microphone audio and store the audio bytes separately from lightweight project metadata.
• Convert a monophonic Audio In recording to an editable MIDI starting point.
• Attach lyric text directly to MIDI notes so timing follows the note.
• Share MIDI and drum snippets through bounded, local-first links.
• Save milestones and adjustable auto-save history.
• Export workspace or snippet-library JSON backups, including referenced audio.
• Connect a local backup folder in supporting desktop browsers.
• Export MIDI, WAV, ABC, or SVG sheet music where the source type supports it.
• Use Tremor Filter, Dwell Play, Step Play, reduced-motion handling, accessible palettes, and URL-enabled accessibility profiles.
• Enable developer diagnostics with ?debug=1.

The transport shows pending saves and offers Retry save if browser storage fails. Canvas MIDI exports preserve named tracks, pan, and volume, with separate melodic channels and channel 10 for drums. After 15 melodic tracks, MIDI channels are reused while track names remain separate. ABC and sheet output preserve chords, overlapping voices, and ties across bars; quantizing very fine free-play timing gives the clearest conventional notation.

Notenotes deliberately does not provide accounts, cloud sync, multitrack mixing depth, arbitrary effects racks, or a runtime plugin marketplace.

Run it locally

Prerequisites

• Node.js 20.19+ or 22.12+
• npm

git clone https://github.com/zeidalidiez/Notenotes.git
cd Notenotes
npm ci
npm run dev

The development server opens at http://localhost:5173/.

Before opening a pull request:

npm test
npm run build
npx playwright install chromium
npm run test:browser

Do not use --legacy-peer-deps; the checked-in dependency graph is expected to install cleanly.

Keyboard shortcuts

Key	Action
Space	Play or pause; in Inspect, audition the open clip
Enter	Stop and return to the loop start
Ctrl+Z / Ctrl+Shift+Z	Undo / redo
1-=, Q-], A-', Z-/	Play the active Pads, Piano, or Kit surface
ArrowUp / ArrowDown	Shift the active instrument octave
Delete / Backspace	Delete the selected note or clip
Shift + drag note edge	Resize a MIDI note in Inspect

When an instrument consumes a key as a playable note, it takes precedence over a global shortcut. Focused controls keep their normal Enter/Space behavior; Ctrl/Cmd shortcuts do not play notes. On macOS, Cmd also works for undo, redo, and saving.

Technical shape

Layer	Technology
Build	Vite 8
Audio	Web Audio API
Persistence	IndexedDB through idb
Sheet music	abcjs
Offline install	vite-plugin-pwa
UI	Vanilla JavaScript ES modules

Vanilla modules keep the current application direct and readable. Audio remains stable because musical events are scheduled against the Web Audio clock and UI rendering is kept off that clock, not because a particular framework is absent.

The code is organized by responsibility:

src/
  engine/       timing, playback, theory, recording
  instruments/  playable surfaces and live sound
  modes/        Create, Canvas, and Inspect orchestration
  ui/           shared controls and settings
  data/         IndexedDB, migrations, history, audio assets
  export/       MIDI, WAV, ABC, and sheet music
  stage/        performance event model and visuals

See the documentation index, architecture, and contributor rules before a structural change.

Roadmap

The bounded strategic roadmap lives in docs/roadmap.md. Actionable work belongs in GitHub Issues, and early ideas belong in Discussions. A checklist in the README is not treated as a second backlog.

Contributing

1. Browse the open issues.
2. Use a Discussion for an idea that is not yet a bounded task.
3. Keep branches and pull requests small and focused.
4. Add the smallest regression test that would have caught a bug.
5. Run npm test and npm run build before publishing.

For browser, audio-device, touch, permission, and PWA checks, use the concise manual QA checklist and record the environment and result.

Credits and licensing

• Controller artwork: Generic Gamepad Template by nicefrog, CC0.
• abcjs for sheet-music rendering.
• idb for IndexedDB access.
• vite-plugin-pwa for install and offline support.
• Lucide icons under the ISC License; see THIRD_PARTY_NOTICES.md.
• Greptile for code-review support.

Anything bundled into Notenotes that can appear in a user's exported audio must be obligation-free for that user. Prefer CC0/public-domain audio; do not add CC-BY, share-alike, noncommercial, unclear-license, or runtime-CDN sounds.

Notenotes is released under the MIT License.