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

# Canvas Mode

> An in-chat document editor where ZeroTwo creates and edits rich, live documents alongside your conversation.

Canvas Mode transforms ZeroTwo from a chat interface into a collaborative document workspace. Instead of receiving content inside a chat bubble, the AI writes directly into a live document panel — giving you a real, editable artifact you can refine, export, and share.

## What Is Canvas Mode?

Canvas Mode opens a document editor as a right-side panel alongside your chat. The chat stays on the left; the canvas fills the right. When you ask ZeroTwo to create something — a report, a script, a diagram, a spreadsheet — it writes the content directly into the document rather than into the chat thread.

This means you get:

* A properly formatted, editable document — not prose buried in a chat bubble
* Inline AI editing: select any text and ask ZeroTwo to rephrase, expand, or fix it
* Export to PDF, DOCX, CSV, SVG, and more
* A shareable public read-only link for the document
* Version history tracked as the document evolves

## How to Activate Canvas Mode

<Steps>
  <Step title="Open a chat">
    Navigate to any chat at `/c` or `/c/:chatId`. Canvas Mode is available in the main chat interface.
  </Step>

  <Step title="Click the Canvas pill">
    Find the **Canvas** pill in the prompt bar at the bottom of the chat. Click it — it turns blue/highlighted when active.
  </Step>

  <Step title="Describe what you want">
    Type your prompt as normal. ZeroTwo will create the content inside a canvas document rather than responding in the chat.
  </Step>

  <Step title="Refine in the canvas">
    Once the canvas opens, continue chatting to iterate. Select text for inline edits. Use the toolbar to export or share.
  </Step>
</Steps>

<Tip>
  Be explicit for the best results: "Write a product requirements document in the canvas" or "Create a Python script in a code canvas for parsing CSV files."
</Tip>

## The 7 Editor Types

ZeroTwo supports seven canvas editor types. The AI selects the most appropriate one based on your prompt, or you can specify the type directly.

| Editor                  | Best For                                       | Example Prompt                                       |
| ----------------------- | ---------------------------------------------- | ---------------------------------------------------- |
| **Rich Text**           | Documents, reports, emails, proposals          | "Write a project proposal..."                        |
| **Code Editor**         | Scripts, functions, full programs              | "Write a Python function..."                         |
| **Spreadsheet**         | Tables, budgets, comparisons, timelines        | "Build a comparison table..."                        |
| **Mermaid Diagram**     | Flowcharts, ER diagrams, sequence diagrams     | "Draw a flowchart of the user signup process"        |
| **HTML Preview**        | Landing pages, UI mockups, data visualizations | "Build a live HTML landing page mockup..."           |
| **SVG**                 | Vector graphics and icons                      | "Create an SVG illustration of..."                   |
| **PDF / Slides Viewer** | Viewing uploaded PDFs and presentations        | Opened automatically when viewing uploaded documents |

## Key Features

<CardGroup cols={2}>
  <Card title="Inline AI Edits" icon="wand2">
    Select any text in the canvas and an inline toolbar appears. Type an instruction — rephrase, expand, shorten, translate — and ZeroTwo edits in place.
  </Card>

  <Card title="Undo / Redo" icon="undo">
    Full undo and redo support throughout the canvas. Use **Cmd/Ctrl+Z** to undo and **Cmd/Ctrl+Shift+Z** to redo.
  </Card>

  <Card title="Version History" icon="layers">
    ZeroTwo tracks versions of your canvas as it evolves through the conversation, so you can see how the document changed.
  </Card>

  <Card title="Export" icon="download">
    Export canvas documents to PDF, DOCX, CSV, SVG, PNG, or Markdown depending on the editor type.
  </Card>

  <Card title="Share via Public Link" icon="share2">
    Generate a public read-only link to your canvas at `/share/canvas/:id`. Viewers do not need a ZeroTwo account.
  </Card>

  <Card title="Slash Commands" icon="pen-line">
    In the rich text editor, type `/` to access a block menu: headings, tables, code blocks, image embeds, and more.
  </Card>
</CardGroup>

## Common Use Cases

**Writing and Documents**
Use the rich text editor to draft reports, proposals, job descriptions, emails, blog posts, or documentation. ZeroTwo structures content with proper headings and formatting — it writes the document, not just a block of text.

**Coding**
Use the code editor to generate scripts, functions, and full programs with syntax highlighting. Paste your existing code and ask ZeroTwo to refactor, add types, write tests, or convert between languages.

**Diagrams and Architecture**
Use the Mermaid diagram editor to visualize system architecture, database schemas, API flows, project timelines, and state machines — rendered live as you describe them.

**HTML Mockups and Prototypes**
Use the HTML preview to build live-rendered landing pages, UI components, data visualizations, and interactive forms — all rendered in real time in a sandboxed pane.

**Structured Data**
Use the spreadsheet editor to create comparison tables, budgets, project timelines, and pricing tables — with formula support and direct CSV export.

## Specifying the Editor Type

ZeroTwo infers the editor type from your prompt. If the wrong editor opens, or you want a specific one, include it explicitly:

| To open this editor | Say something like                                                            |
| ------------------- | ----------------------------------------------------------------------------- |
| Rich Text           | "Write a document about..." / "Draft a report on..."                          |
| Code                | "Create a code canvas in Python..." / "Write a JavaScript function canvas..." |
| Spreadsheet         | "Make a spreadsheet comparing..." / "Build a table with columns for..."       |
| Mermaid Diagram     | "Create a Mermaid flowchart..." / "Draw a sequence diagram..."                |
| HTML Preview        | "Build an HTML page that..." / "Create a live HTML canvas..."                 |

## Canvas Pages

<CardGroup cols={2}>
  <Card title="Rich Text Editor" icon="pen-line" href="/tools/canvas/text-editor">
    Documents, reports, emails, and proposals powered by BlockNote.
  </Card>

  <Card title="Code Editor" icon="code-2" href="/tools/canvas/code-editor">
    Generate and edit code with syntax highlighting for all major languages.
  </Card>

  <Card title="Spreadsheet Editor" icon="table2" href="/tools/canvas/spreadsheet-editor">
    Tabular data, formulas, and CSV export.
  </Card>

  <Card title="Diagram Editor" icon="git-branch" href="/tools/canvas/diagram-editor">
    Mermaid-powered flowcharts, ER diagrams, Gantt charts, and more.
  </Card>

  <Card title="HTML Preview" icon="globe" href="/tools/canvas/html-preview">
    Live-rendered HTML/CSS/JS with split-pane editing.
  </Card>

  <Card title="Export Canvas" icon="download" href="/tools/canvas/export-canvas">
    PDF, DOCX, CSV, SVG, PNG, and Markdown export options.
  </Card>

  <Card title="Share Canvas" icon="share2" href="/tools/canvas/share-canvas">
    Generate public read-only links and manage sharing.
  </Card>

  <Card title="Troubleshooting" icon="sparkles" href="/tools/canvas/troubleshooting">
    Fix common canvas issues quickly.
  </Card>
</CardGroup>