Canvas: a live preview pane for everything a model writes

Most chat tools hand you a block of code and wish you luck. You copy it into an editor, save a file, open a browser, see it’s slightly wrong, go back to the chat, paste the fix, and repeat. Canvas removes every step in that loop except the two that matter: ask, and look.

What Canvas is

When a model’s answer contains something renderable, a preview pane opens beside the conversation and shows it live. HTML renders as a page. SVG renders as the image. A Mermaid block becomes the diagram. Markdown becomes formatted text. You see the result, not the source, the moment the model finishes writing it.

The chat stays on the left, the rendered artifact on the right. You keep talking — “make the header smaller,” “use a darker background,” “add a node for the retry path” — and the preview updates as the model revises. No copy, no paste, no second app.

Where it earns its keep

A few things it turns from a chore into a conversation:

• Landing sections and email HTML. Describe a hero section, watch it render, nudge the spacing and color in plain language until it looks right. You’re iterating on the thing itself, not on a description of the thing.
• Diagrams. Ask for a flowchart of an auth handshake or a sequence diagram of a request. Mermaid renders it instantly, and “swap these two steps” is one sentence instead of a manual redraw.
• Charts and SVG. Quick data sketches, icons, simple illustrations. You see them at full size and refine by talking.
• Long-form writing. Markdown renders with real headings and structure, so you’re reading the document the way a reader will, not squinting at raw asterisks.

It works with the model picker

Canvas isn’t tied to one provider. Draft a layout with a fast model, then branch the tricky part to a stronger one — the preview follows the winning branch. Because the artifact lives next to the thread rather than inside one model’s sandbox, switching models doesn’t cost you the work in progress. The render just re-runs against the new answer.

That’s the same principle the whole studio is built on: the useful thing (here, a live artifact) belongs to your conversation, not to a single model’s walled feature set.

Iterate in language, ship the source

When the preview looks right, the source is right there to take with you — copy the HTML, export the SVG, grab the Mermaid definition. Canvas isn’t a black box that only it can read; it’s a faster way to reach source you fully own. You did the iterating in plain language and got production-ready output at the end.

A small feature with an outsized effect

Canvas doesn’t add a capability the models didn’t have — they could always write HTML. What it removes is the gap between written and seen. Closing that gap changes how you work: you stop treating the model’s output as a draft to evaluate later and start treating it as a thing you’re shaping right now, in real time, in the same window. That turns out to be most of what makes a tool feel fast.