Manage canvases

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

Create a canvas

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

You can create a canvas in Opal Chat in three ways. With Implicitly and Explicitly, Opal creates the canvas as part of its response. With Directly, you convert an element Opal already produced into a canvas. The three options are:

• Implicitly – By entering a prompt where Opal 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 Opal 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 Opal that generates an element but does not automatically create a canvas or invoke an agent.

Locate the canvas Opal 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 Opal 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.

The canvas opens in a split-screen page that displays the canvas alongside Opal Chat, so you can edit the asset and prompt Opal in the same view. See Collaborate with Opal in canvas for next steps.

Collaborate with Opal in canvas

After you create a canvas, collaborate with Opal to refine and enhance the asset. Modify code, text, and other elements in the canvas while Opal 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 Opal 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 Opal's assistance

Prompt Opal 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.

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

Example: collaborate with Opal in canvas

To continue the Create a canvas example, prompt Opal to update the contact form.

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

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

Find and switch between canvases

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

Through Opal Chat

To access a previously created canvas from Opal 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.

   

3. For next steps, see Collaborate with Opal in canvas.

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

List view

Access a canvas from within a space

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

1. Open the canvas Through Opal Chat or From the Artifacts page.

2. Select a different canvas from the drop-down list.

   

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 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 and Available download formats 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 Opal 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 Opal 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.

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

Get space information

Ask Opal 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?

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