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

# Render Stream SDK

> APIs for overlays, themes, and gamification with secure proxy patterns

<Info>
  WIP — This guide is being updated to reflect the latest OS workflows.
</Info>

## Installation

```bash theme={null}
bun add @render-network/sdk
# or
yarn add @render-network/sdk
# or
npm install @render-network/sdk
```

## Auth & Proxy Patterns

Use a server route (SSR/edge) to call backend APIs. Do not expose backend endpoints in frontend code.

```ts theme={null}
// pages/api/tokens/balance.ts (Next.js example)
import type { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const auth = req.headers.authorization;
  // forward to backend service securely
  const r = await fetch(process.env.RNDR_BACKEND + "/balance", {
    headers: { authorization: auth || "" }
  });
  res.status(r.status).send(await r.text());
}
```

## Overlays API (Example)

```ts theme={null}
import { RenderNetwork } from "@render-network/sdk";

const rn = new RenderNetwork({ wallet: yourWallet, network: "mainnet-beta" });
await rn.overlays.publish({
  id: "main",
  widgets: [
    /* ... */
  ]
});
```

## Themes API (Example)

```ts theme={null}
await rn.themes.create({ name: "Pro", base: "dark", widgets: [] });
await rn.themes.publish("Pro");
```

## Gamification Hooks (Example)

```ts theme={null}
rn.events.on("prediction:update", (evt) => {
  // update UI store
});
```

## Quickstart

1. Install SDK (see above)
2. Implement server proxy for auth-protected routes
3. Initialize client with wallet
4. Publish a basic overlay and verify rendering

## Cross-Links

* Migration: [OBS Replacement](/guides/obs-migration)
* CTRL: [CTRL Panel Guide](/guides/ctrl-panel)