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, rearrange layers, and draw new shapes and freehand sketches, all without sending a prompt to the agent.

​
Open the editor

  1. Click the Edit tool in the bottom toolbar of the Canvas.
  2. Click on the design you want to edit.
You can also right-click a design and select Edit > Edit Design to start editing it. 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 before Back to chat.

​
The editor panel

The panel has three parts: the Layers tree at the top, the insert tools, 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 Wrap in container, Hide/Show, and Delete.
  • 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 (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.

​
Insert tools

The insert tools let you add new content to the Canvas. Select a tool, then click or drag on the Canvas to place it. See Add shapes and drawings for how these behave on an empty Canvas versus inside an existing design.

​
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 rectangle, circle, arrow, line, and free draw tools let you add graphics to the Canvas.
  • On an empty area of the Canvas: using a shape or the draw tool creates a new design built around that shape or sketch. A freehand drawing is captured as an SVG path inside the new design.
  • Inside an existing design: you can drop the same shapes and drawings into any design, anywhere, at any time. Select the element afterward to restyle or reposition it like any other layer.

​
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.