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

# Runtime capabilities

> What runs inside a code block — supported libraries (UI, animation, charts, 3D, state), the CSP/sandbox rules, and APIs that are blocked.

Code blocks are Vite + React 19 + TypeScript apps that bundle to a single `dist/` folder and run inside a sandboxed iframe. The sandbox is strict (`allow-scripts` only — no `allow-same-origin`), so a small set of browser APIs behave differently than they would in a normal page.

This page is an opinionated list of what we've tested. **If a library you want isn't here, it likely works** — try it and tell us how it went. If we move a library to **Blocked**, it's because we've seen it fail.

<Tip>
  Your agent can read this same data programmatically by calling the `blocks.capabilities` MCP tool. The tool returns the structured payload plus this prose in one call. We recommend calling it before picking a dependency.
</Tip>

## Runtime

|            |        |
| ---------- | ------ |
| Node       | 24 LTS |
| React      | 19.0.0 |
| Vite       | 7.3.1  |
| TypeScript | 5.7.3  |

## Sandbox + CSP

Blocks render with `sandbox="allow-scripts"` (no `allow-same-origin`). The document has an opaque origin, so any API that depends on a real origin (cookies, storage, top-frame access) is unavailable.

The CSP defaults to `'none'` for everything except:

| Directive         | Allowed                                                                                                                 |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `script-src`      | `'self' 'unsafe-inline'`                                                                                                |
| `style-src`       | `'self' 'unsafe-inline' https://fonts.googleapis.com`                                                                   |
| `font-src`        | `'self' https://fonts.gstatic.com data:`                                                                                |
| `img-src`         | `'self' data: blob:`                                                                                                    |
| `connect-src`     | `'self'` + any host you list in `manifest.network.allowedOrigins` (also requires `'network'` in `manifest.permissions`) |
| `frame-ancestors` | `'self'`                                                                                                                |

<Note>
  To fetch from a third-party API, declare it in `chatblocks.json`:

  ```json theme={null}
  {
    "permissions": ["network"],
    "network": { "allowedOrigins": ["https://api.example.com"] }
  }
  ```
</Note>

## UI + styling

**Supported.** `tailwindcss` (via the Vite plugin), `lucide-react` (icons — import individually for tree-shaking), `clsx` + `tailwind-merge`.

**Conditional.** `@fontsource/*` to self-host Google Fonts (inlines as `data:` URLs).

## Animation

**Supported.** `framer-motion` (\~100 kB gz, declarative + gesture), `@react-spring/web` (\~25 kB, spring physics), `gsap` (\~70 kB, imperative timelines), `lottie-web` (\~50 kB, After Effects JSON). CSS animations + the Web Animations API need no dependency and are often enough for hover/transition/keyframe work.

## Charts + data viz

**Supported.** `recharts` (\~95 kB), `chart.js` + `react-chartjs-2` (\~70 kB), `@visx/*` (\~30 kB low-level d3 primitives), `d3` (import sub-packages like `d3-scale` and `d3-shape` for \~20 kB).

## 3D + canvas

**Supported.** `three` (\~150 kB) and `@react-three/fiber` + `@react-three/drei` (\~60 kB).

## State + data

**Supported.** `zustand` (\~3 kB), `jotai` (\~5 kB), `@tanstack/react-query` (\~35 kB), `swr` (\~10 kB).

## Tables + lists

**Supported.** `@tanstack/react-table` (\~15 kB headless), `@tanstack/react-virtual` (\~5 kB virtualization).

## Utilities

**Supported.** `date-fns` (import named functions), `zod`, `embla-carousel-react`.

## Network

**Supported.** `fetch`, `Request`, `Response` — subject to the CSP `connect-src` allowlist above.

**Conditional.** `WebSocket` and `EventSource` — both gated by the same `connect-src` rules (use `wss://` for WebSockets).

## Blocked APIs

These won't work and have clean alternatives:

| API                               | Why                              | Use instead                                                                           |
| --------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------- |
| `localStorage` / `sessionStorage` | Strict sandbox returns `null`.   | `blocks.setWidgetData` via MCP for workspace-level state.                             |
| `IndexedDB`                       | Same opaque-origin constraint.   | Same as above.                                                                        |
| `document.cookie`                 | Opaque origin → no cookie scope. | Server-side via a data source.                                                        |
| `window.parent.*` (direct access) | Blocked by sandbox.              | `window.parent.postMessage(...)` is allowed; the canvas listens for a small protocol. |

## Won't bundle

| Package class                                      | Why                                | Use instead                                                          |
| -------------------------------------------------- | ---------------------------------- | -------------------------------------------------------------------- |
| Node-only (`fs`, `child_process`, native bindings) | Bundles target the browser.        | Move server work to a Stripe / Postgres / Webhook / MCP data source. |
| Next.js (`next`, `next-auth`, etc.)                | Blocks are Vite apps, not Next.js. | `react-router` or hash-based routing.                                |