Edit text on any website
Turn the whole page into an editable document. Click into any headline, button or paragraph and type, while links and buttons stay still so you can edit without leaving the page.
What it does
Edit Text makes every piece of text on the page editable at once. Click anywhere and type, the same way you would in a document: rewrite a headline, shorten a button label, paste in real copy or test how a long German word breaks a layout. The page keeps its own layout and styles while you type.
How to edit text on a page
- Open the page you want to change.
- Start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option + Shift + S on a Mac).
- 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.
- Click Edit Text (the Aa button) in the control bar.
- Click into any text and type.
- Click Edit Text again when you are done.
While text editing is on, the other control bar tools are dimmed so nothing else gets in the way. Selection outlines, rulers and the layout grid are hidden until you finish.
Built so the page does not fight back
Making a live website editable usually breaks something: a click on a link navigates away, a menu opens, a form submits. Screen Ruler handles that for you:
- Links and buttons do nothing. Clicks, pointer events and form submissions are stopped before the page's own scripts see them, so you can place the cursor inside a link or button and edit its label.
- Paste is plain text. Pasting from a document or another site inserts the words only, never the formatting or markup that came with them.
- Enter adds a line break inside the current block instead of splitting it into new elements.
- Formatting shortcuts are blocked. Commands like bold, lists and links that would wrap text in new elements are ignored, so a stray shortcut cannot change the page structure.
- Spellcheck is off while you edit, so red underlines do not change how the page looks.
- Web components are included. Text inside open shadow roots is editable too.
Every text change is tracked
Before your first keystroke changes an element, Screen Ruler takes a snapshot of it. When you finish, the Changes tab in the side panel shows each edited element as a line-by-line diff of its markup, original against new. You can copy any block, revert one element to its original text, or clear everything at once. Text edits sit alongside your CSS edits and HTML edits in the same list.
Limits
- Text edits change the page in your tab only. They are not saved across reloads and other visitors never see them. Copy what you want to keep from the Changes tab before you leave.
- Text editing pauses the rest of the tools. Turn it off to select elements or edit CSS again.
- Pasted text arrives without formatting. To restyle text, use the CSS editor after you finish typing.
When it is useful
- Copywriting in context. See how a new headline or call to action reads on the real page, at the real size, next to the real images.
- Testing content length. Check what happens to a card, button or nav item when the text is twice as long, or translated.
- Mockups and screenshots. Replace placeholder or private text before capturing a page for a presentation or bug report. See element screenshots.
- Content review. Fix typos and wording on a staging site and send the diff to whoever owns the copy.
Edit Page Text is a Studio feature. Every install starts with a free 7-day trial with everything unlocked, no card needed.
Common questions
How do I edit text on a website in Chrome?
With Screen Ruler active, switch to Edit mode, click Edit Text in the control bar, then click any text on the page and type. Click Edit Text again to finish.
Is this the same as typing document.designMode = "on" in the console?
It starts from the same idea, but adds what the console trick lacks: link clicks and form submits are blocked, pasted content is plain text, Enter does not create new elements, and every change is tracked as a diff you can copy or revert.
Do my text changes stay after I reload the page?
No. Text edits live in your browser tab only and reset when the page reloads. Copy anything you want to keep from the Changes tab first.
Can other people see the text I change?
No. The change happens only in your own browser. The website and its other visitors are not affected.