DOCS / GETTING STARTED

Quick start

The fastest start is the scaffolder — one command gives you a complete plugin project (CMake + C++ + a React UI) that builds to a VST3 and a standalone app:

0. Scaffold a project

bun create vsreact my-plugin        # or: npm create vsreact@latest my-plugin
cd my-plugin/ui && bun install && bun run build
cd .. && cmake -S . -B build -DJUCE_SOURCE_DIR=path/to/JUCE   # omit to auto-fetch JUCE
cmake --build build --target MyPlugin_Standalone --config Release

Add --posthog for analytics wiring, --yes to skip the prompts. Prefer reading a finished project instead? The tour below walks vsreact/examples/gain — a working gain/pan VST3 whose entire UI is fourteen lines of TSX, the exact tree running in the demo on the landing page.

1. Build the UI bundle

cd vsreact/examples/gain/ui
bun install
bun run build        # emits build/main.js

2. Build the plugin

cd vsreact/examples/gain
cmake -S . -B build -DJUCE_SOURCE_DIR=path/to/JUCE
#   on Windows add: -G "Visual Studio 17 2022" -A x64
cmake --build build --target GainExample_Standalone --config Release

3. Run it

Launch the standalone target (or load the VST3 in your DAW) and you get two knobs — gain and pan — bound to real AudioProcessorValueTreeState parameters with automation-safe gestures. Drag them, wheel them, automate them from the host: the UI and the DAW stay in sync both ways. This is the complete UI source:

import { render, View, ParamKnob } from "@vsreact/core";

function App() {
  return (
    <View className="flex-1 items-center justify-center
                     bg-zinc-950 gap-10 flex-row">
      <ParamKnob paramId="gain" size={88} />
      <ParamKnob paramId="pan" size={88} />
    </View>
  );
}

render(<App />);

What just happened

• render(<App />) mounted your tree into the plugin’s RootView — no HTML, no DOM.
• The className strings were resolved to style objects in JS and painted by C++ — see Styling.
• <ParamKnob paramId="gain"> found the APVTS parameter through the ParameterBridge — see Audio parameters.
• The knob arc is a natively painted stroke driven by drag gestures — see Events & gestures.

Now wire it into your own project: Your plugin, in React.