Let’s say you’re screen-sharing during a meeting and you want to take some notes. You also want to screen-share said notes with the group to check that what you’re writing matches what they have in mind.

You could open VS Code or your favourite text editor. Or you could create a note using an online tool like GitHub’s gists.

Alternatively you can open your browser’s console and execute this arbitrary piece of JavaScript:

document.designMode = "on"

window.addEventListener("beforeunload", (event) => {
  if (!window.confirm()) {
    event.preventDefault()
  }
})

This code snippet does the following:

• Enables document.designMode to make the entire document editable
• Displays a confirmation modal if the user is about to leave the page. This part’s optional but I’ve included it as I’m the kind of person that would accidentally close a tab and lose all their stuff.

Here’s what it looks like in action:

It also works with empty HTML documents:

If you want to interact with the page again without losing your notes you can disable document.designMode by running the following:

document.designMode = "off"

Browser support

Both document.designMode and Window: beforeunload event are in Baseline widely available and have been supported by major browsers since 2015.

Other potential use cases

• Mockup copy changes
• Edit text on a random website for reasons
• Run your browser’s spell checker through the current page

Resources

• Document: designMode property - Web APIs | MDN
• HTMLElement: contentEditable property | MDN - Like document.designMode but scoped to specific elements
• Window: beforeunload event - Has some notes about potential caveats when using this event