Synthlab is an experimental browser synth workstation: part sound-design playground, part playable instrument, part sketchpad for patterns and presets.

It is built with React, TypeScript, Vite, and the Web Audio API, with the goal of making synthesis feel immediate in the browser instead of hidden behind menus or plugin installs.

Play it here: https://bhandras.github.io/synthlab/

• Play notes directly from the on-screen keyboard.
• Use the computer keyboard as a quick performance input.
• Shape sounds with a dense, hardware-inspired control surface.
• Watch the source waveform and filtered spectrum update live.
• Save sounds locally in your browser and reload them later.
• Load factory patches across keys, synth, bass, lead, and drum families.
• Trigger factory patterns to quickly audition how patches behave musically.
• Navigate many controls from the keyboard for faster tweaking.

Synthlab is currently centered around a single synth view rather than a full song timeline.

• The top rack handles saved sounds, factory patches, and quick pattern playback.
• The scope windows show the raw source shape and the post-filter spectrum.
• The main control board exposes oscillator, filter, envelope, modulation, and output parameters all at once.
• The keyboard panel gives you a direct way to audition sounds without leaving the page.

The longer-term goal is to explore a browser-native music tool that feels expressive and hackable:

• fast enough for casual experimentation
• deep enough to invite real sound design
• visual enough to teach what the synth is doing
• open-ended enough to evolve toward pattern editing and larger composition workflows

The current app is the synth-lab side of that vision: a focused place to design sounds, test ideas, and build up reusable patches before a larger music-maker workflow forms around it.

• Click or drag the control strips to change values.
• Focus a control and use the arrow keys for precise adjustment.
• Use Shift for coarser moves and Alt for finer moves.
• Use Ctrl+1 through Ctrl+6 to jump between control groups.
• Use the keyboard panel or your computer keyboard to audition notes.

npm install
npm run dev

npm run build

This repository deploys automatically to GitHub Pages from main using the workflow in .github/workflows/deploy.yml.