I wanted a place to make music in the browser. Not a DJ deck (I tried that — importing tracks isn't the same as creating them), but a real instrument I could open and play immediately.
Finding the right foundation
BeepBox is an MIT-licensed web music creation tool by John Nesky. It's a complete step sequencer with built-in synthesizers, drum machines, effects, and WAV export. Everything runs client-side — there's no server, no uploads, no accounts.
I forked it and customized it heavily.
What I changed
Branding & identity: Replaced all "BeepBox" references with "Kamal's Studio". Updated the editor title, theme names, and page metadata. The instruction section was rewritten in first-person — it's my tool now.
Theme overhaul: The default "dark classic" theme was replaced with a custom dark purple/navy palette:
| Element | Before | After |
|---|---|---|
| Background | Pure black #000 |
Deep navy #0a0a14 |
| Widgets | Gray #444 |
Purple-navy #1e1e36 |
| Editor surface | Black #000 |
#0f0f1e |
| Link accent | Purple #98f |
Bright blue #6b9fff |
| Loop accent | Purple #74f |
#7c5cfc |
Channel colors: All 10 pitch channels and 5 noise channels were recolored for better contrast and visual harmony.
Page layout: The editor is now centered in a rounded card with a subtle border and shadow. A feature grid below explains the controls at a glance. No nav bar, no external links — it's a standalone tool.
The editor internals
The editor is written in TypeScript and compiled with esbuild + rollup. The key files:
ColorConfig.ts— CSS variable themes for the entire UIEditorConfig.ts— Version display name, preset definitionsPreferences.ts— User settings including default themestyle.ts— SVG icons and additional CSS injected at runtime
Changing the theme required modifying only ColorConfig.ts (CSS variables) and Preferences.ts (default). The entire UI respects CSS custom properties, making theming surprisingly clean.
How it works
All synthesis happens via the Web Audio API. The step sequencer plays patterns on a grid — click to add notes, drag to adjust length, use the menus to pick instrument presets:
- Chip waveforms: Square, triangle, sawtooth, pulse
- FM synthesis: 4-operator FM with multiple algorithms
- Picked string: Physical modeling for piano/plucked instruments
- Noise/drums: Programmable drum kits with per-drum envelopes
- Effects: Reverb, chorus, distortion, bitcrushing, filters
Song data is stored in the URL hash. Copy the URL to save or share — zero storage, zero servers.
Try it
music.kamalrajnaidu.com — open it and start clicking notes.