Bogen documentation
Bogen is an open source design canvas where every design is real HTML and CSS. You draw on it in the browser, and your own coding agent draws on it too, through Bogen's MCP server. Claude Code and Codex run on the plan you already pay for. There is no account, no subscription and no usage cap.
These guides describe version 0.1.0, which is not released yet. Where a feature works only in part, the page says what is missing.
How the pieces fit
| Piece | What it does |
|---|---|
bogen | One command-line program. It runs the server, sets up your agents and does imports and exports from the terminal. |
| The server | Runs on your machine at http://127.0.0.1:29990. It keeps your files in a data folder, serves the editor, and renders screenshots and exports in a headless Chromium browser. |
| The editor | The canvas, in your browser. Several windows, people and agents can have one file open at the same time. |
| The MCP server | 129 tools, plus resources and prompts, at bogen mcp (stdio) or /mcp (HTTP). Your agent uses them with no editor open. |
| Device sync | Optional. Two of your own machines keep the same files over Tailscale. |
| Omarchy integration | Optional. Bar widget, theme following, launcher, keys and a user service. |
A design is a tree of layers, and each layer is an HTML element with CSS. What you see on the canvas, what your agent sees in a screenshot and what you export come from the same rendering.
Where to start
| I want to... | Read |
|---|---|
| Install Bogen and make a first file | Getting started |
| Connect Claude Code, Codex or another MCP client | Agents |
| Learn the canvas: frames, layout, text, vectors, tokens, preview, motion | Canvas |
Use ::before, ::after, container and media queries, hover and other states | Pseudo-elements and conditions |
| Reuse things: components, variants, slots, shared libraries, code components | Components |
| Set up a brand, and check designs against it | Brands |
| Copy a live website onto the canvas, or import from Figma | Snapshot and import |
| Export images, PDF, video, SVG or code | Export and code |
| See who changed what, go back, branch, or keep a design in Git | History |
| Keep my files on two machines | Devices |
| Use Bogen on Omarchy | Omarchy |
| Fix something | Troubleshooting |
| Get short answers: cost, which agents, Mac and Windows, Figma | FAQ |
| See what leaves my machine | Privacy |
| Look up a command, a tool or an HTTP route | Reference |
| See what is in this version | Changelog |
Bogen is MIT licensed. It is an independent project and is not affiliated with Figma or Paper.