🖌️ Turn Any Webpage Editable Using document.designMode
Have you ever wanted to quickly change the content of a website? And did you know that there is an easy way to do this for any website?
The global document object has a property called designMode, that can be either "on" or "off". By default, it is turned off.
How to enable Design Mode
Open the Dev Tools in your browser, then go to the “Console” tab. Enable designMode for the current page by entering the following code: document.designMode = "on"
Once we’ve entered the code, we can select any text on the website and rewrite it instantly.
Browser Support
This feature has been part of the HTML standard for a long time, so it has excellent browser support. Almost every browser and every version supports it.
If you enjoyed reading this article, think it’s helpful, or have any other feedback, feel free to drop a comment below 👇.
If you’d like to connect with me, add me on LinkedIn, GitHub, or Instagram.
In Plain English 🚀
Thank you for being a part of the In Plain English community! Before you go:
- Be sure to clap and follow the writer ️👏️️
- Follow us: X | LinkedIn | YouTube | Discord | Newsletter
- Visit our other platforms: Stackademic | CoFeed | Venture
- More content at PlainEnglish.io