Canvas

Canvas is a splitscreen surface that opens next to the chat whenever an agent produces a sizable artifact — HTML, a React component, a Python script, a Markdown document, an SVG diagram. Instead of pasting code into chat, the agent writes it into Canvas and the right pane shows a live preview you can edit.

It's the "artifact" concept but integrated into Sophon: the canvas is scoped to a chat session, the agent keeps editing in place across turns, and you can fork, export, or promote the result.

When Canvas opens

Canvas opens automatically when the agent generates:

• Runnable web content — HTML, React/Vue single-file components, inline SVG
• Code files — Python, TypeScript, C#, etc. that are more than a snippet
• Long-form documents — Markdown documents, slide outlines, structured plans
• Diagrams — Mermaid, PlantUML, DOT, or SVG

The agent decides based on the output type and size. You can also nudge it: "open this in Canvas."

Manually open Canvas at /canvas?session=<id> or from the chat header: Split view → Canvas.

What you see

The screen splits vertically (left chat, right canvas) or toggleable horizontal. The canvas pane has:

• Editor — Monaco editor with syntax highlighting, find/replace, multi-cursor
• Preview — live rendered output (HTML / Markdown / diagram). Toggleable.
• Tabs — if the agent produces multiple files (HTML + CSS + JS), each gets a tab.
• Actions — Copy, Download, Fork (clone to a new canvas), Close, Save to documents

Edits you make in the editor are sent back to the agent. On the next turn, the agent sees your modifications and reasons about them.

Agent-canvas protocol

Under the hood, Canvas is driven by structured artifact blocks the agent emits:

<artifact id="my-component" type="react" title="Counter">
<source file="Counter.jsx">
export default function Counter() { … }
</source>
<source file="styles.css">
.counter { … }
</source>
</artifact>

The Gateway parses these blocks, serves them to the Canvas panel over SignalR, and hands edits back to the agent as <user_edited_artifact> in the conversation.

Forking and versions

Every save creates a new revision. You can:

• Fork — branch the canvas into a new artifact, leaving the original intact
• Version history — diff between two revisions
• Revert — roll back to any prior version

Useful when the agent takes the canvas in a wrong direction — fork, tell the agent which branch to continue, and both live side-by-side.

Promoting to documents

If a canvas is worth keeping beyond the chat, Save to Documents snapshots it into the Documents library. It becomes a normal document with extractable text, indexed and referenceable by other agents.

Runnable canvases

HTML / React / Vue canvases render live with an iframe-sandboxed preview. The sandbox has no parent-window access, no outgoing network by default, and a strict CSP. You can toggle allow network for prototypes that need to fetch — at your own risk.

Python / C# canvases don't run in the browser. If you want to execute them, the agent can route through the Skills sandbox (Docker + gVisor) and stream results back into the canvas.

Use cases

• UI prototyping — "build me a pricing table with four tiers" — the agent writes the HTML/CSS, you tweak spacing in the editor, it adapts.
• Data snippets — the agent writes a data-transformation script, you see the output, iterate.
• Document drafting — long-form articles, design docs, press releases.
• Diagram authoring — the agent writes Mermaid, the preview renders the diagram, you rewire it by editing source.

From the CLI

sophon canvas list --session <id>
sophon canvas show <canvas-id>
sophon canvas export <canvas-id> --out ./artifact/

export pulls every file in the canvas to a local directory, handy for promoting a prototype out of Sophon.

Limits

• Canvas max size: 10 MB per artifact across all tabs.
• Runnable preview cap: 5 concurrent canvases per session (older ones freeze).
• Editor buffer: up to 50,000 lines — beyond that, the agent gets a truncated view in its context.

Where to go next

• Claude Code Sessions — persistent multi-file projects, a step up from ad-hoc canvases
• Documents — promote a canvas to the library
• Skills — how runnable canvases execute non-browser code