Build Vision Extensions

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:

Part	Where it shows	What it does
Editor Panel	Overlay editor sidebar	Settings UI — toggles, text fields, dropdowns. Streamers configure your extension here.
Layer	OBS overlay (on stream)	The visual output viewers see. Reads from storage, no user interaction.
Interactive Page	Standalone page	Live controls — buttons to trigger actions, toggles to change state mid-stream.
Server Functions	Edge runtime	Backend 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

Custom Widgets

Extensions SDK

Build Vision Extensions

Get Started

Server Functions

Components

Hooks

Examples

What You Can Build

How It Works

Requirements

Get Started

Server Functions

Components

Hooks

Examples

​What You Can Build

​How It Works

​Requirements

What You Can Build

How It Works

Requirements