> ## Documentation Index
> Fetch the complete documentation index at: https://opencanvas.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://modelcontextprotocol.io) (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.

<Note>
  DesignJS is in active v0.1 development. The canvas, MCP server, and WebSocket bridge are working end-to-end. See the [roadmap](https://github.com/rubychilds/DesignJS#roadmap) for what's coming next.
</Note>

## Where to go next

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Clone the repo, run `pnpm dev`, and open the canvas in under five minutes.
  </Card>

  <Card title="Connect an AI agent" icon="plug" href="/connect-agent">
    Wire Claude Code, Cursor, or VS Code to your canvas with one command.
  </Card>
</CardGroup>