Live Editing

Edit any element's CSS straight from the side panel, watch every change accumulate as a diff, and duplicate elements into the dock to sketch layout variations without touching source code.

CSS Editor Pro

Switch the dock to Edit and click any element. The side panel turns into a CSS editor showing the styles applied to that element. Type a new value and the page updates as you type.

CSS editor in the side panel showing the styles applied to a selected element — The editor shows the styles applied to the selected element, ready to change.

State forcing lets you preview :hover, :focus, :active, and :visited styles without needing to actually hover or focus the element. Pick a state from the editor header and changes apply only while that state is active.

Stylesheets hosted on a different domain are normally invisible to extensions. The editor offers a one-click prompt to grant access, after which those rules show up alongside the rest.

Media Queries Pro

When the selected element has rules declared inside an @media block, the editor splits the styles into one section per media context. The base styles sit at the top, then each matched @media appears in the same order it does in the source.

Edits in a media section land in that context only. Change a value inside @media (max-width: 768px) and it applies at narrow viewports without touching the base styles. The Changes tab keeps each diff wrapped under its @media block, so the copied output reads back as valid, ready-to-paste CSS.

State forcing combines with media. Pick :hover from the editor header and edit a value inside an @media section to layer the override into both dimensions at once.

Changes Tab Pro

Every edit you make is tracked in the Changes tab next to the editor. Each element you've touched gets its own block showing a diff of what changed, with the original lines marked as removed and the new lines marked as added.

Changes tab showing a diff of edits per element with removed and added lines — Each edited element has its own diff block in the Changes tab.

Click the selector at the foot of any block to jump back to that element on the page. The copy action turns the block into ready-to-paste CSS for your real stylesheets. The revert action wipes that element's changes, and a Clear All Changes button at the top empties the whole log in one go.

HTML Editing Pro

Edit mode also lets you change the page's structure, not just its styles. The dock turns into a set of element-level tools: Cut, Copy, Paste, Duplicate, Delete, Undo, and Redo. Each acts on whichever element you have selected.

A duplicated element inserted into the page next to the original via the dock's Duplicate action — Duplicate clones the selected element and inserts the copy right after it.

Combined with the CSS editor, that gives you a full prototyping loop without ever leaving the page or touching source files.