OpenClaw Canvas Guide — Build and Display Rich UI in Agent

Canvas is one of OpenClaw's most visually impactful features — it lets your agent render rich HTML interfaces directly in the agent session UI. Instead of text responses, your agent can show you a formatted dashboard, an interactive chart, a data table, or any custom HTML layout.

What Canvas Is For

Use Canvas when text isn't the right medium for the information:

• Data dashboards with charts and metrics
• Formatted reports with tables and sections
• Interactive tools (forms, calculators, decision trees)
• Visual comparisons (side-by-side layouts)
• HTML-formatted documents for printing or export

Basic Canvas Actions

# Present an HTML page in the Canvas panel
canvas({ action: "present", url: "data:text/html,..." })

# Navigate Canvas to a URL
canvas({ action: "navigate", url: "https://your-dashboard.com" })

# Take a snapshot of current Canvas state
canvas({ action: "snapshot" })

# Evaluate JavaScript in Canvas
canvas({ action: "eval", javaScript: "document.title" })

Requesting Visual Output

For end users, you trigger canvas-based responses by asking for visual output:

"Show me our weekly metrics as a visual dashboard with charts"
"Display the competitor comparison as a formatted HTML table"
"Create an interactive checklist for our deployment process"

Presenting a Custom Dashboard

A well-configured agent can generate HTML dashboards from your data. Example:

"Pull last week's data from Google Sheets. Display it as a dashboard with:
- Headline metric numbers at the top
- A chart showing daily trend
- A table of breakdown by category
- Color-coded status indicators (green/yellow/red based on thresholds)"

Canvas with Live Data

Canvas can display live content from URLs. If you have an internal dashboard or tool hosted on a local port, your agent can surface it in Canvas:

canvas({ action: "navigate", url: "http://localhost:3000/dashboard" })

This is powerful for development workflows — your agent can run a local tool, display its UI in Canvas, interact with it programmatically, and report results back to you.

Canvas vs. Browser Tool

Canvas is for controlled, agent-rendered content within the session UI. The browser tool is for navigating and interacting with external websites. Use Canvas for agent-generated interfaces; use browser for external web interaction.

Building Skill-Based Canvas Interfaces

If you're building skills, Canvas enables rich output patterns. Your SKILL.md can include instructions for when to use Canvas vs. text responses, ensuring visually complex information always renders in the right format for the user.

Want the full setup guide? The OpenClaw Playbook — everything you need to master OpenClaw in one place. Just $9.99.