# DesignJS

## Docs

- [DesignJS: Visual AI Design Canvas via MCP](https://opencanvas.mintlify.app/introduction.md): 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.
- [Get started with DesignJS](https://opencanvas.mintlify.app/quickstart.md): Clone the repo, install dependencies, and have the HTML/CSS canvas running locally in under five minutes — no cloud account required.
- [Connect an AI Agent to DesignJS](https://opencanvas.mintlify.app/connect-agent.md): Register the DesignJS MCP server with Claude Code, Cursor, or VS Code — via the published create-designjs scaffolder or a hand-written three-line .mcp.json.
- [What Is the DesignJS Canvas?](https://opencanvas.mintlify.app/concepts/canvas.md): Understand how DesignJS renders real HTML/CSS in a GrapesJS iframe, how components are structured, and how human and agent edits stay in sync.
- [Model Context Protocol in DesignJS](https://opencanvas.mintlify.app/concepts/mcp.md): Learn how DesignJS implements MCP — the stdio server, the WebSocket bridge, and what bidirectional agent access to the canvas means in practice.
- [The .designjs.json File Format](https://opencanvas.mintlify.app/concepts/file-format.md): How DesignJS saves your design locally, what the JSON file contains, and why it's designed to be committed to your git repository.
- [DesignJS Editor Interface Overview](https://opencanvas.mintlify.app/editor/interface.md): A tour of the three-pane DesignJS editor: the left panel, GrapesJS canvas, right panel, topbar, zoom controls, and theme switcher.
- [Using the Block Palette in DesignJS](https://opencanvas.mintlify.app/editor/blocks.md): How to use DesignJS's 25-block palette — Layout, Typography, Form, and Media categories — to insert real HTML/CSS into your canvas.
- [Working with Artboards in DesignJS](https://opencanvas.mintlify.app/editor/artboards.md): How to create, name, navigate, and manage artboards in DesignJS — including preset sizes, pan/zoom, and scoping MCP tool calls by artboard ID.
- [DesignJS Keyboard Shortcuts](https://opencanvas.mintlify.app/editor/keyboard-shortcuts.md): Complete keyboard shortcut reference for DesignJS — saving, canvas navigation, zoom, GrapesJS editing commands, and the Insert Rail tool keys.
- [Connect DesignJS to Claude Code](https://opencanvas.mintlify.app/integrations/claude-code.md): Two ways to register DesignJS as an MCP server in Claude Code — automatic via designjs init, or manual via claude mcp add — plus verification steps.
- [Connect DesignJS to Cursor](https://opencanvas.mintlify.app/integrations/cursor.md): Register DesignJS as an MCP server in Cursor using designjs init auto-detection or a manual .cursor/mcp.json edit, then verify in Cursor's MCP panel.
- [Connect DesignJS to VS Code Copilot](https://opencanvas.mintlify.app/integrations/vscode.md): Add DesignJS as an MCP server in VS Code Copilot Chat — auto-configure with designjs init or write .vscode/mcp.json manually, then verify tools appear.
- [Design UI with an AI Agent in DesignJS](https://opencanvas.mintlify.app/guides/design-with-agent.md): Walk through a complete AI-assisted design session: start the canvas, connect your agent, and iterate on a hero section from prompt to polished UI.
- [Export Canvas Designs to React Components](https://opencanvas.mintlify.app/guides/export-to-react.md): Use the get_jsx tool to turn any canvas element into a production-ready .tsx file, with Tailwind className output or a JSX inline style object.
- [Manage Design Tokens with CSS Variables](https://opencanvas.mintlify.app/guides/css-variables.md): Read and write CSS custom properties on the canvas iframe :root to maintain a consistent color, spacing, and typography scale across every component.
- [DesignJS MCP Tools Overview](https://opencanvas.mintlify.app/mcp/overview.md): Reference for the 20+ DesignJS MCP tools across inspect, component mutation, artboards, variables, and selection — that let AI agents inspect and edit your live HTML/CSS canvas over stdio.
- [ping: Canvas Health Check](https://opencanvas.mintlify.app/mcp/ping.md): Use ping to confirm your agent's MCP connection to DesignJS is live. Returns pong: true and a timestamp when the canvas bridge is connected.
- [get_tree: Read Component Tree](https://opencanvas.mintlify.app/mcp/get-tree.md): Fetch the full recursive JSON component tree from the canvas, with optional depth limiting and per-artboard scoping for large documents.
- [get_html: Export Canvas HTML](https://opencanvas.mintlify.app/mcp/get-html.md): Export clean, production-ready HTML from the entire canvas or any component subtree — ready to paste into a React component or serve directly.
- [get_css: Export Canvas CSS](https://opencanvas.mintlify.app/mcp/get-css.md): Export the full CSS stylesheet from the canvas, or scope it to a single component's styles, for use alongside exported HTML or JSX.
- [get_screenshot: Capture Canvas Screenshot](https://opencanvas.mintlify.app/mcp/get-screenshot.md): Capture the live DesignJS iframe as a base64-encoded PNG or JPEG, optionally at 2x resolution for high-fidelity visual inspection by your agent.
- [get_selection: Read Selected Components](https://opencanvas.mintlify.app/mcp/get-selection.md): Retrieve the component IDs of whatever the user has currently selected in the DesignJS editor, enabling context-aware agent actions.
- [get_jsx: Convert Canvas to JSX](https://opencanvas.mintlify.app/mcp/get-jsx.md): Convert DesignJS HTML to a JSX component string using Tailwind class names or inline style objects, scoped to the full canvas or a specific component.
- [get_variables: Read CSS Custom Properties](https://opencanvas.mintlify.app/mcp/get-variables.md): Read all CSS custom properties defined on the DesignJS iframe :root — your design token values including colors, spacing, and typography scales.
- [list_artboards: List Canvas Artboards](https://opencanvas.mintlify.app/mcp/list-artboards.md): Retrieve all artboards on the DesignJS canvas with their IDs, names, world coordinates, and dimensions for use with scoped tool calls.
- [find_placement: Suggest Artboard Position](https://opencanvas.mintlify.app/mcp/find-placement.md): Get a non-overlapping canvas world coordinate for a new artboard of a given size — placed automatically to the right of existing frames with an 80px gap.
- [add_components: Insert HTML onto Canvas](https://opencanvas.mintlify.app/mcp/add-components.md): Insert raw HTML — including Tailwind classes — directly onto the DesignJS canvas and receive the new component IDs for immediate follow-up operations.
- [update_styles: Set CSS on a Component](https://opencanvas.mintlify.app/mcp/update-styles.md): Apply or update CSS properties on a specific canvas component by ID — including both standard CSS properties and Tailwind utility strings via the class key.
- [delete_nodes: Remove Canvas Components](https://opencanvas.mintlify.app/mcp/delete-nodes.md): Remove one or more components and all of their children from the DesignJS canvas by component ID, with a count of how many nodes were deleted.
- [set_variables: Write CSS Custom Properties](https://opencanvas.mintlify.app/mcp/set-variables.md): Write CSS custom properties to the DesignJS iframe :root to update design tokens — changes are merged, persisted to .designjs.json, and applied on reload.
- [create_artboard: Add a Canvas Artboard](https://opencanvas.mintlify.app/mcp/create-artboard.md): Create a named artboard frame on the DesignJS spatial canvas at a specified size and position, returning the new artboard's ID and coordinates.