Karbonized

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.

✨ What's new in 2.0

• 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 Workspace 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 .kcomponent library 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.

🚀 Features

• 🧱 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 .kcomponent files, 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 .kproject files 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.

⌨️ Keyboard shortcuts

Press Ctrl/⌘ + K to see every command. The most common ones:

In the HTML block editor:

On macOS use ⌘ instead of Ctrl.

📚 Documentation

• Agent and the MCP server
• HTML blocks and the HTML block API
• Creating and importing components and the .kcomponent format
• Making an icon pack
• Extensions (plugin system)

🏗 Building

🛠️ Requirements

• Node >= 18
• Yarn 4 (via Corepack: corepack enable)

Install the dependencies:

yarn install

🌐 Web app

Start a development server:

yarn dev

Build for production (type-checks first):

yarn build

🖥️ Desktop app

yarn 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:dev

Build the desktop app for your system:

yarn electron:build

The generated binaries are in ./release/{version}/. Platform-specific builds are available with yarn build:win, yarn build:mac and yarn build:linux.

✅ Code quality

yarn test     # Vitest unit tests
yarn lint     # ESLint (should report no errors)
yarn format   # Prettier

🧰 Tech stack

React 18, TypeScript, Vite, Tailwind CSS v4, Radix UI / shadcn/ui, Zustand, Monaco Editor, Electron and Capacitor.

©️ Licence

This project is under Apache-2.0 Licence Terms and Conditions.

👥 Contribution

Contributions, bug reports and ideas are welcome — open an issue or a pull request.