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

# Playground

> Build a composition visually and preview it in your browser with WebGPU — using the same renderer as the API — then copy the exact render request.

## Preview before you spend a render

The **Framelane Playground** is a browser-based editor that runs the renderer **in your
browser via WebGPU**. It compiles from the same Rust/wgpu codebase that powers
`POST /v1/renders` on the backend — so the preview you see is what the API produces. Lay out
your elements, tune effects and motion, scrub the timeline, and only submit a real render
once it looks right.

<Card title="Open the Playground" icon="play" href="https://framelane.io/playground">
  Compose, preview, and export a render request — no API key required to experiment.
</Card>

## Why it matches the API exactly

Renders are **declarative**: the entire scene is one JSON payload (canvas + `elements[]` +
`transitions[]`). The Playground is a visual editor over that same schema:

* **Same renderer.** The in-browser WebGPU preview and the GPU backend share one rendering
  core, so positioning, effects, motion, and transitions look identical in preview and in the
  final artifact — no "looked different once rendered" surprises.
* **Same schema.** What you build maps directly to a [`POST /v1/renders`](/api-reference/introduction)
  body. Every field in the editor corresponds to a field documented in
  [Elements](/renders/elements) and validated by [`GET /v1/capabilities`](/api-reference/introduction).

## From preview to request

1. **Compose** your scene in the editor — add video, image, text, and audio elements; apply
   effects, motion, and transitions.
2. **Preview** it live in the browser. The WebGPU pipeline renders frames locally as you edit.
3. **Export the request.** Copy the generated `POST /v1/renders` JSON.
4. **Send it** from your code, an [agent](/mcp/overview), or the
   [interactive API reference](/api-reference/introduction) — the response is your rendered video.

<Tip>
  Building requests with an AI agent? Pair the Playground with
  [`GET /v1/capabilities`](/api-reference/introduction): the agent reads the capability catalog
  to assemble a valid request, and you eyeball the WebGPU preview before committing a render.
</Tip>

## Good to know

* The Playground previews the composition itself. The backend additionally handles media
  ingest, AI [tasks](/tasks/overview), and final hardware encoding.
* AI media operations (background removal, gaze redirect, super-resolution) run as standalone
  [tasks](/tasks/overview) first; reference their output URLs as element `source_url`s in the
  scene you preview.