Skip to main content
Build custom extensions that plug directly into Vision overlays. You write React, Vision handles rendering, storage, and real-time sync between your settings panel and the stream overlay. Need a backend? Add server functions to get a per-install edge database with typed queries, mutations, and actions.

Get Started

Scaffold a new extension in under a minute

Server Functions

Add a backend with queries, mutations, and an edge database

Components

Buttons, toggles, text fields, dropdowns, and more

Hooks

Persist data and sync it between panels in real-time

Examples

Copy-paste examples to start from

​
What You Can Build

Extensions are custom layer types that streamers add to their overlays. A single extension can have up to three parts, plus an optional server backend:
PartWhere it showsWhat it does
Editor PanelOverlay editor sidebarSettings UI — toggles, text fields, dropdowns. Streamers configure your extension here.
LayerOBS overlay (on stream)The visual output viewers see. Reads from storage, no user interaction.
Interactive PageStandalone pageLive controls — buttons to trigger actions, toggles to change state mid-stream.
Server FunctionsEdge runtimeBackend logic — database queries, mutations, external API calls via actions.
All three UI parts share the same storage. Change a value in the editor panel and the layer updates on stream instantly. Server functions give you a separate per-install database for structured data that goes beyond key-value storage. Use the interactive/control-panel surface for participant controls and session workflows. It is not intended to host high-scale public pages for thousands of concurrent viewers.

​
How It Works

You write standard React using SDK components for the UI, and TypeScript functions for the backend. The SDK takes care of the rest: 
import {
  Vision,
  CompactView,
  Toggle,
  useExtensionStorage,
} from "@1upvision/sdk";

function Settings() {
  const [storage, setStorage] = useExtensionStorage();

  return (
    <CompactView title="My Extension">
      <Toggle
        label="Show on stream"
        checked={storage.visible ?? false}
        onChange={(checked) => setStorage({ ...storage, visible: checked })}
      />
    </CompactView>
  );
}

Vision.render(<Settings />, { target: "editor" });
This renders a toggle in the overlay editor. When the streamer flips it, storage.visible updates and the OBS layer re-renders immediately — no extra wiring needed.
You don’t need to set up websockets, databases, or state management. The SDK handles persistence and real-time sync out of the box.

​
Requirements

  • Node.js 18+ and a package manager (pnpm, npm, or yarn)
  • A Vision account at app.1up.vision
  • Basic knowledge of React and TypeScript