DesignJS: Visual AI Design Canvas via MCP

Give your AI coding agent eyes. DesignJS is an open-source, local-first HTML/CSS canvas that agents read and write through the Model Context Protocol.

DesignJS is a local-first visual canvas where you design in real HTML and CSS — and your AI coding agent can see exactly what you see. Instead of describing layouts in prose and waiting for the agent to guess, you put a design on the canvas and the agent reads it, modifies it, and writes back to it through the Model Context Protocol (MCP). The design is the code: no translation layer, no format conversion, no export step.

The problem it solves

AI coding agents — Claude Code, Cursor, Codex — generate frontend UI from text prompts alone. They have no ability to see a layout, iterate spatially, or maintain visual relationships between elements. The result is a slow loop: prompt, preview, re-prompt, repeat. Design engineers routinely spend 2–4 hours a day in this cycle trying to get an agent to match their intent.

DesignJS breaks that loop by giving the agent a live, bidirectional view of your canvas. The agent can read the component tree, capture a screenshot, insert HTML, update styles, and delete nodes — all through standard MCP tool calls. Your edits and the agent’s edits converge on the same canvas in real time.

What makes DesignJS different

DesignJS combines design principles that proprietary tools have kept separate:

• HTML/CSS native — the canvas renders real HTML in a GrapesJS iframe with Tailwind v4. What you see is what ships to production.
• Local-first — your design lives in a .designjs.json file in your project directory. No cloud account, no sync service, no lock-in.
• Git-native — the save file is human-readable JSON. You can diff it, commit it, and review it in a pull request.
• MIT licensed — use it, fork it, embed it, build on it.
• Open MCP — all 20+ v0.1 tools are bidirectional. The agent can read and write the canvas, not just observe it.

How it compares

Tool	Canvas format	MCP support	License
Paper.design	HTML/CSS + GPU shaders	Bidirectional (21 tools)	Proprietary
Pencil.dev	Vector (native renderer)	Bidirectional (6 tools)	Proprietary
Figma	WASM vector engine	Read-only Dev Mode	Proprietary
Penpot	SVG	Community only	MPL-2.0
GrapesJS	HTML/CSS iframe	None	BSD-3
Onlook	Live React DOM	Own agent only	Apache-2.0
Webstudio	DOM (real CSS)	None	AGPL-3.0
DesignJS	HTML/CSS iframe (GrapesJS)	Open bidirectional	MIT

DesignJS occupies the intersection that no other open-source tool covers: HTML/CSS native canvas with open, bidirectional MCP support.

DesignJS is in active v0.1 development. The canvas, MCP server, and WebSocket bridge are working end-to-end. See the roadmap for what’s coming next.

Where to go next

Quickstart

Clone the repo, run pnpm dev, and open the canvas in under five minutes.

Connect an AI agent

Wire Claude Code, Cursor, or VS Code to your canvas with one command.