Design mode
One line in the console turns any web page into a draft you can write in directly, without touching the code.
What is designMode?
document.designMode is a property in the document. It first showed up in Internet Explorer in the late nineties, then became part of the HTML5 standard, and today it's supported in every browser: Chrome, Firefox, Safari and Edge.
When you turn it "on", the whole page becomes editable: you write, delete and change any text in it directly, as if every element had contenteditable on it.
When do you need it?
- All the edits in one go: instead of writing every edit to the AI on its own, edit all the text on the page directly, then copy the result and give it to the AI to apply in the code in one shot.
- Quick text tryouts: change a sentence, delete an image, or switch a word from Arabic to English, and see how it looks on the page right away. Faster than asking the AI for it, especially if you're comparing lots of suggestions.
- Catching spelling mistakes: with designMode on, the browser's spell checker works on the page's text, so the wrong words show up with a red line after you click inside the text.
The code and usage
Write this in the Console or in a JavaScript file:
document.designMode = "on"; // turn on document.designMode = "off"; // turn off // onoff wnta btklmny xD
The edits are temporary, and they disappear the moment you refresh the page.
Other solutions
A. Add it as a Bookmark
Make a new bookmark (Ctrl + D), and in the URL field delete the link and put this code in its place.
javascript:(() => {
document.designMode = document.designMode === "on" ? "off" : "on";
})()
The code toggles designMode: if it's on it turns it off, and if it's off it turns it on.
B. Ready-made Extensions
designMode's limits
Every iframe is a separate document, so when you turn on document.designMode in the main page, it only affects that page's own document.
1. Use $0
Using Inspect, pick the <iframe>, then in the console we'll write $0, which is a shortcut for the last element you picked in Elements:
$0.contentDocument.designMode = "on"; // or $0.contentDocument.body.contentEditable = "true";
2. Change the context from the Console
We use this way if the iframe is from another origin. At the top of the console there's a list with top written in it, and that's what decides the document the code will run in. Pick the iframe from it, then run the normal line:
document.designMode = "on"; // now runs inside the iframe
And if you pick any element inside the iframe from the Elements tab, the console moves to the same iframe automatically.
Best practices
1. Use right click with links and buttons
A normal click on a link or a button runs it (takes you to another page or fires its action) instead of putting the cursor inside it. Right click puts the cursor inside the text without running anything, so you can edit it safely.
2. Don't delete all the text
If you delete all the text inside an element, the element itself gets deleted with it, and its styling goes too. Leave one letter or a dot, write the new text, then delete the extra letter.
3. If the right click menu is annoying you
Close it from the console:
document.addEventListener("contextmenu", (e) => e.preventDefault());
4. Or block all the links and buttons
Instead of right click, stop any link or button from working when you click on it, so you can edit it with a normal click:
document.addEventListener("click", (e) => {
if (e.target.closest("a, button")) {
e.preventDefault(); // links don't navigate
e.stopPropagation(); // buttons don't run their actions
}
}, true);
Both settings go back to normal with the first page refresh.