Docs / On the page

Edit the page

Try a change on the live page before you touch your code: edit CSS rules the way DevTools does, rewrite text, move or remove elements, and get every change back as a diff you can copy or undo.

Switch to Edit mode#

Click the pencil at the right end of the dock. The switch turns green, the dock swaps its measuring tools for editing tools, and the side panel (if it’s open) shows two tabs: CSS and Changes. Click an element on the page to select it, then edit it from the dock or the panel. Click the square icon next to the pencil to go back to Inspect mode; your changes stay.

Edits only change the page in this tab. Nothing is sent to the website, and nothing changes for anyone else. Reloading the page brings the original back; your CSS changes are saved and come back when you turn TruePx on there again.

Text and HTML tools on the dock#

The keys act on the page only when you aren’t typing in a field, so they never get in the way of a form. A short message confirms each action (“Duplicated ✓”, “Deleted ✓ (Undo restores)”).

A common use: duplicate a card to see how the layout handles four instead of three, cut a section to see the page without it, or paste in the HTML of a component from your code.

The CSS tab#

With an element selected in Edit mode, the panel’s CSS tab lists every CSS rule that applies to it, in the order the browser applies them, like the Styles pane in DevTools, but editable in plain clicks.

From top to bottom:

• Header: the element’s selector, how many edits you’ve made, and a button to copy the selector.
• Applied styles: the declarations that actually win for this element, all in one place.
• Rules: first element.style (the element’s own inline style), then every matching rule, most specific first. Each rule shows where it comes from (a stylesheet file and line, or <style> for one inside the page). Rules inside @media, @supports or @layer are grouped under that condition. Declarations that lose to another rule are struck through.
• Inherited from: rules on parent elements whose inherited properties (color, font…) reach this element.
• Classes: the element’s class list, editable, with suggestions from classes used on the page.

How to edit#

• Change a value or property: click it, type, and press Enter.
• Turn a declaration off: untick its checkbox; tick it to bring it back.
• Add a declaration: click the closing } of a rule, or the empty space in element.style.
• Change a selector: click it and type a new one; the rule then applies to whatever the new selector matches.
• Add a rule: the + next to Rules creates a new rule for the selected element’s selector.
• Edit classes: click a class in Classes to rename or remove it, or add one.

Editing a rule changes every element that rule matches, exactly as changing it in your stylesheet would. To change only this one element, edit element.style.

Pick a CSS variable#

Sites built on a design system keep their fonts, colors, type sizes and spacing in CSS variables, such as --brand or --text-large--font-size. When you click a value to edit it, a list opens under it with the page’s variables that fit that property, so you can choose from the design system instead of typing or guessing:

• Used for this property on this page comes first: the variables the page’s CSS already uses for it, most used first (“15×”). Editing font-family lists the font variables; editing font-size lists the type scale.
• Used for similar properties: for example, a spacing variable used for margin when you’re editing padding, or a color used for borders when you’re editing color.
• Other variables that fit: variables the page doesn’t use yet whose value is valid here. Variables the page only uses for something unrelated are left out.

Each row shows the variable’s value on the selected element: a swatch for colors, and the size in pixels for rem, em, % or clamp() values (for example 18px · clamp(1rem, …, 1.125rem)). Type to filter by name or value, move with ↑ ↓ and press Enter, or click one. TruePx writes var(--name) as the value.

The list only offers what the site defines. If its CSS has no spacing variables, for example, editing padding shows no list, and you type a value as usual.

The Changes tab#

Every change on this page, as a diff, with removed lines in red and added ones in green: one block per changed rule, element.style or class list, and one per element whose text or HTML you changed. It includes colors changed by Fix all contrast issues and edits made by a connected AI agent. Use it to copy your changes into your code, or to undo them.

• Copy (on each block) copies the rule’s new CSS, ready to paste into your stylesheet. On a text or HTML block it copies the element’s new HTML (for a deleted element, the HTML that was removed).
• Revert (bin icon on each block) undoes that block’s changes: the rule, the style or classes, the element’s text, or the element put back where it was.
• Revert All (bin icon at the top) undoes every change on the page.

Changed your mind? Undo on the dock brings back what Revert or Revert All just removed.

Text and HTML blocks show the element’s HTML one tag per line, indented: Edit Text shows the changed line, a duplicated or pasted element shows added lines, and a deleted or cut one shows removed lines. A long diff (a deleted section, say) shows its first lines with Show N more lines under them.

The header counts the rules and the elements changed (“1 Rule · 2 Elements”), and your edits in total.

Saved edits#

CSS changes are saved in your browser: edits to rules (including rules you added), edits to an element’s element.style, colors from Fix all contrast issues, and an AI agent’s CSS edits. The next time you turn TruePx on there, they’re put back on the same elements, and a message says how many (“3 saved edit(s) re-applied — open Changes to undo them”). They’re listed in the Changes tab; revert them there to forget them.

Rule edits are saved for the page you made them on. To have them come back on every page of the site instead (an edit to the header’s rule, say), choose Save CSS edits for: The whole site in Settings; edits you make after that are saved for the whole site and apply on any of its pages that has the same rule. Edits to one element’s own element.style always stay with their page.

Class changes, text and HTML edits are not saved: they’re listed in Changes until you reload the page. A saved edit is skipped if the page has changed so that its element is no longer there as it was.

Settings lists every page and site with saved edits, with Clear for each and Clear all.

Saved edits never leave your browser; see what is stored.

Tips#

• To fix low contrast without guessing colors, use Fix all contrast issues in the Element tab: it finds the smallest color change that passes, and Undo brings the old color back.
• To check an edit at other screen sizes, open the responsive preview. Edit mode works inside each viewport.
• An AI agent connected through MCP can make the same kinds of edits; Undo on the dock takes them back too.