Karbonized is a visual editor for creating images of code snippets, mockups and social graphics. Arrange blocks — code, text, images, devices, shapes, QR codes and your own HTML components — on a canvas and export the result in seconds.
Free and Open Source. Made with 💙 and ReactJS.
- Agent, the design assistant — describe the image you want and Agent builds it on the canvas, with Anthropic, OpenAI, Gemini, OpenRouter or local models (Ollama, LM Studio). It follows design standards made for social media, and everything it did undoes in one step.
- MCP server — Claude Desktop, Claude Code, Cursor and other MCP clients can design with Karbonized. They start it in the background when it is not open, and exports land in a folder without any dialog.
- Templates with variables — write
{{title}},{{date}}or{{code}}in any block and fill them from the Variables panel (or let Agent do it): the next post is a new value, not a redesign. - Brand kit — your colors, fonts, logos and guidelines in one place. The pickers offer them first and Agent reads them before designing.
- Drawing tools — a vector brush that follows pen pressure, shapes drawn by dragging, node editing, an eraser, rulers and guides.
- Components and icon packs — a reworked
.kcomponentlibrary with a starter pack, and icon packs that anyone can make from a folder of SVGs. - The whole Google Fonts catalog, typography controls and text edited right on the canvas.
- New start screen with templates, quick sizes and recent projects; a new color picker, a realistic browser mockup and resizable phones.
- New interface, a command palette (Ctrl/⌘ + K), autosave with undo history, and HTML blocks edited in a real code editor.
See the full changelog.
- 🧱 Block-based canvas: code snippets, text, images, icons, shapes, freehand strokes, phone and browser mockups, QR codes and HTML blocks. Move, resize, rotate, crop and warp them, select several at once, align and distribute them, group them into layers and undo any change.
- ✏️ Drawing: a vector brush with pressure, shapes drawn by dragging, node editing, an eraser, rulers and snapping guides.
- 🎨 Backgrounds: solid colors, gradients, textures, images and dynamic backgrounds, with blur and noise.
- ✨ Agent: an assistant panel that designs with you using the model of your choice, following design standards for social media. See the Agent guide.
- 🔌 MCP server: the desktop app exposes its editing tools to MCP clients like Claude Desktop, Claude Code and Cursor. Clients start it in the background, it can live in the tray, and images are exported straight to a folder.
- 🧩 Templates and brand: project variables (
{{title}}) turn any design into a template, and a brand kit keeps your colors, fonts and logos at hand for you and for Agent. - 🧱 HTML blocks and components: build your own blocks with HTML/CSS/JS, expose variables as controls and actions as buttons, share them as
.kcomponentfiles, and publish icon packs. - 🔤 Typography: installed fonts and the whole Google Fonts catalog, with alignment, weight, spacing, outline and shadow.
- ⌨️ Keyboard-first: a command palette and shortcuts for tools, editing, zoom and exporting.
- 💾 Export: save your designs as PNG, JPEG or SVG at up to 4× scale, with a transparent background, copy them to the clipboard or share them directly.
- 🗂 Projects: several workspaces at once, automatic session saving, and
.kprojectfiles you can save, open and turn into templates. - 🖥 Multi-platform: use Karbonized as a Progressive Web App (with offline support) or as a desktop app for Windows, Linux and macOS.
- 🆓 Free and open source.
Press Ctrl/⌘ + K to see every command. The most common ones:
| Action | Shortcut |
|---|---|
| Command palette | Ctrl K |
| Select / Pan / Crop / Warp tools | V / H / C / W |
| Brush / Edit nodes / Eraser / Shape | B / A / E / R |
| Rulers and guides | Shift R |
| Undo / Redo | Ctrl Z / Ctrl Shift Z |
| Select all / Deselect | Ctrl A / Esc |
| Add to or remove from the selection | Shift + click, or drag on the canvas |
| Duplicate selection | Ctrl D |
| Delete selection | Delete |
| Move selection 1px / 10px | ← ↑ → ↓ / with Shift |
| Align left / center / right | Alt A / Alt H / Alt D |
| Align top / middle / bottom | Alt W / Alt V / Alt S |
| Distribute horizontally / vertically | Alt Shift H / Alt Shift V |
| Toggle snapping | Shift S |
| Zoom in / out / 100% / fit | Ctrl + / Ctrl − / Shift 0 / Shift 1 |
| Lock aspect ratio | Ctrl Shift L |
| Toggle properties panel | Ctrl B |
| Show / hide Agent | Ctrl L |
| Cycle panel layouts | Ctrl . |
| New project / Open project | Alt N / Ctrl O |
| Save project / Export | Ctrl S / Ctrl Shift E |
| Copy image | Alt Shift C |
In the HTML block editor:
| Action | Shortcut |
|---|---|
| Save block and return to the canvas | Ctrl S |
| Refresh preview | Ctrl Enter |
| Toggle explorer / preview panel / console | Ctrl B / Ctrl J / Ctrl Shift Y |
| Open HTML / CSS / JS | Alt 1 / Alt 2 / Alt 3 |
| Back to the canvas | Esc |
On macOS use ⌘ instead of Ctrl.
- Agent and the MCP server
- HTML blocks and the HTML block API
- Creating and importing components and the
.kcomponentformat - Making an icon pack
- Extensions (plugin system)
- Node >= 18
- Yarn 4 (via Corepack:
corepack enable)
Install the dependencies:
yarn installStart a development server:
yarn devBuild for production (type-checks first):
yarn buildyarn install also downloads the Electron binary (skipped on CI). If it failed, run node scripts/install-electron.cjs.
Run Karbonized with Electron in development mode:
yarn electron:devBuild the desktop app for your system:
yarn electron:buildThe generated binaries are in ./release/{version}/. Platform-specific builds are available with yarn build:win, yarn build:mac and yarn build:linux.
yarn test # Vitest unit tests
yarn lint # ESLint (should report no errors)
yarn format # PrettierReact 18, TypeScript, Vite, Tailwind CSS v4, Radix UI / shadcn/ui, Zustand, Monaco Editor, Electron and Capacitor.
This project is under Apache-2.0 Licence Terms and Conditions.
Contributions, bug reports and ideas are welcome — open an issue or a pull request.