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

by Jeff Starr on Sunday, July 20, 2008 2 Responses

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!

About the author

[ Jeff Starr ]

Jeff Starr is a web developer, graphic designer and content producer with over 10 years of experience and a passion for quality and detail. Jeff is co-author of the book Digging into WordPress and strives to help people be the best they can be on the Web. + Follow Jeff on Twitter and subscribe to Perishable Press for quality web-design content delivered fresh.


2 Responses

Add a comment

[ Gravatar Icon ]

Tony#1

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 ]

Jeff Starr#2

You already are cool, Tony! ;)

Share your thoughts..

Read Comment Policy

Comment Rules: No spam. No profanity. Use your real name. You may use simple HTML tags for style. Wrap all code in <code> tags. Learn more.



Attention: Do NOT follow this link!