Docs · examples · 10 of them · mocanvas 4.11.2
Every one of these runs in your browser, and every one shows the file it is running from. Nothing here is a snippet somebody transcribed: the Code tab reads the component off disk at build time, so it cannot drift from the demo above it.
Before any of them
Install it.
npm install @mocanvas/mocanvas
# React 19 is a peer dependency
npm install react react-domPut a canvas on the page. That is the whole of it — tools, toolbar, undo, panning and the WebAssembly engine are already in there.
import { Mocanvas } from "@mocanvas/mocanvas"
import "@mocanvas/mocanvas/mocanvas.css"
export function App() {
// It fills its container, so give the container a size.
return (
<div style={{ position: "fixed", inset: 0 }}>
<Mocanvas />
</div>
)
}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
Run itThe 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
Run itA 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
Run itBuild 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
Run itCanvas
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
Run itOpen 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
Run itShapes 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
Run itA 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
Run itInterface
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
Run itData
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
Run itLooking for a name rather than a recipe? The reference has every export with its signature and the documentation written next to it.
mocanvas 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.