Live Text Editor

Live Text Editor lets you click any text on the page and type over it. The change happens in the page itself, so you see the real layout adjust as you edit instead of guessing from a mockup.

Editing Text

1. Click the InspectDev icon to open the side panel
2. Select Live Text Editor from the toolbar
3. Click the text you want to change — the element gets a blue outline and becomes editable
4. Type your replacement text

While the tool is active, the panel shows a green EDITING badge plus the element's tag, class names, and font size, so you always know exactly what you're changing.

Switching Elements

Click another piece of text to move the editor to it. The element you just left keeps the text you typed — switching doesn't undo your work.

Restoring an Element

Press Escape to stop editing and restore the element to its original text. If you've changed several elements and want to start over, reload the page: every edit is in-memory only and is discarded on reload.

What It's Good For

• Checking how real copy fits a layout before a developer touches the source — see whether a headline wraps to three lines at 24px
• Mocking up screenshots for a design review or a client presentation
• Testing long strings, empty states, and translations without editing the CMS

What It Can't Do

Edits are local to your browser tab. Nothing is saved, submitted, or synced, and no one else sees them. Live Text Editor changes what's rendered on screen, not the underlying HTML document — so a refresh always brings the original text back.

Tips

• The editor works on text nodes only. To change images or attributes, use the Element Inspector
• Combine it with Responsive Checker: rewrite a headline, then check the panes to confirm it still fits at every width
• If a change makes the layout jump, that's the useful signal — the original copy was doing real work in the design