How to edit the webpage in realtime on the browser itself using JavaScript?

Originally posted here!

To edit the whole webpage in realtime in the browser, you can use the property called designMode in the global document object and assign the value of on or off using JavaScript.

// Make webpage editable realtime in browser 🚀
document.designMode = "on";

To turn off the editing in the browser, you can assign the value off like this,

// Turn of real-time editing in browser
document.designMode = "off";

See the above code in action in JSBin.

Feel free to share if you found this useful 😃.

---