JavaScript to Edit Web Page Directly

Sam Deering

I’ve posted this script on the blog before in a joint post, but as I really do love it i thought it deserved it’s own post. With this awesome script you can edit any web page you want live in the browser. You can change text, move images around, re-align components, whatever you want really. Great for web designers who want to quickly show changes in a web page to a client for example.

JavaScript Edit Web Page Directly

Simply copy and paste this code snippet into the address bar and press enter.

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

jQuery Visual Event

If you’re interested in quickly seeing what elements on a page have jquery events attached to them then this bookmark script is just for you! Click the button below to test it out!

Visual Event


  1. Drag+drop the ‘Visual Events’ bookmark button below onto your toolbar
  2. Visit Web Page
  3. Click Bookmark
  4. Change Underwear


Get your free chapter of Level Up Your Web Apps with Go

Get a free chapter of Level Up Your Web Apps with Go, plus updates and exclusive offers from SitePoint.

  • Harlem

    Awesome tool! Best tip of the month. Showing all javascript attached.

    Just tried this on Found out that their logo has the following js-code:

    1 function onload(event) {
    2 && lol();
    3 }

    lol?! ;)

  • Bob

    “Javascript edit web page directly” would be a great help to me except when I exit the page after making a change, the change does not appear on the site the next time I go to it. I don’t see a way to register the change.

    What am I missing?