Docs · get started · mocanvas 4.11.2

Get started

Three steps: install it, put a canvas on the page, then drive it from code. The third one works with no page at all, which is the part worth reading if you are pointing an agent at it.

1 · Install

npm install @mocanvas/mocanvas react react-dom

react and react-dom are peer dependencies (18 or newer). Every package is ESM only — there is no CommonJS build, because the engine locates its .wasm asset with import.meta.url.

2 · A canvas on the page

import { Mocanvas } from "@mocanvas/mocanvas"
import "@mocanvas/mocanvas/mocanvas.css"

export function App() {
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      <Mocanvas />
    </div>
  )
}

3 · Drive it from code

import { Mocanvas, type Editor } from "@mocanvas/mocanvas"

export function App({ onReady }: { onReady(editor: Editor): void }) {
  return <Mocanvas onMount={onReady} />
}

// Later, from anywhere — an agent, a button, a keyboard handler:
editor.createShapes([{ type: "geo", x: 0, y: 0, props: { geo: "ellipse" } }])
editor.select(...editor.getCurrentPageShapeIds())
editor.zoomToSelection()

onMount hands you the Editor. That object is the whole API — the toolbar calls the same methods, so anything you can script a user can undo.

4 · Without a browser

A store is a document, and a document does not need a screen. This runs in Node:

import { createStore } from "@mocanvas/editor"
import { defaultShapeUtils, createShapeId } from "@mocanvas/mocanvas"

// A real document: pages, shapes, bindings, assets. No browser, no DOM.
const store = createStore({ shapeUtils: defaultShapeUtils })

store.put([
  {
    id: createShapeId(),
    typeName: "shape",
    type: "geo",
    x: 0, y: 0, rotation: 0, index: "a1", parentId: "page:page",
    isLocked: false, opacity: 1, meta: {},
    props: { geo: "rectangle", w: 100, h: 100, /* …the rest of the geo props */ },
  },
])

store.allRecords().map((r) => r.typeName)
// → ["document", "page", "shape"]

Records are validated as they go in, so a malformed shape throws at put rather than mounting and rendering. Pass seed: false if you are building the document structure yourself and do not want the starter page.