Canvas overview

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 Opal. A space is the version-controlled workspace that holds one or more canvases. Each chat thread has one space. 

Use Canvas to collaborate with Opal in real time on iterative work like marketing briefs, web components, and presentations.

Supported formats

Opal supports rendering and editing the following MIME types (the format identifiers that tell 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

Canvas adapts its UI to the digital asset's MIME type, so the controls match what you are editing. See the Supported formats section for a list of available MIME types. 

text/markdown

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

The numbered annotations correspond to the following controls:

1. Close the canvas and return to Opal Chat.
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.
10. 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: 

The numbered annotations correspond to the following controls:

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. 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.
10. Collaborate with Opal in canvas 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 Opal.

The numbered annotations correspond to the following controls:

1. Close the canvas and return to Opal Chat.
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.
8. Collaborate with Opal in canvas to modify the CSV.

application/vnd.ms-powerpoint 

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

The numbered annotations correspond to the following controls:

1. Close the canvas and return to Opal Chat.
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.
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 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.
• Prototyping designs – Rapidly prototype UI elements or page layouts, getting immediate feedback and revisions from Opal.
• 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

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. 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 Opal. Opal 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 – Because Opal 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.
• Iterate with Opal – Do not expect 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, break the work into smaller canvases. Modular canvases improve organization and collaboration.

Next steps