Guides

The Visual Editor

A complete tour of everything on screen: the floating button, element selection, both panel tabs, and the controls that make editing fast.

The floating button

The round paintbrush button in the bottom-right corner is kalp's only permanent UI.

• Click it to enter selection mode. The button turns blue while active. Click again — or press Esc — to leave.
• Drag it anywhere if it covers something you need to see. A drag never counts as a click.
• A small badge on the button shows a count: green for pending edits waiting to be applied, blue for selected elements.

Selecting elements

In selection mode the cursor becomes a crosshair. As you move over the page, the element under the cursor gets a dashed blue outline with a label showing the React component name it belongs to — kalp selects by component, not by raw HTML tag.

• Click an element to select it. The editor panel opens with its styles.
• Drag a box to select several elements at once.
• Hold Shift while clicking or dragging to add to your current selection instead of replacing it.
• When you select a single element, kalp also finds other on-screen instances of the same component (for example every card in a list) and outlines them too. Your edits preview on all of them, because they share the same source code and the change will land on all of them anyway.

The panel always edits the most recently selected element. Press Esc at any time to leave selection mode and clear the selection.

The Style tab

The panel opens on the Style tab. It reads the element's current computed styles, so every control starts at the real current value. Controls are grouped:

Appearance

Text

Font size and text color are applied to the element and all its children, so they win over more specific rules inside the selection — what you see is really what you get.

Border and Shadow

Two collapsible sections at the bottom of the Style tab:

• Border — width (0–20 px) and color, written as one border shorthand. Width 0 means no border.
• Shadow — offset X, offset Y (−50 to 50 px), blur (0–100 px) and color, written as one box-shadow. All zeros means no shadow.

Colors

Every color control opens kalp's own picker in a small popover: a saturation square, a hue strip, an editable hex field, and — where opacity applies — an opacity strip. Click outside or press Esc to close it.

The Layout tab

The Layout tab is context-aware: it looks at how the selected element participates in layout and only shows controls that make sense for it.

The padding and margin crosses show one number per side around a box. Drag a number to change it (up/down for top and bottom, left/right for the sides), or double-click to type. A small toggle switches between uniform (change one side, all four follow) and individual sides.

Scrubbers, undo and reset

• Scrubber rows. Numeric controls are whole-row sliders: drag anywhere on the row to change the value, or click the number on the right to type an exact value (Enter confirms, Esc cancels).
• Changed = blue. Any property that differs from its original value turns sky-blue, so you always know exactly what you've touched.
• Per-property undo. Hover a changed row and a small circular arrow appears at its left edge. Click it to revert just that property — the preview is removed and the entry leaves the edit log.
• reset. The reset button in the footer reverts everything: all previews are removed and the edit log is cleared. Nothing is written anywhere.
• Pending count. The footer shows how many property changes are waiting ("3 pending edits"). The same number appears as the green badge on the paintbrush button.

The panel itself can be moved: drag it by its header (next to the green dot and component name).

Applying edits to code

Above the footer sits a small text box: "anything else to change?". It is optional. Use it for changes the controls don't cover — for example "make this button say Save instead of Submit". It is sent together with your visual edits and applies to the currently selected component.

Click apply to code to send everything to the bridge server, which has Claude Code write the changes into your source files (see How It Works). While it runs the button reads applying… — this usually takes a little while, since Claude Code reads your files and makes real edits.

• On success the preview styles are removed, the selection clears, and your dev server hot-reloads with the change now in real code.
• On failure a red message appears at the bottom of the panel saying what went wrong, and your pending edits are kept — nothing is lost, you can fix the problem and apply again. Common messages are explained in Troubleshooting.

The button is disabled while a run is in progress and when there is nothing to send (no edits and an empty prompt).

Keyboard shortcuts