DesignJS v0.1.0 — an open-source MCP design canvas that gives AI coding agents eyes.

HTML/CSS-native. Local-first. Git-native. MIT-licensed. Built on GrapesJS + the Model Context Protocol.

Install

```bash

In one terminal: start the canvas

npm create designjs@latest my-app
cd my-app && claude # or cursor . / code .
```

🎨 Multi-artboard canvas — Tailwind v4 in the iframe, pan/zoom/minimap, snap-aligned artboard positioning, full ten-section semantic inspector (Layer · Measures · Auto Layout · Layout Item · Fill · Stroke · Shadow · Typography · Exports · Effects).
🤖 20+ MCP tools across inspect / component mutation / artboards / variables / selection — any stdio-compatible agent can read and write the canvas.
💾 Git-diffable `.designjs.json` — human-readable JSON with Cmd+S save, 30s autosave, sidecar design tokens.
🚀 Three npm packages live: `@designjs/bridge`, `@designjs/mcp-server`, `create-designjs`.

Multi-frame regression cleanup — four silent single-frame assumptions under GrapesJS v2's multi-frame layout are all fixed (Variables `:root` propagation, `add_components` default routing, `component.view.el` selection reads, un-scoped `get_screenshot`).
Topbar z-order fix — artboard title-bar buttons no longer intercept clicks on Topbar controls.
E2E: 156 passed / 0 failed / 1 flaky.
Scaffolder troubleshooting docs covering the real failure modes (wrong cwd, trust dialog, cold-install lag, bridge disconnected, competing design MCPs).

One `.designjs.json` per canvas session, scoped to the Vite dev root — not yet per user-project directory. A Paper-style file switcher + per-project discovery via `get_project_context` is tracked for v0.2. Today, run one `pnpm dev` per project directory you're designing in.
`@designjs/cli` (`designjs init` auto-detect) stays unpublished in v0.1 — use `create-designjs` for new projects and write `.mcp.json` by hand for existing ones.

Quickstart, tool reference, and integration guides: https://opencanvas.mintlify.app/
Full changelog: CHANGELOG.md