AI Canvas: Building a Live Document Editor

An AI document editor is a workspace that sits beside the conversation and holds what the model produced, so a long document or a working component is something you edit in place instead of scrolling back through chat to find it.

Chat is a terrible container for anything longer than a few paragraphs. You lose it, you cannot edit it without asking for a rewrite, and every revision buries the previous one further up the thread.

ChatFuse canvas shipped in 10 phases. Here is what each one had to solve.

What decides that something opens in a ChatFuse canvas?

The model marks it. Output wrapped in an artifact block gets routed to the canvas by the orchestrator rather than rendered inline as chat text.

That routing decision is explicit rather than guessed from length or content. A guess based on size gets it wrong constantly, because a 40 line answer about architecture belongs in the thread and an 8 line SVG belongs in the canvas. Marking it at generation time puts the decision with the thing that knows the intent.

There is also a file aware trigger. Attach a document and ask for changes, and the canvas opens without you asking for it, because editing an attached file is unambiguous.

What can the ChatFuse AI document editor render live?

Six formats render as live previews rather than as code you have to copy somewhere: HTML, React, SVG, Mermaid, LaTeX, and CSV.

That list is deliberate. Each one is something people ask an AI to produce and then need to look at rather than read. A Mermaid diagram as text is useless. A React component you cannot see is a code review, not a result.

Previews run in a sandbox with a console panel attached, so when a component throws you get the error where you are working instead of a blank frame.

Can I edit the document, or only regenerate it?

You edit it directly. Non code ChatFuse canvases use rich text editing rather than a plain textarea, so the document behaves like a document.

This was phase 2 and it changed how the feature gets used. When your only option is asking for a rewrite, every small fix costs a full regeneration and you lose everything else you liked. Being able to fix a sentence yourself means the model produces a draft rather than a final answer, which is the right division of labour.

What are ChatFuse quick actions and why do they need scope?

Quick actions apply a transform to part of the document and patch the result back in, rather than regenerating the whole thing.

Scope is the hard part. "Make this shorter" has to know what "this" is, apply the change to that region, and leave everything else byte for byte identical. A transform that regenerates the full document to change one paragraph will reword three others on the way past, and you will not notice until later.

The actions are also content aware. A prose canvas offers different actions from a code canvas, because "add error handling" is meaningless in an essay.

Why does canvas have its own endpoint instead of going through chat?

Because a transform is not a conversation, and routing it through the full orchestrator chat flow adds work that a targeted edit does not need.

Phase 6 added a direct transform endpoint that bypasses the chat pipeline. Shortening a paragraph does not need classification, routing, or memory injection. It needs the text, the instruction, and a model. Skipping the rest is most of why quick actions feel immediate rather than like sending another message.

Can code in a ChatFuse canvas actually run?

Yes, in the browser, for Python, JavaScript, and TypeScript.

Python runs through Pyodide in a worker, so the page stays responsive while it executes and nothing touches a server. For a user this is the difference between reading generated code and knowing whether it works. For us it removes a whole category of infrastructure, because there is no sandboxed execution service to run, secure, or bill for.

The limits are real and worth stating. Browser execution has no filesystem, no network by default, and a limited package set. It handles the cases people actually try in a chat, which is data manipulation and small scripts, and it will not run your build.

What happens to a canvas when I close the chat?

It is saved, with compaction on the auto save path so a long editing session does not accumulate a revision for every keystroke.

Auto save that writes on every change looks fine in testing and produces thousands of near identical rows in production. Compaction collapses those into meaningful states.

Can I share what I made?

Yes. Publishing produces a public view of the canvas, and anyone with the link can remix it into their own copy.

Remix rather than view only was the deliberate choice, because a generated artifact is usually a starting point. Someone who finds a useful component wants to change it, and forcing them to copy and paste it back into their own chat wastes the work.

Which formats are worth rendering, and which are not?

The test is whether looking at the output tells you something reading it would not.

A Mermaid diagram passes that test completely. Nobody can read graph syntax and know whether the boxes overlap. LaTeX passes for the same reason: an equation is either right or visibly wrong, and the source tells you neither. CSV passes because column alignment and type problems are invisible until the data is in a grid.

Plain markdown fails the test, which is why it renders in the thread rather than opening a canvas. So does a shell script, because running it is the only useful preview and running it is not something we will do on your behalf.

That leaves a shorter list than most people expect, and keeping it short is deliberate. Every format in a preview surface is a renderer to maintain, a sandbox to secure, and a failure mode to explain. Six earn their place.

Is a canvas the same as an artifact?

Not quite. The artifact is the marked output the model produced. The canvas is the surface that renders and edits it. One artifact opens in one canvas, and the distinction matters because the artifact is content while the canvas is a workspace with history, execution, and sharing attached.

Does the canvas keep working when the model is wrong?

That is most of the point. The model produces a draft, the preview shows you it is broken, the console tells you why, and you fix it yourself or ask for a scoped change.

A generated component that does not compile is a normal outcome rather than a failure state. What matters is whether the loop from wrong to right is short, and having the preview, the console, and the editor in one place is what makes it short.

Where does canvas fit with the rest of ChatFuse?

The model that writes into a canvas is chosen the same way every other request is, by task, which we covered in AI prompt classification. A coding artifact lands on a model strong at code without you selecting anything.

How do I try the ChatFuse AI document editor?

Ask for something worth keeping, like a component, a diagram, or a document rather than an answer, and it opens in a canvas. Start free, or see the plans on the pricing page.