---
title: Canvas overview
slug: agent-platform/docs/canvas-overview
docTags: 
createdAt: 2026-08-12T15:37:11.000Z
---

A canvas is a building block for digital experiences, such as a document, web component, slide deck, or other asset you create and edit with Agent Platform. A space is the version-controlled workspace that holds one or more canvases. Each chat thread has one space. See [Share artifacts](docId\:Vdej0FGiz7QfX9rRs_4Pu) for how space-level permissions control access to artifacts from the same conversation.

Use a canvas to collaborate with Mark in real time on iterative work like marketing briefs, web components, and presentations.

## Supported formats

Agent Platform supports rendering and editing the following MIME types (the format identifiers that tell the canvas how to display each digital asset):

- `text/markdown` – For documents, briefs, emails, and articles.
- `text/html` – For pure HTML content.
- `application/x-reactjs` – For React components and applications.
- `application/x-nextjs` – For Next.js pages and applications.
- `text/csv` – For comma-separated values (CSV) plain text data formats.
- `application/vnd.ms-powerpoint` – For Microsoft PowerPoint presentations (when using the `create_powerpoint_canvas` tool).

### Available download formats

Download the canvas in different file types based on its MIME type.

- `text/markdown`
  - Microsoft Word – `.docx`
  - PDF document – `.pdf`
  - Plain text – `.txt`
  - Rich text format – `.rtf`
  - Markdown – `.md`
- `text/html`
  - HTML – `.html`
  - PDF document – `.pdf`
  - Plain text – `.txt`
- `application/x-reactjs`
  - JavaScript – `.js`
  - JavaScript JSX – `.jsx`
- `application/x-nextjs`
  - JavaScript – `.js`
  - JavaScript JSX – `.jsx`
- `text/csv`
  - Comma Separated Values – `.csv`
  - Microsoft Excel – `.xlsx`
  - PDF document – `.pdf`
- `application/vnd.ms-powerpoint`
  - Microsoft PowerPoint – `.pptx`
  - PDF document – `.pdf`

## Canvas UI overview

A canvas adapts its UI to the digital asset's MIME type, so the controls match what you are editing. See the [Supported formats](docId:1_VDSKJ_RG0FEQe0MCTv1) section for a list of available MIME types.

### `text/markdown`

Markdown canvases display as formatted text. Use them for documents, briefs, emails, and articles.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/0fLPkKgI87NukDzFYVcLd_canvas-ui-overview.png)

The numbered annotations correspond to the following controls:

1. Close the canvas and return to [Mark chat](docId\:dtNBEttEGVvkhNkwNypLM).
2. Switch to raw Markdown mode to edit the underlying Markdown directly.
3. Switch to rich text mode to edit the Markdown in a What You See Is What You Get (WYSIWYG) editor.
4. Toggle between canvases in the same workspace.
5. See the total number of files and size of the workspace.
6. Undo changes in the canvas.
7. Redo changes in the canvas.
8. Copy the raw Markdown.
9. Download the canvas content. See [Available download formats](docId:1_VDSKJ_RG0FEQe0MCTv1).
10. [Collaborate with Mark in canvas](docId\:x7LXyOYrPrpVn6CFuiHUh) to modify the Markdown.

### `text/html`, `application/x-reactjs`, and `application/x-nextjs`

Code-based canvases display the code and a rich preview similar to the following:

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/v3fGVph-EahAMiNCHUXFR_text-html.png)

The numbered annotations correspond to the following controls:

1. Close the canvas and return to [Mark chat](docId\:dtNBEttEGVvkhNkwNypLM).
2. Switch to code mode.
3. Switch to rich preview mode.
4. Toggle between canvases in the same space (chat thread).
5. See the total number of files and size of the workspace.
6. Undo changes to the canvas.
7. Redo changes to the canvas.
8. Copy the code to your clipboard.
9. Download the canvas content. See [Available download formats](docId:1_VDSKJ_RG0FEQe0MCTv1).
10. [Collaborate with Mark in canvas](docId\:x7LXyOYrPrpVn6CFuiHUh) to modify the code.

### `text/csv`

CSV canvases display data as a table similar to the following. Use them to inspect, edit, and reshape tabular data alongside Agent Platform.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/9G4OOORiVhdErTJgqXLPI_text-csv.png)

The numbered annotations correspond to the following controls:

1. Close the canvas and return to [Mark chat](docId\:dtNBEttEGVvkhNkwNypLM).
2. Toggle between canvases in the same space (chat thread).
3. See the total number of files and size of the workspace.
4. Undo changes to the canvas.
5. Redo changes to the canvas.
6. Copy the canvas content to your clipboard.
7. Download the canvas content. See [Available download formats](docId:1_VDSKJ_RG0FEQe0MCTv1).
8. [Collaborate with Mark in canvas](docId\:x7LXyOYrPrpVn6CFuiHUh) to modify the CSV.

### `application/vnd.ms-powerpoint`

PowerPoint canvases display a preview of the slide deck similar to the following:

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/ICepnjpWoOrV9nIoeN94C_app-vnd.png)

The numbered annotations correspond to the following controls:

1. Close the canvas and return to [Mark chat](docId\:dtNBEttEGVvkhNkwNypLM).
2. Toggle between canvases in the same space (chat thread).
3. See the total number of files and size of the workspace.
4. Undo changes to the canvas.
5. Redo changes to the canvas.
6. Download the PowerPoint. See [Available download formats](docId:1_VDSKJ_RG0FEQe0MCTv1).
7. Scroll within the canvas to display the slide navigation arrows. Click **Next slide** or **Previous slide** to move between slides. The arrows hide after a short pause until you scroll again.
8. [Collaborate with Mark in canvas](docId\:x7LXyOYrPrpVn6CFuiHUh) to modify the code.

## Common use cases

The versatility of a canvas lets you use it for a wide range of applications. Use a canvas for iterative tasks that require multiple versions and collaborative feedback. For example, consider the following common use cases:

- **Drafting and editing documents** – Create marketing briefs, blog posts, articles, internal communications, or project plans.
- **Developing web components** – Build and iterate on HTML snippets, React components, or Next.js pages for web development.
- **Designing presentations** – Work on PowerPoint files, using Agent Platform for content suggestions and structural improvements.
- **Prototyping designs** – Rapidly prototype UI elements or page layouts, getting immediate feedback and revisions from Agent Platform.
- **Brainstorm collaboratively** – Use the shared space for ideation, note-taking, and outlining projects with team members and AI assistance.
- **Managing code snippets** – Store, share, and refine reusable code blocks or scripts.

## Request types

Mark uses the `create_canvas` tool to [create a canvas](docId\:x7LXyOYrPrpVn6CFuiHUh). You can use this tool in Mark chat implicitly or explicitly.

- **Implicit request** – When your prompt clearly indicates a need to create a digital asset that you can edit or build upon, Mark automatically uses the `create_canvas` tool. Mark often infers this from keywords such as *make*, *create*, *write*, *generate*, or *draft* combined with a format type like *HTML page*, *document*, or *React component*.
  - **Examples**
    - *Create a new Markdown document for my marketing brief.*
    - *Write a React component for a hero section.*
    - *Make an HTML page with a simple contact form.*
    - *Can you create a Next.js application for a product listing page?*
    - *Draft me full articles with these sections, based on the content in the link I provided.*
- **Explicit request** – When your prompt outright tells Mark to use a canvas by including phrases like *in a canvas*, *using canvas*, or *as a canvas*. Use explicit requests when your prompt is ambiguous or when you want the collaborative editing environment.
  - **Examples**
    - *Create a new Markdown document for my marketing brief in a canvas.*
    - *Write a React component for a hero section, and put it in a canvas.*
    - *Make an HTML page with a simple contact form using the canvas tool.*
    - *Can you create a Next.js application for a product listing page as a canvas?*
    - *I need a canvas to draft a new blog post.*
    - *Start a new canvas for my project plan.*
- **Direct action** – Click **Edit in canvas** after sending a prompt to Agent Platform. Mark creates a canvas for collaborative editing. This method lets you convert existing content into a canvas automatically.

See [create a canvas](docId\:x7LXyOYrPrpVn6CFuiHUh) for step-by-step instructions.

## Best practices

To make the most of canvas and ensure a smooth workflow, consider the following best practices:

- **Be specific with prompts** – When prompting Mark, ensure you provide clear and detailed instructions. The more specific your prompt, the better Mark can understand your intent and deliver accurate results.
- **Use explicit canvas requests** – For tasks where you definitely want to use the collaborative editing environment, explicitly include phrases like *in a canvas* or *as a canvas* in your initial prompt. See [Request types](docId:1_VDSKJ_RG0FEQe0MCTv1).
- **Use descriptive naming** – Because Mark automatically infers the canvas name from your prompt, write requests that suggest clear, concise names.
  - For example, instead of *Make a form*, try *Make an HTML page for a customer feedback form.*
- **Review version history regularly** – Use canvas version control to track changes across iterations and revert when needed.
- **Collaborate actively** – Use the real-time collaboration features. Communicate inside the canvas or the adjacent chat panel to streamline feedback and approvals.
- **Understand MIME types** – Understand the different supported MIME types and their implications. Choose the appropriate format for your digital asset to ensure optimal editing and rendering. See [Supported formats](docId:1_VDSKJ_RG0FEQe0MCTv1).
- **Iterate with Mark** – Do not expect a perfect result on the first try. Use Agent Platform as an iterative partner, refining your requests and building upon previous outputs to achieve your desired outcome.
- **Keep it modular** – For complex applications or extensive documentation, break the work into smaller canvases. Modular canvases improve organization and collaboration.

## Next steps

For step-by-step instructions, see [Manage canvases](docId\:x7LXyOYrPrpVn6CFuiHUh).

:::hint{type="info"}
**Note**

If you use Opti ID, administrators can turn off generative AI in the Opti ID Admin Center. See [Turn generative AI off across Optimizely applications](docId\:X5U0kKD2azV5cIdNqwGNj).
:::