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 in 🇨🇺
- New interface — a calmer, denser design with light and dark themes across the whole app.
- Command palette — press Ctrl/⌘ + K to search and run any action, with its shortcut next to it.
- Autosave — your workspaces are saved as you work and restored when you come back.
- HTML blocks with a real code editor — edit HTML, CSS and JavaScript in a Monaco-powered editor with an explorer, file tabs, a live preview, a console and auto-generated controls for your variables. Works offline.
- Custom components (
.kcomponent) — package HTML blocks as YAML files, import them into your library and reuse them in any project. - Consistent shortcuts — shortcuts no longer fire while you type, and tools use single keys like in design apps.
See the full changelog.
- 🧱 Block-based canvas: code snippets, text, images, icons, shapes, phone and window mockups, tweets, badges, QR codes and HTML blocks. Move, resize, rotate, crop and warp them, group them into layers and undo any change.
- 🎨 Backgrounds: solid colors, gradients, textures, images and dynamic backgrounds, with blur and noise.
- 🧩 HTML blocks and components: build your own blocks with HTML/CSS/JS, expose variables as controls and actions as buttons, and share them as
.kcomponentfiles. - ⌨️ Keyboard-first: a command palette and shortcuts for tools, editing, zoom and exporting.
- 💾 Export: save your designs as PNG, JPEG or SVG, 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 |
| Undo / Redo | Ctrl Z / Ctrl Shift Z |
| Duplicate selection | Ctrl D |
| Zoom in / out / reset / fit | Ctrl + / Ctrl − / Shift 0 / Shift 1 |
| Lock aspect ratio | Ctrl Shift L |
| Toggle properties panel | Ctrl B |
| New project / Open project | Alt N / Ctrl O |
| Save project / Export | Ctrl S / Ctrl Shift E |
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.
- HTML blocks and the HTML block API
- Creating and importing components and the
.kcomponentformat - 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 buildRun 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 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.