Edit the HTML of any website

Cut, copy, paste, duplicate and delete elements right on the page. Rearrange a layout in seconds, undo any step, and see every structural change as a markup diff.

What you can do

In edit mode the control bar at the bottom of the page turns into a set of element tools. Each one acts on the element you have selected:

• Cut: removes the element from view and holds a copy, ready to paste somewhere else.
• Copy: holds a copy of the element and everything inside it.
• Paste: inserts the held element inside the selected element, as its last child. Select a container first, then paste into it.
• Duplicate: clones the selected element and inserts the copy directly after it. Useful for adding another card, list item or button.
• Delete: hides the element from the page.
• Undo and Redo: step through your edits, CSS and HTML together, in the order you made them.

How to rearrange a page

1. Open the page you want to change.
2. Start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option + Shift + S on a Mac).
3. Click Edit (the pencil) in the control bar at the bottom of the page. The control bar switches to the editing tools and the side panel switches to the editor.
4. Click an element to select it. Press Alt + Shift + Up to select its parent, or Alt + Shift + Down for its first child.
5. Use the buttons in the control bar or the keyboard shortcuts below.

The shortcuts use Ctrl on Windows and Linux and Cmd on a Mac:

• Ctrl + C copy, Ctrl + X cut, Ctrl + V paste
• Ctrl + D duplicate
• Delete or Backspace delete
• Ctrl + Z undo, Ctrl + Shift + Z redo

These shortcuts only take over while edit mode is on, so the browser's own copy, paste and bookmark shortcuts work as normal everywhere else.

How the edits are handled

• Copies do not clash with the original. Duplicated and pasted elements have their id attributes removed, so the page never ends up with two elements sharing an id.
• Delete is reversible. A deleted element is hidden with display: none rather than destroyed, so undo, or reverting it from the Changes tab, brings it back exactly as it was.
• The page structure is protected. The html, head and body elements cannot be cut, copied, duplicated or deleted.
• Every change is tracked. The Changes tab shows each edited element as a line-by-line diff of its markup. Deleted elements appear as removed, duplicated or pasted ones as added. Each block can be copied, and blocks for elements still on the page can be reverted on their own.
• Undo is deep. The history keeps your last 50 steps.

Pair it with the live CSS editor and you have a quick prototyping loop: duplicate a section, restyle it, and compare the two side by side on the real page. To change the words inside elements, use Edit Page Text.

Limits

• Copy and paste work inside the page you are editing. Copy does not put the HTML on your system clipboard; use the copy button on a block in the Changes tab for that.
• Paste always inserts inside the selected element, at the end. To place an element between two siblings, duplicate a neighbour or paste into the parent and adjust.
• Edits only exist in your browser tab. Structure edits are not saved across reloads, so copy anything you want to keep from the Changes tab first.
• There is no free-form HTML text editor in the panel. If you use an AI coding agent, the MCP Server can insert or replace HTML on the selected element, with scripts and event handlers stripped out.

When it is useful

• Trying layout ideas. Reorder sections, remove clutter or add another item to see how a design holds up with more content.
• Clean screenshots and demos. Remove cookie banners, ads or private details before capturing a page.
• Testing content edge cases. Duplicate cards until a grid wraps, or delete items to see the empty state.
• Explaining a change. Show a developer exactly what should move, with the markup diff to back it up.

Cut, Copy, Paste and Manipulate HTML is a Studio feature. Every install starts with a free 7-day trial with everything unlocked, no card needed.

Common questions

Can I edit HTML on any website?

Yes, on any page your browser can open, including pages behind a login. It cannot run on chrome:// pages, other extensions or the Chrome Web Store.

Are the HTML changes permanent?

No. They change the copy of the page in your tab only. Reloading the page brings back the original, and nothing changes for other visitors. Copy the markup from the Changes tab if you want to keep it.

How is this different from editing HTML in DevTools?

DevTools has you edit raw markup in the Elements panel. Screen Ruler lets you work on the page itself: click an element and cut, paste, duplicate or delete it with one button or shortcut, then see every change collected as a markup diff with per-element revert.

Can I undo a delete?

Yes. Press Ctrl + Z (Cmd + Z on a Mac), or revert the element from the Changes tab. Deleted elements are hidden, not destroyed, so they come back exactly as they were.