Repository navigation
Releases: yossdotpro/karbonized
Release list
v 2.2.0 - Release (September 30th, 2026)
π Features
- See when Agent or an MCP client is using the canvas: while one works, a ring of the accent runs around the canvas area, a soft glow breathes inside it and a pill at the top says who is working and which tool it runs ("Add block", "Look at the canvas"β¦). It stays a moment between calls so it does not blink, takes no clicks, never shows in exports and holds still with reduced motion
.kprojectand.kbrandfiles have their own icons in Explorer, Finder and Linux file managers: a dark page with the logo and a PROJECT or BRAND tab.yarn file-iconsrenders them for every platform- Open projects and brand kits with a double click: the installers register both extensions, so a file opens in Karbonized, in the running window when it is already open. A project opens next to the ones already open; a brand kit replaces the current one, with Undo in the notice
- On the desktop, saving a brand kit opens a real "Save as" dialog, and importing one (from the panel or a double click) can be undone
- The app changelog follows every release: it now lives in
src/lib/changelog.ts, and a test fails while the version inpackage.jsonis missing from it or fromCHANGELOG.md
π Fixes
- Phone mockups could grow but not shrink: the device kept its 320Γ620 layout size inside the block, so a smaller block cut it instead of scaling it down. It now scales to any size in both directions
- With many workspace tabs open there was no room left to drag the window: the menu and the tabs were one area that took clicks, up to 80% of the title bar. Only the controls take clicks now, and there is always a gap before the window buttons to drag it by
add_brand_logosaid the brand kit had no logo when it was called right after launch, before the kit had loaded; it now says the kit is still loading- MCP clients that drop
anyOffrom tool schemas saw the fonts ofupdate_brand_kitas empty objects; its description now gives their shape - The app changelog stopped at v2.0.0
Full Changelog: v2.1.0...v2.2.0
v 2.1.0 - Release (September 29th, 2026)
π Features
- Brand kit panel: the brand kit has its own tab in the properties panel, next to the workspace settings and organized like them, in collapsible sections (name, colors, fonts, logos, guidelines) that show how many items each holds; File β Brand kitβ¦ opens it (outside the editor it still opens in a dialog)
- Agent and MCP clients create and edit the brand kit:
update_brand_kitsets the name, palette, fonts by role (checked against Google Fonts), logo names and uses and the guidelines;save_brand_logoadds a logo from SVG markup, a data URL or an image block of the canvas. They do it when the user gives them their brand or asks for one - Variables tab: project variables moved out of the workspace settings to their own tab of the properties panel
- Every HTML block Agent and MCP clients write has CSS and JS variables: the look as annotated
:rootvariables and the content (labels, values, lists) as// @varJS variables that the script renders, so both are edited from the panel.add_block,update_blockandupdate_html_blockrefuse a block without them, with a script that declares a variable twice or with a list that is not a JSON list of strings, say what to fix and turn scripts on for the block - Easier property panel for HTML blocks: variables read as names ("Value size", not
--value-size) in rows that line up with the other panels; numbers take a typed value next to the slider, lists edit each item in its own field (Enter applies, reorder, remove, add), objects edit each value in place or as JSON, and the shadow editor is a compact set of rows
π Fixes
- The properties panel could not scroll to its end: its scroll area took the full height of the panel under the title and the align bar, so the last part of a tab with several sections open stayed hidden
- Going to the block editor and back (or anything else that shows the canvas again) could lose block positions and other values: every block painted its defaults for a frame and wrote them over its saved values before reading them back. Blocks now start from their saved values, and a custom background of a code block survives
- The first render of a code block showed raw
<pre><code>markup before the code - A text block exported while selected (or under the pointer) kept its blue outline in the image
- Zoom to fit and Zoom to 100% ignored the panels floating over the canvas: with Agent open the canvas ended up under the properties panel. They now fit and center it in the space left free
- HTML block scripts could not build elements:
document.createElementthrew "Illegal invocation", so lists rendered from a JS array stayed empty. Editing a list whose items were numbers did nothing, and a// @varvalue followed by a semicolon read as empty
Full Changelog: v2.0.0...v2.1.0
v 2.0.0 - Release (September 28th, 2026)
π Features
- New look: a new logo (a solid rounded diamond with the flame cut out of it, the same shape as Agent's mark), the app name set in Fredoka, the Figtree typeface across the interface and the rose accent of v1 back on primary controls, focus rings, the canvas selection and snapping guides. Canvas blocks keep their typefaces, so exported images do not change
- Agent, the design assistant (
Ctrl+L): a panel docked on the left that edits the canvas from a description, with streaming answers, visible tool calls, stop, retry and chat history. It lives in the AI menu - Agent works with Anthropic, OpenAI, Google Gemini, OpenRouter, Ollama, LM Studio and any OpenAI-compatible server; providers, models and keys are set in Agent settings
- API keys stay on the device: encrypted with the system keychain on desktop (and only sent to the base URL they were saved for), stored in the browser on the web
- Everything Agent does in one response undoes in one step, with Undo changes under the response
- Panel layouts: the status bar button switches between Canvas, Properties, Agent and both (
Mod+.cycles them) - An AI menu in the menu bar: show or hide the panel, new chat, stop, switch model, settings and, in the desktop app, turn the MCP server on or off
- An MCP indicator in the status bar of the desktop app shows the server state and opens its settings
- New blocks land where you are looking: in the middle of the visible canvas, whatever the zoom or the panning, and stepping aside instead of piling up on the same spot
- One active tool: Select, Pan, Crop and Warp are now a single setting. Holding
Spacepans the canvas and releasing it goes back to the tool you were using,Escleaves the current tool, and pressing a tool's button or shortcut again returns to Select - Rotation in degrees: the Position panel takes the angle of the block as a number; a warped block shows a Reset warp button, and blocks report their angle even after being warped
- Crops are proportional: a crop is stored in percentages, so it follows the block when it is resized, the crop area can be dragged as a whole, and Reset crop in the block menu removes it
- Fonts for text blocks: pick any font installed on the machine or any of the 1946 families of Google Fonts, searchable and filtered by kind (sans, serif, display, handwriting, mono), each name shown in its own font. Only the names on screen are fetched for the preview, the chosen family is loaded with the weights it really has, and the exported image keeps it
- Typography controls for text: alignment (left, center, right, justified), weight (300β800), line height and letter spacing
- Edit text on the canvas: double click a text block to type in place;
Esc(or clicking away) saves - Agent and the MCP server reach the new work: they can crop a block (
cropinupdate_block, in percent of each side), place the guides blocks snap to (set_guides), create freehand strokes and read the crop and the guides back fromget_workspace; the tools the user draws with (shape, brush, nodes, eraser, crop, pan) and the rulers are commands they can run - Agent and MCP clients build designs block by block: the design guide now says what each block is for, asks for text blocks for the copy and one HTML block per component, and gives proven layouts with an example plan. HTML blocks must declare their colors, sizes, radius, shadow, icon and show/hide flags as annotated
:rootvariables, with a worked example;add_blockandupdate_html_blockanswer with hints when a block misses them or grows into a whole section - Agent and MCP clients choose fonts on purpose: a new
search_fontstool browses the whole Google Fonts catalog by name, kind and weight; the design guide gives pairings by tone and the tools warn when a family will not load or lacks the weight asked for - Editable data in HTML blocks: lists, chart data and rows go in
// @varJS variables that the block renders, so they are edited from the panel; CSS variables are derived from each other (color-mix,calc) so one change restyles the whole component - Agent and MCP clients look at their work: they check the canvas with
get_canvas_snapshotwhile they build and after each change, a reminder comes after several changes without a look, and the snapshot waits for fonts to load - Vector brush (
B): draw freehand on the canvas and the stroke is kept as a curve, not as pixels. The points are smoothed and thinned into a bezier path, so it stays sharp at any size; the bar at the bottom sets width, smoothing, thinning and color, and each stroke becomes a block that can be moved, resized, rotated, recolored, closed and filled, and undone - Eraser (
E): press and go over what you want gone; everything the pointer touches in one pass is deleted in one step - Rulers and guides (
Shift+R): rulers along the top and the left in canvas pixels, that follow the pan and the zoom. Drag out of them to leave a guide the blocks snap to, drag a guide off the canvas to take it away, and Clear guides removes them all - Alt+drag leaves a copy of the block behind, and Shift keeps a drag on one axis
- Drag a block from the toolbar to the spot on the canvas where it should land
- Shapes take a gradient fill, and Convert to stroke in their menu turns a shape into a stroke, so the node tool can edit it point by point
- Text takes an outline and a shadow of its own letters, not only the shadow of the block
- The brush steadies the line while it is drawn, not only when it is let go, and shows a circle of the width it paints at the current zoom
- Edit the nodes of a stroke (
A): pick a stroke and its points show on the canvas; drag one to move it, click the stroke to add one andAlt+click to take one out. Every edit is one step of undo - The brush has a stroke that lives: it follows the pressure of a pen, and the speed of the hand when there is no pen, so a line is thicker where it lingers and thinner where it runs, with tapered ends. The stroke keeps its points, so its width and how much it thins can still be changed after it is drawn
- Shapes are drawn on the canvas: pick the shape tool (
R), choose a shape in the bar at the bottom and drag to draw it where and as big as you want;Shiftkeeps it square andAltdraws from the center. A click without dragging still drops one at its default size - Shapes redrawn: rectangle with adjustable corners, ellipse, triangle, polygon with 3β12 sides, star with 3β12 points and adjustable depth, heart, line and arrow. Every shape takes a fill, a stroke (width, color, solid, dashed or dotted) and is drawn at the block's real size, so corners and strokes keep their thickness. Shapes from older projects keep working
- Images frame their picture: stretch, cover or fit, offset X and Y, zoom, corner radius, a URL field and "use original size"; an image file can be dropped on the block and an image in the clipboard pasted onto it
- Text blocks fit their text: new text blocks grow and shrink with their content, font size and style. Resizing with a side handle keeps the width and wraps the text (the height still follows it); a top, bottom or corner handle fixes both. Pick Auto, Auto height or Fixed in the Text section, which now takes several lines. Existing text blocks keep their size
- MCP server in the desktop app (off by default): Claude Desktop, Claude Code, Cursor and other MCP clients can read the workspace, create projects, add, edit, align and delete blocks, edit HTML block code, change the background and size, look at the canvas and export images; settings include ready-made client configurations
- Export options: scale (0.5Γβ4Γ) with the resulting size, transparent background for PNG and SVG, JPEG quality; the export dialog remembers your choices and warns when the image is too large for the browser
- Copy image to the clipboard (
Alt+Shift+C, File menu and export dialog) - Block "Export layer" uses the same scale and transparency settings
- Notifications for export, copy and project errors instead of browser alerts
- Zoom indicator in the status bar with presets, zoom to fit and 100%; zoom steps are proportional and the indicator follows pinch and Ctrl+wheel
- Agent designs to a standard: a shared design guide for social media (sizes per platform and story safe zones, margins and grid, a type scale for phones, contrast, palettes, HTML block rules and a final checklist) in Agent's prompt and in the MCP server instructions, plus
get_design_guideandsearch_iconstools - Agent and MCP clients export without dialogs:
export_imagesaves to an export folder (Pictures/Karbonizedby default, changeable in the export dialog and MCP settings) and returns the path, or returns the image itself. Exports from the menu say where the file went, with a Show button - Templates with variables: a project can hold variables (text, long text, date or "today"). Blocks that contain
{{name}}show the value, so a design becomes a template whose content changes without touching the layout. Edit them in the Workspace panel, or let Agent fill them withset_variables - Brand kit (File β Brand kit): your colors, fonts, logos and guidelines in one place. The color and font pickers offer them first, Agent and MCP clients read them before designing (
get_brand_kit,add_brand_logo), and a kit can be shared as a.kbrandfile - MCP without an open window: MCP clients start Karbonized in the background when it is not running; while the server is on, closing the window keeps it running in the tray, and it can start hidden at login. Only one Karbonized runs at a time
- Component library reworked: import several
.kcomponentfiles at once (or drop them), with a result and warnings per file; duplicates are replaced instead of rej...
v 2.0.0 - Beta 1
π Features
-
NEW HTML Block Component with comprehensive capabilities
- Shadow DOM Architecture for secure encapsulation and CSS scoping
- Live HTML/CSS/JavaScript Editor with real-time preview
- CSS Variables System with automatic control generation (color pickers, sliders, switches)
- JavaScript Variables System with 8 typed controls (string, number, boolean, color, gradient, url, object, array)
- Custom Actions System with button generation from JavaScript comments
- SafeDOM API for secure DOM manipulation preventing "Illegal invocation" errors
- Custom Components for Data Editing: ArrayEditor and ObjectEditor with intuitive UI
- Real-time Variable Updates with automatic UI refresh
- Integration with Export System for static image generation
-
New Routing System with React Router for better navigation and state management
- Separated Routes:
/newfor project creation and/editorfor editing - Professional New Project Panel: Photoshop-style interface without templates
- Context-Aware UI: Menu options and UI elements only appear when relevant
- Smart Navigation: Automatic redirection between routes based on application state
- Separated Routes:
-
Enhanced Project Management
- Custom Project Names: Workspaces now use the exact project name entered by user
- No Auto-Creation: Eliminated automatic workspace creation on app startup
- Smart TabBar: Only appears when projects exist, hidden in new project view
- Contextual Controls: Editing options disabled outside editor context
-
Improved User Experience
- Cleaner Interface: TabBar and add tab button hidden in new project view
- Logical Menu System: File menu options disabled when no workspace is active
- Professional Workflow: Similar to professional design applications
- Performance Optimization: Editor components only loaded when needed
-
Add a redesigned hierarchy panel with searchable layers, filters, contextual layer actions, and cleaner workspace-oriented UI
-
Add layer groups/folders with nested hierarchy, collapse state, visibility/lock controls, duplication, rename, and drag-and-drop reordering
-
Add grouped Moveable editing so hierarchy groups can be transformed together directly on the canvas
-
Add hierarchy multi-selection with standard click, Shift range selection, and additive Alt/Ctrl/Cmd selection for batch layer actions
-
Migrate to Tailwind CSS v4 with new CSS-based configuration
-
Migrate to Vite 8 for improved build performance
-
Migrate to ESLint 9 with flat config system
-
Migrate to Zustand from easy-peace and build a multistore system
-
Add new window styles to CodeBlock: Pixel, Konsole, GTK, GNOME, RETRO and Paper
-
Improve macOS window style with realistic traffic light buttons and proper spacing
-
Improve Windows 11 window style with accurate title bar and window controls
-
Enhance Paper window style with better textures, gradients, and paper tear effect
-
Add automatic color setting for Paper theme (#fbfaf7) and disable window color picker
-
Add rounded corners and shadows to various window styles for better realism
-
Add blur effect for workspace backgrounds
-
Add noise texture overlay for workspace backgrounds
-
New Mesh Gradient Dynamic Background Effect
-
New Lava Lamp Background Effect
-
New Galaxy and Starfield Background Effect
-
Add "Create Dynamic Background" from Image, Phone, and Window block context menus using extracted image colors
-
New App Design with glassmorphism effects
-
Redesign TabBar with design guide styling
-
Add context menu to tabs with bulk closing options: Close, Close others, Close to the right, Close to the left
π Fixes
- Fix grouped Moveable crashes caused by invalid multi-target configuration in hierarchy-driven group selection
- Fix control position feedback loops caused by store-to-local property synchronization while dragging active controls
- Fix 800+ ESLint errors (formatting, unused variables, and other linting issues)
- Fix TypeScript strict mode error in ProjectWizard.tsx (explicit comparison for any types)
- Fix Editor component not displaying by default (showWizard state initialization)
- Fix theme toggle not working by centralizing theme state in AppContext and updating CSS for class-based dark mode
- Fix code duplication in new window styles by using common SyntaxHighlighter
- Fix window color picker showing for Paper theme when it should be disabled
- Fix TypeScript and ESLint formatting issues across codebase
- Fix InfiniteViewer zoom being too aggressive when using Ctrl + mouse wheel scroll (added wheelScale and maxPinchWheel parameters)
- Fix ControlMenu Portal not rendering when RightPanel hasn't mounted yet (added useEffect to wait for #menu element)
- Fix ControlMenu disappearing when switching tabs in RightPanel (Portal container now persists within tab)
- Fix Moveable component appearing in exported images (added isExporting state to hide Moveable during export)
- Fix TypeScript errors in workspace store interface for addWorkspace function
- Fix workspace name inheritance from project creation dialog
- Fix TabBar rendering when no workspaces exist
- Fix menu options appearing in inappropriate contexts
- Fix automatic workspace creation on application startup
π Changes
- Refactor hierarchy actions into the central store so layer visibility, lock, delete, duplicate, grouping, and structural reorder flow through shared editor logic
- Update TypeScript moduleResolution to "bundler" for better ESM support
- Remove old ESLint config files (.eslintrc.js, .eslintrc.json)
- Remove test message from App.tsx
- Refactor CodeBlock to use common SyntaxHighlighter for all styles to prevent duplication and enable proper stretching
- Update Tailwind CSS v4 gradient syntax (bg-linear-to-_ instead of bg-gradient-to-_)
- Refactored App Architecture: Moved from dialog-based to routing-based navigation
- Updated Workspace Store: Modified addWorkspace to accept custom project names
- Enhanced MenuBar Logic: Added route-based conditional rendering
- Improved TabBar Behavior: Context-aware visibility based on workspace state
- Streamlined User Flow: Clear separation between project creation and editing phases
π¦ Dependencies
- Update vite: 5.1.5 β 8.0.0
- Update @vitejs/plugin-react: 4.2.1 β 6.0.0
- Update vite-plugin-electron: 0.28.4 β 0.29.0
- Update vite-plugin-pwa: 0.16.4 β 0.20.0
- Update eslint: 8.57.0 β 9.15.0
- Update eslint-plugin-react: 7.34.0 β 7.37.0
- Update @typescript-eslint/eslint-plugin: 6.1.0 β 8.15.0
- Add @typescript-eslint/parser: 8.15.0
- Update eslint-config-prettier: 8.5.0 β 9.1.0
βοΈ Configuration
- Add @tailwindcss/vite plugin to vite.config.ts
- Create eslint.config.js with flat config format
- Update tsconfig.json moduleResolution to "bundler"
- Added React Router DOM for navigation management
- Created new NewProject.tsx component with professional UI
- Updated App.tsx with routing configuration
- Modified MenuBar.tsx for context-aware menu options
- Enhanced TabBar.tsx with conditional rendering logic
Full Changelog: v1.12.0...v2.0.0-beta1
v1.12.0 - Release (August 24th, 2023)
π Changes
- ποΈ New Template System with Community-Generated Content
- π¨ Add a set of predefined gradients for background
- π» New Devices Mockups
- πΌοΈ Background Images
- π§ New installation formats available for Linux
- π± Some improvements in Mobile Version
π οΈ Fixes
- Save Transform Properties of Blocks
- Wrong Data on Saving Projects
- Missing Image on Device Blocks
- and more...
All Changes from v1.10.1 to v1.12.0 see CHANGELOG
v1.11.6 RC
β οΈ Release Candidate (Not recommended for installation)
- Various Changes and Improvements
v1.10.1 - Release (August 16th, 2023)
π Changes
- π₯οΈ New, more compact interface design.
- π¨ Changes in the colors of the light and dark themes for better contrast.
- π± Available version for Android
- β‘ Reduce App Loading Time
- π Major Bug Fixes and Improvements
πͺ± Minor Bug Fixes
- Show Menu Bar on Mac
- Wrong Position of Drawing Panel
- Change Theme Colors On Code Blocks
v1.7.2 - (August 6th, 2023)
Minor Release
- π Some bug fixes and improvements
v1.7.0 - Release (July 30th, 2023)
New Features
- π Multiple Workspaces
- π Improve Karbonized with the New Extensions System
- πͺ New Editor Layout
- π Major Bug Fixes and Improvements
- β‘ Electron-Based
All Changes from v1.1.0 to v1.7.0 see CHANGELOG
v 1.1.0 - Release (July 13th, 2023)
- Canvas Drawing System
- Transparent Background on Code blocks
- Some Improvements
- Minor Bug Fixes