Canvas

​

What is Canvas?

​

Canvas Types

​

Text Canvas

• 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

• 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

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

​

Code Canvas

• 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

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

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

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;

​

Spreadsheet Canvas

• 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

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

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

​

HTML Canvas

• 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

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

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

​

How to Use Canvas

​

Opening Canvas

Write a blog post about artificial intelligence
Create a Python script for data processing
Build a React component for a todo list

​

Manual Canvas Creation

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

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

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

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

​

Working with Canvas

​

Real-Time AI Collaboration

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

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

​

Version Control & History

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

​

Collaboration Features

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

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

• 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

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

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

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

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

​

Sharing Options

​

Advanced Features

​

Canvas Streaming

• 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

• 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

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

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

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

​

Tips & Best Practices

​

Common Use Cases

​

Documentation Writing

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

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

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

​

Code Development

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

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

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

​

Data Analysis

Analyze this sales data and create a summary spreadsheet

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

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

​

Troubleshooting

​

Next Steps