> ## Documentation Index
> Fetch the complete documentation index at: https://docs.1up.vision/llms.txt
> Use this file to discover all available pages before exploring further.

# Build Vision Extensions

> Create custom overlay layers for Vision using React and the Vision SDK. Add settings panels, OBS overlays, and live controls — all with a few lines of code.

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.

<CardGroup cols={2}>
  <Card title="Get Started" icon="rocket" href="/extensions-sdk/getting-started">
    Scaffold a new extension in under a minute
  </Card>

  <Card title="Server Functions" icon="server" href="/extensions-sdk/server-functions">
    Add a backend with queries, mutations, and an edge database
  </Card>

  <Card title="Components" icon="puzzle-piece" href="/extensions-sdk/components">
    Buttons, toggles, text fields, dropdowns, and more
  </Card>

  <Card title="Hooks" icon="plug" href="/extensions-sdk/hooks">
    Persist data and sync it between panels in real-time
  </Card>

  <Card title="Examples" icon="code" href="/extensions-sdk/examples">
    Copy-paste examples to start from
  </Card>
</CardGroup>

***

## 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:

```tsx theme={null}
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.

<Tip>
  You don't need to set up websockets, databases, or state management. The SDK
  handles persistence and real-time sync out of the box.
</Tip>

***

## Requirements

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