> ## 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

> Interactive content creation and editing with AI - create documents, code, spreadsheets, and web pages in real-time

## What is Canvas?

Canvas is ZeroTwo's powerful interactive workspace that transforms AI responses into living documents you can continuously edit and refine. Instead of static chat responses, Canvas provides dedicated editors for different content types with real-time AI assistance.

<Note>
  Canvas automatically opens when AI generates content that benefits from interactive editing. You can also manually create a Canvas at any time.
</Note>

## Canvas Types

### Text Canvas

Rich text editor for documents, articles, and written content.

**Features**:

* **Rich Text Editing**: Full-featured text editor with BlockNote integration
* **Markdown Support**: Native markdown formatting and rendering
* **AI Writing Assistant**: Press `Cmd+Alt+I` to invoke AI help inline
* **Smart Formatting**: Automatic text styling and structure optimization
* **Version History**: Track all changes with one-click rollback
* **Export Options**: Download as Markdown, PDF, or plain text

**Keyboard Shortcuts**:

* `Cmd+L` / `Ctrl+L`: Create link
* `Cmd+Alt+I` / `Ctrl+Alt+I`: Open AI menu
* `Cmd+B` / `Ctrl+B`: Bold text
* `Cmd+I` / `Ctrl+I`: Italic text
* `Cmd+Z` / `Ctrl+Z`: Undo
* `Cmd+Shift+Z` / `Ctrl+Shift+Z`: Redo

<Tip>
  Use the AI menu (Cmd+Alt+I) to ask AI to improve, expand, or rewrite any selected text without leaving your flow.
</Tip>

**Use Cases**:

* Blog posts and articles
* Documentation and guides
* Reports and summaries
* Email templates
* Creative writing

### Code Canvas

Advanced code editor with syntax highlighting and live preview.

**Features**:

* **Multi-Language Support**: JavaScript, Python, TypeScript, HTML, CSS, JSON, and more
* **Syntax Highlighting**: Powered by CodeMirror with intelligent color coding
* **Live Preview**: Real-time preview for React components and web content
* **Code Execution**: Run Python code in a sandboxed environment
* **AI Code Assistant**: Get suggestions, refactoring, and debugging help
* **Multi-File Projects**: Manage multiple related code files
* **Export Options**: Save as files, copy to clipboard, or push to GitHub

**Supported Languages**:

```
JavaScript, TypeScript, Python, Java, C, C++, C#, PHP, Ruby, 
Go, Rust, Swift, Kotlin, HTML, CSS, SCSS, JSON, XML, YAML, 
SQL, Bash, PowerShell, Markdown
```

**Use Cases**:

* Building web applications
* Writing scripts and utilities
* Code review and refactoring
* Creating React components
* API endpoint development
* Algorithm implementation

<CodeGroup>
  ```javascript React Component theme={null}
  import React, { useState } from 'react';

  function Counter() {
    const [count, setCount] = useState(0);
    
    return (
      <div className="counter">
        <h2>Count: {count}</h2>
        <button onClick={() => setCount(count + 1)}>
          Increment
        </button>
      </div>
    );
  }

  export default Counter;
  ```

  ```python Data Processing theme={null}
  import pandas as pd
  import matplotlib.pyplot as plt

  # Load and process data
  df = pd.read_csv('data.csv')
  df_cleaned = df.dropna()

  # Create visualization
  plt.figure(figsize=(10, 6))
  plt.plot(df_cleaned['date'], df_cleaned['value'])
  plt.title('Data Trend Over Time')
  plt.xlabel('Date')
  plt.ylabel('Value')
  plt.show()
  ```
</CodeGroup>

### Spreadsheet Canvas

Excel-like interface for data management and analysis.

**Features**:

* **Large Dataset Support**: Handle up to 1000 rows × 100 columns
* **CSV Import/Export**: Seamless data import and export
* **Dynamic Resizing**: Adjustable column widths and responsive design
* **Formula Support**: Built-in calculation capabilities
* **Data Visualization**: Generate charts and graphs from your data
* **Virtual Scrolling**: Smooth performance with large datasets
* **Collaborative Editing**: Real-time updates for team members

**Spreadsheet Operations**:

* Sort and filter columns
* Data validation
* Cell formatting
* Formula calculations
* Chart generation
* Export to Excel, CSV, Google Sheets

**Use Cases**:

* Data analysis and reporting
* Budget planning and tracking
* Project management tables
* Inventory management
* Survey data processing
* Financial calculations

<Tip>
  Upload a CSV file and ask AI to "analyze this data in a spreadsheet" for instant interactive analysis.
</Tip>

### HTML Canvas

Web development workspace with live preview and component library.

**Features**:

* **Live Preview**: See changes instantly as you code
* **CSS Integration**: Embedded styling with responsive design support
* **Component Library**: Access to Shadcn UI and Tailwind CSS components
* **Interactive Elements**: Support for forms, buttons, and dynamic content
* **Mobile-First Design**: Responsive layouts optimized for all devices
* **SEO Tools**: Meta tags and optimization helpers
* **Accessibility Checking**: WCAG compliance validation

**Technologies Supported**:

* HTML5 with semantic elements
* CSS3 and modern styling
* Tailwind CSS utilities
* JavaScript interactions
* Shadcn UI components
* Responsive design patterns

**Use Cases**:

* Landing page development
* Email template creation
* Web component prototyping
* UI/UX mockups
* Marketing materials
* Portfolio pages

## How to Use Canvas

### Opening Canvas

Canvas opens automatically in these scenarios:

<Steps>
  <Step title="AI Creates Structured Content">
    When you ask AI to create content that benefits from editing:

    ```
    Write a blog post about artificial intelligence
    Create a Python script for data processing
    Build a React component for a todo list
    ```
  </Step>

  <Step title="Canvas Appears">
    The appropriate Canvas type opens on the right side of your screen with the AI-generated content.
  </Step>

  <Step title="Start Editing">
    Begin editing immediately - the content is fully editable and interactive.
  </Step>
</Steps>

### Manual Canvas Creation

You can also create a Canvas manually:

1. Click the **Canvas** button in the chat header
2. Select the Canvas type (Text, Code, Spreadsheet, HTML)
3. Start creating from scratch or paste existing content
4. Use AI assistance as needed

### Canvas Toolbar

The Canvas toolbar provides quick access to essential features:

**Left Side**:

* **Canvas Type Indicator**: Shows current editor type
* **File Name**: Click to rename your canvas
* **Save Status**: Auto-save indicator

**Center**:

* **Preview Toggle**: Switch between edit and preview (Code/HTML)
* **Version History**: Access previous versions

**Right Side**:

* **Share Button**: Share publicly or with team
* **Export Menu**: Download in various formats
* **Settings**: Canvas-specific options

## Working with Canvas

### Real-Time AI Collaboration

Canvas integrates AI assistance throughout your editing:

**Inline Assistance**:

* Select text and press `Cmd+Alt+I` for AI suggestions
* Ask AI to improve, expand, or rewrite sections
* Request formatting and style changes

**Chat Integration**:

* Continue chatting while Canvas is open
* Ask AI to modify Canvas content
* Request additions or changes naturally

<Info>
  Your conversation with AI continues in the chat panel while Canvas displays your working document.
</Info>

### Version Control & History

Every change is automatically saved and versioned:

1. **Version Dropdown**: Access in toolbar
2. **View History**: See all previous versions with timestamps
3. **Restore Version**: One-click rollback to any previous state
4. **Compare Versions**: Side-by-side comparison of changes
5. **Branch Versions**: Create alternative versions to explore ideas

<Warning>
  Version history is maintained for 30 days for free accounts, 90 days for Pro accounts.
</Warning>

### Collaboration Features

Work together with team members on Canvas:

**Real-Time Sync**:

* See team members' cursors and selections
* Live updates as collaborators make changes
* Conflict resolution for simultaneous edits
* Presence indicators showing who's active

**Collaborative Editing**:

* Multiple people can edit simultaneously
* Comment and annotate content
* @ mention team members for feedback
* Track individual contributions

**Permissions**:

* **View Only**: Read access without editing
* **Comment**: Can add comments and suggestions
* **Edit**: Full editing capabilities
* **Admin**: Manage permissions and settings

## Exporting & Sharing

### Export Options

Download your Canvas content in multiple formats:

**Text Canvas**:

* Markdown (.md)
* PDF (.pdf)
* Plain text (.txt)
* HTML (.html)
* Microsoft Word (.docx)

**Code Canvas**:

* Source code files (language-specific extensions)
* ZIP archive (for multi-file projects)
* GitHub Gist
* GitHub repository

**Spreadsheet Canvas**:

* CSV (.csv)
* Excel (.xlsx)
* Google Sheets (direct export)
* JSON data

**HTML Canvas**:

* HTML file (.html)
* Single-page application
* CodePen export
* JSFiddle export

### Sharing Options

Share your Canvas with others:

<Tabs>
  <Tab title="Public Link">
    **Create a public URL**:

    1. Click Share button
    2. Toggle "Public Link"
    3. Copy and share the URL

    Anyone with the link can view (editing requires permissions).
  </Tab>

  <Tab title="Social Media">
    **Share directly to platforms**:

    * Twitter/X
    * LinkedIn
    * Reddit
    * Facebook

    Includes automatic preview card with title and description.
  </Tab>

  <Tab title="Team Sharing">
    **Share within your workspace**:

    1. Click Share button
    2. Select team members
    3. Set permissions level
    4. Add optional message
    5. Send invitation
  </Tab>

  <Tab title="Embed">
    **Embed in websites**:

    1. Click Share button
    2. Select "Embed Code"
    3. Copy iframe code
    4. Paste into your website

    Responsive embeds work on any device.
  </Tab>
</Tabs>

## Advanced Features

### Canvas Streaming

Watch as AI creates content in real-time:

* **Progressive Generation**: See content appear word-by-word or line-by-line
* **Intelligent Chunking**: Content organized logically as it generates
* **Pause & Resume**: Stop generation anytime and continue later
* **Regenerate Sections**: Ask AI to redo specific parts

### Canvas Search

Find and replace across your content:

* `Cmd+F` / `Ctrl+F`: Find
* `Cmd+G` / `Ctrl+G`: Find next
* `Cmd+Shift+F` / `Ctrl+Shift+F`: Find and replace
* Regular expression support
* Case-sensitive options

### Canvas Templates

Start from pre-built templates:

**Text Templates**:

* Blog post outline
* Technical documentation
* Meeting notes
* Project proposal

**Code Templates**:

* React component
* Express API endpoint
* Python script
* REST API client

**Spreadsheet Templates**:

* Budget tracker
* Project timeline
* Data analysis
* Inventory management

## Tips & Best Practices

<AccordionGroup>
  <Accordion title="Efficient Editing Workflows">
    **Keyboard-First Approach**:

    * Learn keyboard shortcuts for common actions
    * Use Cmd+Alt+I for quick AI assistance
    * Navigate with arrow keys and home/end

    **Version Control Strategy**:

    * Save major milestones as named versions
    * Use branching for experimental changes
    * Review history before major edits
  </Accordion>

  <Accordion title="Collaborative Best Practices">
    **Clear Communication**:

    * Use comments to explain changes
    * @ mention team members for specific feedback
    * Establish editing conventions

    **Conflict Prevention**:

    * Work on different sections simultaneously
    * Communicate major changes in chat
    * Review others' edits before making changes
  </Accordion>

  <Accordion title="Performance Optimization">
    **Large Documents**:

    * Break very long documents into sections
    * Use Canvas search instead of scrolling
    * Export and reimport for major restructuring

    **Code Projects**:

    * Split large files into modules
    * Use imports/exports appropriately
    * Test sections independently
  </Accordion>

  <Accordion title="AI Assistance Tips">
    **Effective Prompts**:

    * Select specific sections for targeted improvements
    * Be explicit about desired changes
    * Request multiple options to compare

    **Iterative Refinement**:

    * Make small, incremental improvements
    * Review AI suggestions before applying
    * Combine AI help with manual editing
  </Accordion>
</AccordionGroup>

## Common Use Cases

### Documentation Writing

Create comprehensive technical documentation:

```
Help me write API documentation for a REST endpoint that creates users
```

AI will:

1. Open Text Canvas
2. Generate structured documentation
3. Include request/response examples
4. Add parameter descriptions

You can then:

* Edit and refine sections
* Add company-specific details
* Export as Markdown for your docs site

### Code Development

Build complete applications:

```
Create a React todo list application with add, complete, and delete functions
```

AI will:

1. Open Code Canvas
2. Generate component structure
3. Include state management
4. Add styling with Tailwind CSS

You can then:

* Test in live preview
* Refine functionality
* Add features iteratively
* Export to your project

### Data Analysis

Analyze and visualize data:

```
Analyze this sales data and create a summary spreadsheet
```

AI will:

1. Open Spreadsheet Canvas
2. Process your CSV data
3. Calculate key metrics
4. Generate charts

You can then:

* Sort and filter data
* Add custom calculations
* Create additional visualizations
* Export to Excel

## Troubleshooting

<AccordionGroup>
  <Accordion title="Canvas won't open">
    **Solutions**:

    * Refresh the page
    * Clear browser cache
    * Try a different browser
    * Check browser console for errors
    * Ensure pop-ups aren't blocked
  </Accordion>

  <Accordion title="Preview not updating">
    **For Code/HTML Canvas**:

    * Check for syntax errors
    * Save your changes (Cmd+S)
    * Toggle preview off and on
    * Refresh the preview panel
  </Accordion>

  <Accordion title="Export issues">
    **Common fixes**:

    * Ensure content is saved
    * Try a different export format
    * Check file size limits
    * Disable browser extensions
    * Use download option instead of print
  </Accordion>

  <Accordion title="Performance problems">
    **For large documents**:

    * Close other Canvas instances
    * Reduce document size
    * Disable live preview while editing
    * Clear version history if very long
    * Use browser's hardware acceleration
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Web Search" icon="globe" href="/tools/web-search">
    Add real-time web information to your content
  </Card>

  <Card title="Code Interpreter" icon="code" href="/tools/code-interpreter">
    Execute and test code in a secure environment
  </Card>

  <Card title="Projects" icon="folder" href="/workspaces/create-workspace">
    Organize Canvas documents in team projects
  </Card>

  <Card title="Sharing Guide" icon="share" href="/workspaces/shared-chats-and-docs">
    Learn advanced sharing and collaboration
  </Card>
</CardGroup>

<Check>
  Canvas transforms AI responses into interactive workspaces - try it with your next creative project!
</Check>