Featured hack: Making web pages editable in your browser

View demo Get the code


Featured hack: Making web pages editable in your browser

Want to make a quick edit to a mockup or play around with the text from a web page, without having control panel access? You can follow these quick steps to make any web page editable via a handy bookmark in your browser (the changes will be for your own display of course, not to how the page appears publicly). 

To make a page editable you can: 

  1. Select CMD + D to edit a bookmark. 
  2. On the Edit Bookmark popup that appears, select More
  3. Enter the name of the new bookmark (e.g. “Make editable)
  4. Paste the following line of code into the URL line: javascript:document.body.contentEditable %3D %27true%27%3B document.designMode%3D%27on%27%3B void 0
  5. When you are on a page where you would click to edit the text, click the bookmark.
  6. Now you can start replacing the text with anything you would like (note: to keep a copy of your creations, you’ll need to save the page as a PDF or take a screenshot - it will revert to the actual text when you refresh). 

PDF and web editing now only takes a click. Practical jokes on friends and family encouraged, but please use responsibly (we don’t want to contribute to the fake news cycle!).

We love hearing about upcoming projects and campaign ideas. Get in touch to request a free consultation today!

Contact us