DOCS / OVERVIEW

VSReacT Documentation

VSReacT is a React renderer for JUCE audio plugins. Your TSX runs in an embedded QuickJS engine inside the plugin, a custom reconciler streams the tree to C++, Yoga computes flexbox, and juce::Graphics paints every pixel — identically in every DAW, on every OS. No webview.

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 />);

Why VSReacT exists

Plugin UIs deserve the modern component model — hooks, state, utility-class styling, hot reload — without embedding a browser or fighting LookAndFeel. VSReacT is the Flutter / React-Native-Skia approach applied to audio software: the framework owns every pixel, so beautiful is the default.

How it works

1. 01React 18Your TSX, unmodified — hooks, effects, components.
2. 02QuickJSEmbedded ES2023 engine, ~1MB, in-process. Zero webview.
3. 03ReconcilerStreams the tree to C++ as JSON mutation ops over a C bridge.
4. 04YogaReal flexbox layout in the native shadow tree.
5. 05juce::GraphicsEvery pixel painted natively, 60fps, any DAW, any OS.

Two halves make up the framework. The @vsreact/core npm package is the TypeScript side: primitives, the Tailwind-style class resolver, parameter hooks, controls, and animation. The vsreact JUCE module is the native side: the QuickJS runtime, shadow tree, painter, hit-testing, text-input host, and the RootView component you drop into your plugin editor. The deep dive lives in Architecture.

Key features

• Modern React 18 — function components, hooks, effects; the API you already know.
• Tailwind-style classes — with theme tokens, arbitrary values, and hover:/active:/focus: variants. Resolved in JS; C++ only sees final styles.
• Host-grade parameters — useParameter(id) and <ParamKnob> bind two-way to the APVTS with automation-safe gestures.
• ~100ms hot reload in the DAW — save, rebuild, the plugin remounts. FL Studio never closes.
• Real text input — a chrome-stripped juce::TextEditor: caret, selection, IME.
• Native escape hatch — <NativeView/> mounts any juce::Component inside the React layout.
• Error overlay — JS exceptions render a red box with the stack trace instead of dying silently.

Proven in production

StashTrack — a shipping VST3 for Windows, macOS, and Linux — runs its entire interface on VSReacT: splash screen, live download progress, preview playback, an animated stash drawer. Every feature documented here shipped there first. The framework itself lives at github.com/N9RecordsTechnologiesIL/VSReacT.

Where to next

• Installation — requirements and wiring the module into your build.
• Quick start — build and run the gain example in five minutes.
• UI reference — components, styling, events, animation.
• Audio & native — parameter binding, messaging, the C++ surface.