Demos · running on your machine · mocanvas 4.11.2
Every one is the real library running in your browser, and every one shows its own source. The agent demos come first because that is the argument: one editor, driven by a person and by a model through the same API.
Agents
Type anything and a real model answers by calling the editor — createShapes, arrows, labels — with no separate agent API underneath. This is the only demo on the site that costs money to run.
Live model · real Editor calls
OpenThe homepage recording at full size: five agents were each given one band of this library's architecture and asked for boxes and arrows. Replayed call by call.
Recorded run · 27 boxes, 26 arrows
OpenA scripted sequence of Editor calls with the transcript beside it. No model — the point is the surface, and that the last step reads the document back.
Agent surface · scripted plan
OpenBuild a page of shapes with no canvas, no DOM and no window, then print the document as JSON. The same records open in the editor unchanged.
createStore · no DOM
OpenCanvas
Put 100, 1,000 or 10,000 shapes on the page and watch shape count, insert time and frame time. Measured on your machine, not quoted from ours.
Performance · WebGL2 · your GPU
OpenOpen it twice and draw in one. Record diffs travel over a BroadcastChannel, with presence and cursors, so the whole thing runs without a server.
Sync · presence · no backend
OpenShapes and tools
A counter shape with a DOM body and its own props. Thirty lines: a ShapeUtil with geometry, a component, and an indicator.
ShapeUtil · DOM body
OpenA stamp tool: click to place, drag to size. A StateNode with two states, registered like any built-in tool and given a toolbar button.
StateNode · toolbar slot
OpenInterface
Every panel is a slot. Here the toolbar and the style panel are replaced with your own, and the rest of the editor does not notice.
components · one slot at a time
OpenData
PNG, SVG or the clipboard, for the selection or the whole page. The SVG is the same renderer the canvas uses, not a screenshot.
exportToBlob · getSvgString
Openmocanvas is built by Symbio. Free for non-commercial, non-profit and development use; commercial use needs an agreement. Not affiliated with or endorsed by tldraw.