Skip to main content
The design editor is a full visual editor built into the Canvas. It works like a standard design tool: select any element in a design, adjust its styles through visual controls, edit text and raw CSS/HTML directly, and rearrange layers, all without sending a prompt to the agent.

​
Open the editor

Right-click a design and select Edit > Edit Design. The Edit tool turns on and the editor panel opens. If you’re already using the Edit tool, clicking an element opens the quick-edit bar rather than the panel. To open the panel from there, use either of these:
  • Click Open edit panel in the quick-edit bar.
  • Click Open edit panel at the end of the edit strip at the top of the Canvas.
Click Save on top of the editor to save your changes, or Discard to revert. You can also visit the specific states of your design changes using the Undo and Redo icons. The panel header also has these controls:
  • Dock left and Dock right move the panel to either side of the Canvas.
  • In the desktop app, Back to chat closes the panel and returns you to the chat. In the IDE extension and the browser, Collapse panel closes the panel instead. Either way your unsaved edits are kept, and the edit strip at the top of the Canvas shows how many there are.

​
The editor panel

The panel has two parts: the Layers tree at the top and the property tabs that populate when you select an element.

​
Layers

The Layers tree shows every element in the design in nesting order. Each row is labeled with a friendly name and its underlying HTML tag (for example nav, ul, li, section, video, div, span).
  • Click a layer to select it and load its properties into the property tabs.
  • Cmd/Ctrl-click to add or remove layers from a multi-selection, or Shift-click to select a range. With two or more layers selected, the Layers title bar becomes a batch toolbar with Add layers to chat, Wrap in container, Hide layers/Show layers, Delete layers, and Clear selection.
  • Drag a layer in the tree to reorder it or move it into another container.
  • Double-click a text element on the Canvas to edit its content inline.
  • Hover a layer to reveal the visibility toggle and the ⋯ menu (Add to chat, Wrap, Unwrap, Copy, and Delete).
Keyboard shortcuts when a layer is selected:
  • Arrow keys: move the selection up and down, and expand or collapse a layer.
  • Delete / Backspace: delete the selected layer or layers.
  • Cmd/Ctrl + C / V: copy and paste an element. You can paste it into another design in the same session.
  • Cmd/Ctrl + Z and Shift + Cmd/Ctrl + Z: undo and redo.

​
Property tabs

When an element is selected, the panel shows tabs for editing it:
  • Styles: visual controls for the element’s CSS. See Styles.
  • Element: element-specific properties. The tab and its contents adapt to the selected element’s type (for example, a Video tab for <video> elements). See Element properties.
  • Code: the element’s raw CSS and HTML. See Code.

​
Styles

The Styles tab groups the element’s CSS into the sections below. You can also reuse colors already present in the document from the Document colors swatches.
Controls typography for text elements.
  • Font family: Search and select from system fonts and a large Google Fonts catalog. Picking a Google font loads it into the design automatically.
  • Size: Set the font size in px.
  • Weight: Choose from available weights (e.g., Regular 400, Bold 700).
  • Line height and letter spacing: Control vertical and horizontal spacing.
  • Format: Bold, italic, underline, and strikethrough.
  • Color and alignment, plus a Document colors row to reuse text colors already used in the design.
Controls the element’s background fill.
  • Fill type: Choose between Solid, Gradient, or Image.
  • Color: Pick a custom color or reuse one from the Document colors row.
  • Opacity: Adjust the element’s overall opacity.
  • Blend mode: Set how a solid fill blends with what’s behind it.
Controls the element’s border, configurable per side.
  • Color: Set the border color.
  • Style: Choose the border style (none, solid, dashed, etc.).
  • Width: Set the border thickness in px.
  • Radius: Set the corner radius.
  • Per-side: Apply the settings above to all sides or to a single side (top, right, bottom, left).
Controls the element’s box model and flow.
  • Display: Set the layout mode (block, flex, grid, etc.).
  • Direction / Wrap: Set the flex direction and wrapping behavior.
  • Justify / Align: Control content distribution and item alignment.
  • Gap: Set spacing between child elements.
  • Box model: Adjust width, height, padding, and margin for each side.
Controls how the element is positioned.
  • Position: Set the positioning scheme (static, relative, absolute, fixed, sticky).
  • Inset: Offset the element from each side (top, right, bottom, left).
  • Z-index: Set the stacking order.
  • Float: Float the element within its container.
Add depth and blur effects to the element.
  • Shadow: Create drop shadows or inner shadows.
  • Layer blur: Blur the element itself.
  • Backdrop blur: Blur the content behind the element.
Controls 2D transformations.
  • Translate: Move the element along the X and Y axes.
  • Rotate: Rotate the element.
  • Scale: Resize the element.
  • Skew: Skew the element along the X and Y axes.
  • Origin: Set the transform origin from a 3×3 grid.
Attach a CSS animation to the element.
  • Preset: Select from available animation presets.
  • Trigger: Play the animation on load or on hover.
  • Duration: Set how long the animation runs.
  • Easing: Choose the easing function (e.g., ease-in-out, linear).
  • Delay: Control when the animation starts.
  • Loop: Toggle infinite repetition.

​
Element properties

The Element tab exposes properties specific to the selected element’s type, beyond its CSS. Its label changes to match the element (for example Text, Image, or Video), and it splits into two sub-tabs: the type-specific panel and a generic Attributes editor. Kombai has dedicated panels for many element types:
  • Text (p, span, headings, label, and similar): content, formatting, tag, text transform, and truncation.
  • Link (a): URL, target, rel, and link styling.
  • Image (img): source, alt text, object fit, aspect ratio, and loading.
  • Button (button): label, type, cursor, and disabled state.
  • Field (input): input type, placeholder, state, and validation.
  • Video (video): the media Source and Poster URLs, Playback toggles (Autoplay, Loop, Muted, Controls), and the Preload behavior.
  • List (ul, ol), Select, Textarea, Form, Table, and SVG each expose the properties relevant to them.
The Attributes sub-tab is always available for any element. It shows the id, class, and tabindex, groups the remaining attributes into HTML, ARIA, and Data, and lets you add, rename, or delete attributes. A Flags & Enums block toggles boolean attributes (such as hidden, draggable, spellcheck, and contenteditable) and enum attributes (such as dir).

​
Code

The Code tab lets you edit the selected element’s styling and markup directly, in syntax-highlighted editors that validate your input before you apply it.
  • CSS: the element’s CSS properties as text. Edits are applied as inline overrides on the element, so your classes and stylesheets stay untouched.
  • HTML: the element’s markup.
Edit the code, then click Apply to commit your changes, or Reset to revert to the previous state.

​
Edit locked layers with AI

Some layers are generated dynamically by your code, for example items rendered from data. Kombai marks these as locked: they show a lock icon and a JS badge in the Layers tree, and the whole subtree under them is read-only, so the visual controls don’t apply. When you select a locked layer, the panel shows a read-only view with an Edit with AI button. Clicking it opens a composer where you can:
  1. Describe the change you want in plain language.
  2. Optionally click other layers to attach them as extra context.
  3. Click Send to chat to hand the request to the Kombai agent, which makes the change in your code.

​
Add shapes and drawings

The design editor doesn’t add shapes or drawings to a design. To sketch, annotate, or add shapes, use the Draw tools on the Canvas.

​
Save or discard changes

Editing in the panel stages your changes without touching the agent or your repo.
  • Click Save in the top toolbar to keep your edits.
  • Click Discard to revert to the last saved state. Kombai asks you to confirm before discarding.
  • Use the undo and redo controls to step through individual changes while editing.
  • If you close the editor with unsaved changes, Kombai prompts you to save, discard, or keep editing.
To turn an edited design into code, select it and use Code design (or select an element and use Code element) from the top toolbar. See Convert a design to code.