---
title: Documents & Canvas
description: Create and edit text documents, code, and spreadsheets
---

Canvas lets you create and edit documents directly in chat. The AI creates text documents, code files, and spreadsheets in a side panel where you can view, edit, and refine them.

## Installation

Install the document bundles you want to expose:

```bash
bunx chat-js@alpha add text-documents code-documents sheet-documents
```

Each bundle supplies its document tools and editor. See [Authoring tools](./authoring#document-bundles) to add a custom document kind.

<Frame>
  <img
    src="/docs/images/canvas.gif"
    alt="Creating and editing a document in the canvas side panel"
  />
</Frame>

## Document bundles

You can create three types of canvas:

| Bundle | Best for | Features |
| --- | --- | --- |
| **Text** (`text-documents`) | Essays, emails, reports, documentation, and other written content | Markdown support, diff view, version history, direct editing, polish tool |
| **Code** (`code-documents`) | Python scripts, JavaScript, TypeScript, and other code files | Syntax highlighting, version history, optional saved-code execution |
| **Sheet** (`sheet-documents`) | Data tables, datasets, and CSV files | Spreadsheet editor, CSV export, data visualization via Python |

## Creating a canvas

When you ask the AI to create something substantial, it automatically creates a canvas with the appropriate type. You can also request specific types:

- **Text documents**: "Write a professional email about..." or "Draft an essay on..."
- **Code** (`code-documents`): "Create a Python script that..." or "Write a React component for..."
- **Spreadsheets**: "Create a spreadsheet with..." or "Build a data table for..."

The AI uses dedicated tools to create documents:

- `createTextDocument` for markdown text content
- `createCodeDocument` for code files (filename determines syntax highlighting)
- `createSheetDocument` for CSV-format spreadsheets

## Reading documents

Install `read-document` to expose `readDocument`. Other document tools can install it as a dependency. It reads saved document content and revision metadata for the current authorized conversation.

```bash
bunx chat-js@alpha add read-document
```

## Document deletion with approval

```bash
npx chat-js@alpha add delete-document
```

This optional bundle installs `deleteDocument` and its `readDocument` dependency. The agent first calls `readDocument`, then passes the exact title and revision to `deleteDocument` to request owner approval. Rejection leaves the document unchanged. If the document changes before approval, deletion fails and requires a fresh request.

Deletion removes the document from the current conversation. Existing history snapshots and other branches retain their revisions. This is not permanent content erasure. The tool requires signed-in ownership, enabled document tools, and EVE's native approval receipt. It adds no provider credentials or tool usage charge.

## Editing documents

### Direct editing

Click into any canvas to edit directly. Changes auto-save after you stop typing.

### AI-assisted editing

Ask the AI to make changes and it will update the document:

- "Make this code more concise"
- "Fix the typos in this email"
- "Add a column for timestamps"

The AI reads the current document content before making edits to preserve context.

### Version history

Every change creates a new version. Navigate between versions using the controls in the canvas header:

- **Undo** (left arrow): View the previous version
- **Redo** (right arrow): View the next version

When viewing an older version, a footer appears letting you return to the latest version.

### Diff view (text only)

Text documents support a diff view that highlights additions and deletions between consecutive versions. Toggle diff view using the history icon in the canvas header.

## Canvas toolbar

A floating toolbar appears at the bottom-right of the canvas. Each canvas type has different quick actions:

### Text toolbar

- **Add final polish**: Checks grammar, adds section titles, improves readability

### Code toolbar

- **Add comments**: Adds explanatory comments to the code
- **Add logs**: Adds debug logging statements

### Sheet toolbar

- **Format and clean data**: Cleans and formats the spreadsheet data
- **Analyze and visualize**: Creates a Python code canvas with data analysis and visualization

## Code execution

Install saved-code execution with a compatible [sandbox provider](../deployment/sandboxes):

```bash
bunx chat-js@alpha add saved-code-execution --sandbox-provider vercel
```

The Run action requests execution of the saved Python or JavaScript revision through EVE. Execution uses the selected sandbox provider and records results against that revision. See [Code Execution](./code-execution) for supported output and accounting.

## Canvas actions

Each canvas type has action buttons in the header:

### All types

- **Undo/Redo**: Navigate version history
- **Copy**: Copy content to clipboard

### Text only

- **View changes**: Toggle diff view comparing current and previous version

### Sheet only

- **Copy as CSV**: Exports clean CSV (removes empty rows)

## Configuration

Installed document bundles determine the available kinds. Customize their editors in `integrations/documents/ui.ts` and their definitions in `integrations/documents/definitions.ts`. Removing a bundle preserves saved content and displays a read-only source fallback until that kind is installed again.