Use Your Browser to Edit Any Live Web Page Using a Single Line of JavaScript

Post #583 categorized as Websites, last updated on Jul 20, 2008
Tagged with browsers, javascript, tips, tricks

This was just too juicy to pass up. Blogstorm recently blogged about an easy JavaScript technique for making any website editable. After checking it out for myself, I just had to share it here at Perishable Press. Here it is:

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Paste that single line of code into the address bar of any modern browser and have fun editing the page. Obviously, any changes will only apply to the page as seen in your browser, not the original document. Even so, it’s a fun trick to play around with, snap screenshots, be creative, etc.

Go ahead — amaze your friends!

Subscribe to Perishable Press


2 Responses

TopLeave a comment

[ Gravatar Icon ]

#1Tony

Hi Jeff,

Cool trick! I do that with Firebug all the time, which not only lets you edit text, but everything (but you already know that, of course, just letting the other readers know). And I use it often to make that field on the adwords keyword tool a lot bigger than it is (3em height only).

The only thing I didn’t use Firebug for, is to amaze my friends. Thanks for the idea! I’m going to be so cool now! 8-D

[ Gravatar Icon ]

#2Jeff Starr

You already are cool, Tony! ;)

Share your thoughts..

TopRead official comment policy

The rules are simple. Comment intelligently. Stay on-topic. Don’t spam! Suspected spam will be deleted. Use your real name or nickname, not a site name or business name. Using a site name or business name is a good way to get your link or comment removed. Certain comments are moderated; if your comment does not appear after several days, or if you wish to comment privately, contact me. Also, by posting a comment, you grant this site a perpetual license to reproduce your comment, name, and website URL. Lastly, you may use basic HTML markup, but please do not use <pre> tags. Instead, wrap your code with <code> tags. Use a new set of <code> tags for each code term or phrase, as well as for each individual line of code (i.e., multiple lines of code require multiple code tags). Please see the complete comment policy for more information.