Canvas overview

Canvas provides a dynamic and collaborative environment where you and Optimizely Opal build, customize, and deliver interactive digital assets, applications, and complex content. This workspace lets you create and manage digital assets in real-time. 

A canvas (also called an element) is a building block for your digital experiences. A space is the entire persistent, version-controlled workspace containing one or more canvases. One space exists per chat thread.

Supported formats

Opal supports rendering and editing the following MIME types in canvas:

• 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

You can 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

Canvas provides a responsive UI where functionality changes dynamically based on the current digital asset's MIME type. This lets you work with Opal in an intuitive editing experience, offering controls for the specific digital asset at hand. See the Supported formats section for a list of available MIME types. 

text/markdown

Markdown-related canvases display the Markdown in a formatted text format similar to the following:

1. Close the canvas and return to Opal Chat.
2. Switch between canvases in the same space (chat thread).
3. Undo changes in the canvas.
4. Redo changes in the canvas.
5. Copy the raw Markdown.
6. Download the canvas content. See Available download formats.
7. Collaborate with Opal in canvas 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: 

1. Close the canvas and return to Opal Chat.
2. Switch to code mode.
3. Switch to rich preview mode.
4. Toggle between canvases in the same space (chat thread).
5. Undo changes to the canvas.
6. Redo changes to the canvas.
7. Copy the code to your clipboard.
8. Download the canvas content. See Available download formats.
9. Collaborate with Opal in canvas to modify the code.

text/csv

1. Close the canvas and return to Opal Chat.
2. Toggle between canvases in the same space (chat thread).
3. Undo changes to the canvas.
4. Redo changes to the canvas.
5. Copy the canvas content to your clipboard.
6. Download the canvas content. See Available download formats.
7. Collaborate with Opal in canvas to modify the code.

application/vnd.ms-powerpoint 

PowerPoint canvases display a preview of the PowerPoint file and displays similar to the following: 

1. Close the canvas and return to Opal Chat.
2. Toggle between canvases in the same space (chat thread).
3. Undo changes to the canvas.
4. Redo changes to the canvas.
5. Download the PowerPoint. See Available download formats.
6. Jump to the next PowerPoint slide.
7. Collaborate with Opal in canvas 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 Opal for content suggestions and structural improvements.
• Iterative design and prototyping – Rapidly prototype UI elements or page layouts, getting immediate feedback and revisions from Opal.
• Collaborative brainstorming – 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

Opal uses the create_canvas tool to create a canvas. You can use this tool in Opal 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, Opal automatically uses the create_canvas tool. Opal 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 Opal to use a canvas by including phrases like in a canvas, using canvas, or as a canvas. This is useful if your request is ambiguous or if you specifically 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 – When you click the Edit in canvas button after sending a prompt to Opal, it creates a canvas for collaborative editing. This method lets you convert existing content into a canvas automatically.

See create a canvas 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 Opal, ensure you provide clear and detailed instructions. The more specific your prompt, the better Opal 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.
• Use descriptive naming – Since Opal automatically infers the canvas name from your prompt, formulate your requests to suggest clear and concise names.
  • For example, instead of Make a form, try Make an HTML page for a customer feedback form.
• Regularly review version history – Use the version control system. Regularly review previous versions to track changes, understand iterations, and revert if necessary.
• Collaborate actively – Utilize the real-time collaboration features by communicating directly within 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.
• Iterate with Opal – Do not anticipate a perfect result on the first try. Use Opal 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, consider breaking down your work into smaller, manageable canvases or elements. This can improve organization and collaboration.

Next steps