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

# Editor overview

> The full editor UI map. Toolbar, sidebars, chat, viewport.

The canvas editor lives at `/canvas/:id`. Four regions you use every day.

## Layout

<div
  style={{
width: "100%",
borderRadius: "12px",
border: "1px solid #E2E2E8",
overflow: "hidden",
fontFamily:
  'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
fontSize: "11px",
color: "#0F1413",
marginBottom: "1.5rem",
}}
>
  <div
    style={{
  padding: "10px 14px",
  borderBottom: "1px solid #E2E2E8",
  background: "#FAFAFC",
  display: "flex",
  gap: "10px",
  alignItems: "center",
  color: "#6B6B7B",
}}
  >
    <span style={{ fontWeight: 600, color: "#0F1413" }}>Launch deck</span>
    <span>·</span>
    <span>share</span>
    <span>·</span>
    <span>publish</span>
    <span>·</span>
    <span>settings</span>
  </div>

  <div style={{ display: "flex", minHeight: "220px" }}>
    <div
      style={{
    width: "22%",
    borderRight: "1px solid #E2E2E8",
    background: "#FFFFFF",
    padding: "10px",
    display: "flex",
    flexDirection: "column",
    gap: "8px",
  }}
    >
      <div
        style={{
      fontSize: "9px",
      letterSpacing: "0.08em",
      textTransform: "uppercase",
      color: "#8A8AA0",
    }}
      >
        Chat
      </div>

      <div
        style={{
      height: "44px",
      borderRadius: "8px",
      background: "#F4F4F8",
      border: "1px solid #E2E2E8",
    }}
      />

      <div
        style={{
      height: "44px",
      borderRadius: "8px",
      background: "#F4F4F8",
      border: "1px solid #E2E2E8",
    }}
      />

      <div
        style={{
      marginTop: "auto",
      height: "34px",
      borderRadius: "8px",
      border: "1px solid #E2E2E8",
      background: "#FAFAFC",
    }}
      />
    </div>

    <div
      style={{
    flex: 1,
    background:
      "radial-gradient(circle at 1px 1px, #E2E2E8 1px, transparent 0) 0 0 / 18px 18px #FAFAFC",
    padding: "16px",
    position: "relative",
  }}
    >
      <div
        style={{
      width: "46%",
      height: "110px",
      borderRadius: "8px",
      background: "#FFFFFF",
      border: "1px solid #E2E2E8",
      boxShadow: "0 8px 24px rgba(15,20,19,0.08)",
      padding: "10px",
    }}
      >
        <div
          style={{
        height: "28px",
        borderRadius: "6px",
        background: "linear-gradient(135deg, #5B5BD6, #7C7BE8)",
        marginBottom: "8px",
      }}
        />

        <div
          style={{
        height: "6px",
        width: "70%",
        borderRadius: "3px",
        background: "#0F1413",
        marginBottom: "5px",
      }}
        />

        <div
          style={{
        height: "5px",
        width: "90%",
        borderRadius: "3px",
        background: "#D8D8E0",
      }}
        />
      </div>

      <div
        style={{
      position: "absolute",
      right: "18%",
      top: "52px",
      width: "28%",
      height: "88px",
      borderRadius: "8px",
      background: "#0F1413",
      border: "1px solid #E2E2E8",
      boxShadow: "0 8px 24px rgba(15,20,19,0.08)",
      padding: "10px",
    }}
      >
        <div
          style={{
        height: "6px",
        width: "80%",
        borderRadius: "3px",
        background: "#FFFFFF",
        marginBottom: "6px",
      }}
        />

        <div
          style={{
        height: "5px",
        width: "55%",
        borderRadius: "3px",
        background: "#5B5BD6",
      }}
        />
      </div>
    </div>

    <div
      style={{
    width: "18%",
    borderLeft: "1px solid #E2E2E8",
    background: "#FFFFFF",
    padding: "10px 8px",
    display: "flex",
    flexDirection: "column",
    gap: "6px",
    color: "#6B6B7B",
  }}
    >
      <div style={{ fontWeight: 600, color: "#0F1413" }}>Export</div>
      <div>Promote</div>
      <div>Assets</div>
      <div>Settings</div>
    </div>
  </div>

  <div
    style={{
  padding: "8px 12px",
  borderTop: "1px solid #E2E2E8",
  background: "#FFFFFF",
  display: "flex",
  gap: "8px",
  alignItems: "center",
  color: "#6B6B7B",
}}
  >
    <span
      style={{
    padding: "2px 6px",
    borderRadius: "4px",
    border: "1px solid #E2E2E8",
    background: "#FAFAFC",
  }}
    >
      V
    </span>

    <span
      style={{
    padding: "2px 6px",
    borderRadius: "4px",
    border: "1px solid #E2E2E8",
  }}
    >
      H
    </span>

    <span
      style={{
    padding: "2px 6px",
    borderRadius: "4px",
    border: "1px solid #E2E2E8",
  }}
    >
      F
    </span>

    <span
      style={{
    padding: "2px 6px",
    borderRadius: "4px",
    border: "1px solid #E2E2E8",
  }}
    >
      T
    </span>

    <span
      style={{
    padding: "2px 6px",
    borderRadius: "4px",
    border: "1px solid #7864e6",
    background: "rgba(120,100,230,0.08)",
    color: "#5B5BD6",
  }}
    >
      C
    </span>

    <span style={{ marginLeft: "auto" }}>undo · redo · history</span>
  </div>
</div>

### Chat panel (left)

Your conversation with the canvas agent. See [The chat and the agent](/concepts/the-chat) for the full loop.

* **Composer.** Type, attach images, pick design systems and styles.
* **History.** Every turn the agent has taken on this canvas.
* **New chat.** Start a fresh thread without losing the old one. Same canvas.
* **Stop.** Cancel a streaming turn. Frames already landed stay.

### Infinite canvas (center)

A Pixi.js viewport rendering your frames. Each frame is an iframe on top of a Pixi node.

* **Pan.** Spacebar + drag, middle mouse, or two-finger scroll.
* **Zoom.** Cmd / Ctrl + scroll, or pinch.
* **Select.** Click a frame, shift-click for multi-select, drag-rectangle for marquee.
* **Edit in place.** Double-click a frame to enter its iframe.
* **Right-click.** Reference in chat, duplicate, delete, export, copy.

### Right sidebar

Tabs for the things you do *to* a frame, not *with* it.

| Tab            | What it does                                                                                                 |
| -------------- | ------------------------------------------------------------------------------------------------------------ |
| **Export**     | PPTX, PDF, PNG/JPG, HTML, React, Prompt. Per-frame or whole canvas. See [Exports](/exports/overview).        |
| **Add to app** | Promote selected frames into a deployed Vite + React project. See [Promote to app](/exports/promote-to-app). |
| **Assets**     | Your uploaded and AI-generated images. Drag onto a frame, reference from chat.                               |
| **Settings**   | Canvas name, attached design system, attached style, connected apps.                                         |

### Bottom toolbar

The interaction modes.

| Key   | Tool    | What it does                                                                              |
| ----- | ------- | ----------------------------------------------------------------------------------------- |
| **V** | Select  | Default. Click frames, marquee select, drag to move.                                      |
| **H** | Hand    | Pan only. Useful on a trackpad.                                                           |
| **F** | Frame   | Drop a blank 400 × 300 frame. Local-only until the agent fills it.                        |
| **T** | Text    | Drop a text node.                                                                         |
| **C** | Comment | The AI Pointer. Click any element, drop a note. See [Inline edit](/concepts/inline-edit). |

The toolbar also exposes undo / redo and the chat-history switcher.

***

## Working patterns

<AccordionGroup>
  <Accordion title="Brief → frames → point → export">
    The default loop. Brief in chat, watch frames render, use the comment tool for surgical fixes, export when done. Most canvases finish in this loop.
  </Accordion>

  <Accordion title="Clone → tweak → promote">
    Ask the agent to clone a frame from your existing site. Edit the copy and colors. **Add to app** to deploy it as a real React page.
  </Accordion>

  <Accordion title="Variations from one base">
    Generate a hero. Duplicate it three times. Use chat to push each in a different direction (*"first one, more editorial. Second, more brutalist. Third, our brand exactly."*). Pick the winner.
  </Accordion>

  <Accordion title="Side-by-side review">
    Pan so two frames are visible. Use the comment tool on each. Send a single message with both pointers: *"These should match the design system. Pick the tighter of the two as canonical."*
  </Accordion>
</AccordionGroup>

***

## Settings worth knowing

* **Project settings → Connected apps.** If you've promoted frames to a UI project, every promote shows here with sync state (in sync, stale, never synced).
* **Settings → MCP.** Your MCP URL and API key. Same key works for canvas and UI MCP tools. See [MCP overview](/mcp/overview).
* **Settings → Credits.** Account-level. Open it from the org dropdown, not the canvas. See [Credits](/reference/credits).

## Next

<CardGroup cols={2}>
  <Card title="Keyboard shortcuts" icon="keyboard" href="/editor/keyboard-shortcuts">
    The full cheat sheet.
  </Card>

  <Card title="Exports overview" icon="arrow-down-to-bracket" href="/exports/overview">
    Every format the canvas ships.
  </Card>
</CardGroup>