Live edit

Live edit changes how an element looks with controls, the way a design tool does, on the real page. It is for trying a fix and seeing it at once, without writing CSS.

Open it#

Press L, or the Live edit button on the bar (the pencil). The side panel opens if it was closed and shows only the editor; Inspect turns on, so a click picks what to edit. Press L again, the button again, or the × in the panel to go back to inspecting. Your changes stay on the page.

The Design view#

The selected element's values, as the browser computed them, in groups:

• Layout: display as buttons; for flex, direction, justify, align, wrap and the gaps; for grid, its columns; and overflow.
• Size: width and height, with their minimums and maximums.
• Spacing: margin around padding, each side a field, in the box model's colours.
• Typography: font, size, weight, line height, letter spacing, colour and alignment.
• Fill, Border and radius, Position and Effects: background colour and opacity, border width, style, colour and each corner, position, offsets and layer, shadow and transform.

Drag a field's label sideways to change its number (Shift⇧ for tens, Alt⌥ for tenths), step it with ↑ and ↓, or type any CSS value. The page follows as you go; Enter or clicking away keeps it, Esc puts it back. Colours have the system's picker beside a hex field; the page's own colours are offered in the picker, and its fonts in the font field.

Where an edit goes#

Above the controls, three choices say what your edits apply to:

• Apply to: This element (its own style attribute), All .btn (every element with one of its classes, with how many there are), Elements matching… (any selector you type), or Everywhere the value is used (see below).
• State: Normal, Hover, Focus, Focus visible or Pressed, or the ::before and ::after pseudo-elements. While a state is chosen the element is shown in it, so you see the edit; a pseudo-element starts with its Content, which it needs to show at all.
• Screen sizes: All sizes, or one of the page's own breakpoints that holds at the current width (“768px and wider”, “Up to 1023px”).

Anything but this element as it is goes into a rule in Nitpique's own stylesheet, shown under the choices (@media (min-width: 768px) { .btn:hover }). The rule is plain CSS: it wins or loses against the page's rules as it would in your code, so what you see is what the copied CSS does. It is listed in Rules as Nitpique, where you can edit it like any other.

Change everywhere#

With Everywhere the value is used, changing a colour, a font, a text size, a spacing or a radius changes it in every rule and style attribute on the page that uses it, so every element follows. Colours are matched as colours (#2563eb, #2563EB and rgb(37 99 235) are one), sizes by their size in pixels (16px finds 1rem), and a font by its name in the stack. A text size never changes a padding of the same number: each kind keeps to its own properties. A variable whose name says what it holds (--brand, --space-4) changes too, and everything using it follows.

It is one change in Changes, named “Colour #2563eb → #e11d48”, that opens to the rules it touched and turns off, undoes or reverts as one. The Design tab does the same from the page's colours (each colour's pencil) and its type scale (each size's pencil).

Resize on the page#

While Live edit is on, the selection has eight handles. Drag one to change the width or height right there; the new size shows beside it.

• An edge you drag snaps to the parent's edges and to the edges of the elements beside it, with a guide line across the window.
• With no edge near, it snaps to the size of an element beside it, so two cards can be made the same width; the size reads "= sibling" while it does.
• Shift⇧ on a corner keeps the proportions; Alt⌥ drags without snapping; Esc before you let go puts it back.

Quick actions#

A small bar sits beside the selection: edit its text, replace its picture, duplicate, copy, paste after it, delete, drag its padding and margin, isolate it, and undo and redo. The same things have keys on the page while Live edit is on:

• Delete or Backspace deletes the element; Ctrl⌘+D duplicates it, right after itself.
• Ctrl⌘+C copies it (its HTML goes to the clipboard too, to paste into code), Ctrl⌘+X cuts it, and Ctrl⌘+V pastes it after the selection. With text picked on the page, they copy the text as usual.
• Ctrl⌘+Z and Ctrl⌘+Shift⇧+Z undo and redo, on the page as in the panel.
• J and K go to the next and previous element you changed.

Drag padding and margin#

Press the spacing button in the quick actions: the resize handles give way to a short bar on each side of the content (padding, green) and of the margin (orange). Drag one to change that side; the band and its value show as you drag. It snaps to the element's other sides and to the same side of the elements beside it. Shift⇧ moves the opposite side too, Alt⌥ drags without snapping, Esc puts it back.

Replace an image#

On an image, the quick actions and the panel have Replace image: pick a file, or paste a picture with Ctrl⌘+V. An <img> takes it as its source (its other sources, such as srcset and a picture's sources, are taken off so the browser shows it); an inline SVG is swapped for the SVG you pick or paste as text, with any scripts taken out; an element with a background image gets it as its background.

Isolate#

Press I or the isolate button to hide everything but the selection, where it is and at its size, to look at it alone. I again or Esc brings the page back. Isolating is a view, not a change.

Classes and Tailwind#

Above the Design controls, Classes shows the element's classes as chips. Tailwind utilities are tinted, with what each sets on hover. Type in the field and press Enter to add one; a utility takes the place of the one it replaces under the same variants (p-6 for p-4, md:p-6 for md:p-4). Click a chip to change it, its × to take it out. The page restyles at once, from the page's own stylesheet, so a class the page does not have does nothing.

Type over text#

Double-click the selection's text to type over it where it is. Enter keeps it (Shift⇧+Enter is a new line), Esc puts the words back, and a click elsewhere keeps them.

Changes, undo and Show changes#

Every control, resize, spacing drag, text edit, class, picture and element added or deleted is a change, listed under Changes beside Design, with the same undo and redo (Ctrl⌘+Z and Ctrl⌘+Shift⇧+Z) and the same export as CSS, a diff or a prompt. A drag that sets two sides is one step to undo. Each element in Changes has a button to select it on the page and scroll it into view.

Show changes at the top switches every edit off, so you see the page as it shipped, and on again.