Canvas
Canvas is a browser-based display surface your agent can push content to in real time — charts, data tables, HTML previews, diagrams, or any rich visual output that doesn't fit in a chat message. Open it on your desktop or stream it to a paired mobile node.
HTML in Canvas — how interactive HTML renders inside browser surface contexts
Description
Canvas is a browser-based display surface that agents can push rich content to in real time. It solves a fundamental limitation of chat interfaces: some outputs — charts, data tables, diagrams, HTML previews — are too rich or too wide to render well inside a messaging app. Canvas gives the agent a dedicated screen for that content.
When an agent writes to Canvas, it sends an HTML/SVG payload to a local endpoint. The Canvas page (running in your browser at localhost:3000/canvas by default) receives the payload and renders it instantly — no page reload required. If you have a node paired on a mobile device, Canvas output also streams to the node's screen.
Canvas is agent-driven: you don't need to open it manually or click any buttons. Ask the agent to "show this on Canvas" and it handles the rest. Skills like diagram-maker and built-in chart tools write to Canvas automatically when their output is visual.
Content on Canvas is ephemeral by default — it updates each time the agent pushes new content. Use openclaw canvas clear to reset it, or ask the agent to replace specific sections.
What Canvas can display
Charts & graphs
Ask the agent to plot data — it renders interactive charts directly on Canvas.
HTML previews
Agents can generate and preview HTML/CSS layouts in real time.
SVG diagrams
Architecture diagrams, flowcharts, and mind maps rendered as crisp vector graphics.
Data tables
Structured data too wide for chat renders as a sortable, scrollable table.
Code previews
Syntax-highlighted code output with copy buttons — cleaner than raw chat.
Custom widgets
Skills can push any HTML/JS widget — timers, calculators, live feeds.
CLI commands
Open Canvas in the default browser
openclaw canvas openShow Canvas URL
openclaw canvas urlClear the current Canvas content
openclaw canvas clearUsing Canvas from chat
You don't need any special commands — just ask. Canvas-aware skills and the built-in diagram/chart tools push content automatically. Example prompts:
"Show me a bar chart of these sales numbers on Canvas."
"Draw an architecture diagram of this system on the Canvas."
"Preview the HTML I just wrote in Canvas."
"Put the output in a table on Canvas instead of chat."