---
title: Manage canvases
slug: agent-platform/docs/manage-canvases
docTags: 
createdAt: 2026-08-12T15:37:08.000Z
---

Canvases (also known as elements) in Optimizely Agent Platform are collaborative digital spaces where you and Agent Platform co-create and refine digital assets such as documentation, code, and HTML pages. Edit content, manage version history, and get real-time Agent Platform assistance without leaving the space. For example, generate an HTML contact form with Agent Platform, then iterate on the design and copy in the canvas while Mark applies your changes in real time. For more information, see the [Canvas overview](docId:1_VDSKJ_RG0FEQe0MCTv1).

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

See [Canvas and artifacts](docId\:vf5dWxgBQb2_SIcqvYREw) for a list of available canvas tools.
:::

## Create a canvas

Mark uses the `create_canvas` tool to create an interactive canvas (also called an element). You and Mark can then edit digital assets in the canvas together.

You can create a canvas in [Mark chat](docId\:dtNBEttEGVvkhNkwNypLM) in three ways. With **Implicitly** and **Explicitly**, Mark creates the canvas as part of its response. With **Directly**, you convert an element Mark already produced into a canvas. The three options are:

- **Implicitly** – By entering a prompt where Mark infers the need for a canvas. For example, *Make an HTML page with a simple contact form*.
- **Explicitly** – By entering a prompt that specifically instructs Mark to use the canvas tool. For example, *Make an HTML page with a simple contact form using the canvas tool*.
- **Directly** – By clicking **Edit in canvas** after sending a prompt to Agent Platform that generates an element but does not automatically create a canvas or invoke an agent.

Locate the canvas Agent Platform created in its response. The canvas displays as a card with the canvas name (for example, **Contact Form**) and its MIME type (for example, **HTML**). The MIME type is the format identifier that tells Mark whether the canvas holds HTML, Markdown, React code, or another asset type. From the card, do one of the following:

- To open the canvas in preview mode, click the canvas name or **Preview**.
- To open the canvas in code mode, click **Edit code**.
- To save the canvas to your computer, click **Download** and select a file type.

::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/kkWuLYUz0qaqRnlwcrJeh_contact-form-download.png" size="100" isUploading="false" width="1618" height="1082" darkWidth="1618" darkHeight="1082" showCaption="false" indent="1"}

The canvas opens in a split-screen page that displays the canvas alongside Mark chat, so you can edit the asset and prompt Mark in the same view. See [Collaborate with Mark in canvas](docId:1_VDSKJ_RG0FEQe0MCTv1) for next steps.

::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/XLp8WKJKxA83gyUNAEQ_K_collaborate-with-opal-in-canvas.png" size="100" isUploading="false" width="1768" height="1254" darkWidth="1768" darkHeight="1254" showCaption="false" indent="1"}

## Collaborate with Mark in canvas

After you create a canvas, collaborate with Mark to refine and enhance the asset. Modify code, text, and other elements in the canvas while Mark responds in the chat panel. On the canvas page, you can do the following:

- **Edit directly** – Modify the digital asset using a rich text editor for formats like Markdown or HTML, or a code editor for application formats such as React or Next.js.
- **Receive AI assistance** – Prompt Agent Platform in the chat panel to refine, transform, or generate canvas content without leaving the editor.
- **Manage version history** – Review previous versions of the canvas and revert to an earlier version when needed.
- **Adjust properties** – Modify metadata, settings, or other properties of the canvas.

### Use Agent Platform's assistance

Prompt Agent Platform from the chat panel to help with tasks, such as the following:

- **Content generation** – *Write a paragraph about the benefits of personalization.*
- **Text refinement** – *Rewrite this section to be more concise and engaging.*
- **Summarization** – *Summarize the key points of this document.*
- **Code generation or modification** – *Add a responsive navigation bar to this HTML* or *Create a new function in this React component to handle form submission.*
- **Formatting and structure** – *Organize this markdown into a clear outline with headings.*
- **Translation** – *Translate this text into French.*

Mark updates the open canvas in place, so you do not need to copy or paste the response. Keep prompting Mark to refine the canvas until it matches what you want.

### Example: collaborate with Mark in canvas

To continue the [Create a canvas](docId\:x7LXyOYrPrpVn6CFuiHUh) example, prompt Mark to update the contact form.

**Scenario** – You want to update the button text and color on your contact form.

- **User prompt (in Mark chat)** – *Update the **Send Message** button's background color to #3AB533 and update the text to Submit.*
- **Mark's action** – Mark updates the code in the canvas to apply the new button text and color.

::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/kEUrTNRiXC7LDwi7T9Spy_opals-action.png" size="100" isUploading="false" width="1956" height="1256" darkWidth="1956" darkHeight="1256" showCaption="false" indent="1"}

## Find and switch between canvases

To review, export, or continue working on a canvas you created earlier, open it from Mark chat or the **Artifacts** page.

### Through Mark chat

To access a previously created canvas from Mark chat, complete the following steps:

1. Go to the chat thread (space) where you initially generated the canvas.
2. Click the canvas name or **Preview**.

::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/zOjZ5CGPK06yppHxJZDi-_preview.png" size="100" isUploading="false" width="1390" height="1100" darkWidth="1390" darkHeight="1100" showCaption="false" indent="1"}

3. See [Collaborate with Mark in canvas](docId\:x7LXyOYrPrpVn6CFuiHUh), for next steps.

### From the Artifacts page

To access a previously created canvas from the **Artifacts** page, complete the following steps:

1. Click **Artifacts**.
2. Click the canvas, or click **More > Open**.

**Grid view**

::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/-5ZsciKpWNQTorYbbBs19_grid-view.png" size="100" isUploading="false" width="1874" height="1106" darkWidth="1874" darkHeight="1106" showCaption="false" indent="1"}

**List view**

::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/dsEo6dCEGfp4hke2W3lO-_list-view.png" size="100" isUploading="false" width="1884" height="1116" darkWidth="1884" darkHeight="1116" showCaption="false" indent="1"}

### Access a canvas from within a space

To switch canvases within the same space, complete the following steps:

1. Open the canvas [Through Mark chat](docId\:x7LXyOYrPrpVn6CFuiHUh) or [From the Artifacts page](docId\:x7LXyOYrPrpVn6CFuiHUh).
2. Select a different canvas from the drop-down list.

::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/Zg-66cQepNifWmxqt0udp_select-a-different-canvas-from-the-drop-down-list.png" size="100" isUploading="false" width="1884" height="1180" darkWidth="1884" darkHeight="1180" showCaption="false" indent="1"}

## Share a canvas

A canvas is a type of artifact, so canvas sharing uses the same model as artifact sharing. Grant view, edit, or manage access to specific people, teams, or your entire instance.

Sharing applies at the space level. When you share one canvas, you share every artifact in the same chat thread or agent execution.

See [Share artifacts](docId\:Vdej0FGiz7QfX9rRs_4Pu) for the procedure and details on visibility and permission levels.

## Export and download canvas assets

To export a canvas, download it. The available file types depend on the canvas's MIME type. See [Supported formats](docId:1_VDSKJ_RG0FEQe0MCTv1) and [Available download formats](docId:1_VDSKJ_RG0FEQe0MCTv1) in the Canvas overview for the full list.

### Export canvas content in chat

Retrieve a canvas's content without opening the canvas.

1. Go to the chat thread (space) where you initially created the canvas.
2. Enter a prompt asking Mark for the output by name or ID, such as the following:
   - *What is in my 'Product Listing Page'?*
   - *Can you remind me what the 'Advanced Contact Form' looks like?*
   - *Show me the content of the 'Simple Contact Form'.*

## List canvases in a space

Ask Mark to list all canvases in the current space. The response includes each canvas's **Element ID**, **Name**, and **MIME type**.

To list the canvases in your current space, enter a prompt like the following:

- *List the canvases in this space.*
- *What elements are in this chat?*
- *Show me the elements in this space.*
- *What content is in this space?*
- *Can you give me an overview of the canvases here?*
- *Display all elements in the current space.*

Mark replies with a list of canvases and their metadata, similar to the following example:

::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/wdV3141JpxxOCOKla0sQ7_opal-replies-with-a-list-of-canvases-and-their-metadata-similar-to-the-following-example.png" size="100" isUploading="false" width="1296" height="804" darkWidth="1296" darkHeight="804" showCaption="false" indent="1"}

## Get space information

Ask Mark for information about the current space, including its name, unique identifier, and creation date. You can use this information to confirm you are in the right space, identify it in the navigation, track when it was created and last updated, or share its identifiers with the Optimizely Support team during troubleshooting.

To get information about the current space, enter a prompt like the following:

- *Show me information about this space.*
- *What are the details of this space?*
- *Get space information.*
- *Tell me about this space.*
- *What is the name of this space?*

Mark replies with details about the current space, similar to the following example:

::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/65tkq71bWsp9zZlfwu8qd_opal-replies-with-details-about-the-current-space-similar-to-the-following-example.png" size="100" isUploading="false" width="1314" height="1178" darkWidth="1314" darkHeight="1178" showCaption="false" indent="1"}

:::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).
:::