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.

Here is a gif of me editing the webpage live in the browser using the document.designMode property in the console.

Feel free to share if you found this useful 😃.