By Sam Deering

JavaScript to Edit Web Page Directly

By 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


  • 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?

Get the latest in JavaScript, once a week, for free.