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

# Canvas

> A Figma-style design surface where every frame is a live iframe of a real route or React component in your codebase.

The **Canvas** is Tempo's design surface. It looks like Figma — an infinite, zoomable plane with frames — but every frame is a **live iframe** running a real route or React component from your codebase. Edit a style, drag a component, change a prop; Tempo writes the change back to your source files.

Open it from the **Canvas** icon in the left sidebar.

<Frame>
  <img src="https://mintcdn.com/tempolabs/h7FkkDRaGn1w0OFZ/images/product/canvas/overview.png?fit=max&auto=format&n=h7FkkDRaGn1w0OFZ&q=85&s=8d018927e613a61f9d3abc1827acaf33" alt="The Tempo canvas" width="1920" height="1080" data-path="images/product/canvas/overview.png" />
</Frame>

## Storyboards

A **storyboard** is a typed React export inside an `index.canvas.tsx` file under `tempo/designs/canvases/`. Each export becomes a frame on the canvas. Storyboards are real code, so they commit to git like anything else — your designs version with the codebase they describe.

Create one in two ways:

* Right-click an empty area of the canvas → **New Storyboard**.
* Ask the AI: *"make a storyboard for the signup flow."*

## Editing on the canvas

* **Style Panel (right side)** — typography, colors, spacing, layout. Every change writes back to source.
* **Drag and drop** components from your codebase's component library directly into frames.
* **Select an element** to jump to its definition in the codebase editor.
* **Multi-select and group** to compose larger layouts.

<Frame>
  <img src="https://mintcdn.com/tempolabs/mhsVPkJA5sDhkLjO/images/product/canvas/editing.gif?s=f6960be1a07b831e6d3cfd94692e0880" alt="Editing a storyboard with the Design panel" width="1200" height="675" data-path="images/product/canvas/editing.gif" />
</Frame>

## How the canvas stays in sync with code

When you open a workspace, Tempo starts your dev server in the background (Vite, Next.js, whatever your project uses — see [Setup & Run Scripts](/guides/setup-run-scripts)). Canvas iframes point at that dev server, so every code change hot-reloads on the design surface and every design edit triggers a real file write.

This is the unified context layer in practice: your designs *are* your code.

## What lives next to the canvas

* **Link a canvas to a doc** so the PRD is one click away from the design.
* **Link a canvas to an Issue** so the card shows the design as a preview.
* **Link a canvas to a chat session** so the agent can read the storyboards it's about to modify.