How to edit any text on any page

Did you know that you can edit any text on any page?

You can put any page into edit mode, which allows you to edit any text as if it were a text editor.

There is a document.designMode property that controls whether the entire document is editable.

It can be useful for creating mockups and taking screenshots by any non-technical people to suggest some changes based on existing functionality.

You can use it to create mems and take screenshot 😁.

Simple (bookmarklet) version

You can create a bookmarklet to toggle edit mode on any page:

1. Right click on the bookmark bar -> 'Add this page to favorites'
2. Edit this bookmark -> right click and select 'Edit'
3. Update name & URL - copy and paste the following code into the URL field:

javascript:(function() { document.designMode = document.designMode === 'off' ? 'on' : 'off'; })();

Developer version

Right click on any page -> Inspect (open Dev Tools) -> Console -> document.designMode = document.designMode === 'off' ? 'on' : 'off'

Both methods should work in all major browsers.

Documentation on MDN

For non-technical users: this only changes the page on your computer and all changes disappear when you refresh the page.