Make Music with React

Render audio using the components you know and love.
Turn your JSX into melodies, beats, and soundscapes.

song.tsx

import { Track, Loop, Sequence, Synth, Note, Sample } from "@react-synth/synth";

export default function FunkyBeat() {
  return (
    <Track bpm={124}>
      <Loop id="loop1" interval={1}>
        <Sequence interval={0.5}>
          <Sample name="bd_haus" />
          <Sample name="drum_cymbal_closed" />
        </Sequence>
      </Loop>

      <Loop id="loop2" interval={2}>
        <Synth type="bass">
          <Sequence interval={0.5}>
            <Note note="C2" />
            <Note note="C3" />
            <Note note="Bb2" />
            <Note note="G2" />
          </Sequence>
        </Synth>
      </Loop>
    </Track>
  );
}

Declarative Audio

Compose music using familiar React component structure. Loop, Sequence, and Synth components make audio logic readable.

Two-Clock Scheduling

Rock-solid timing precision using the Web Audio API clock synchronized with React's render cycle.

Hot Reloading

Change your song structure or synth parameters in real-time. Hear your changes instantly as you code.

Inspired by Sonic Pi