Monday 9 Feb 2009

Edit any web page in a browser

HTMLIt's possible to use any browser like an HTML editor. :-o

Of course, the page is not really modified, just refresh it to recover the original. But it allows you to easily makes some tests on any web site:

  • Check the appearence with a very long title, on the contrary a very short article. We can verify the "resistance" of our design to the text modification.
  • Edit a title or a column to see if it's more visually attractive.
  • Even move or resize images.

All that of course just to see, because there is no way to get the modified HTML code.


To do this, just paste this in your address bar:

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

For your convenience, you can create a new bookmark with this line as address. By assigning a keyword (Opera, Firefox) you could find it in 2 keystrokes. :-)


This small magic Javascript code tells the browser that the entire page is editable. As if it's a text field on a form. So the browser allows you to type anything you want. And because it's HTML, you can also copy the images.

Depending on the browser, you can even see the anchors to resize images.



Some clever guys would probably also find applications to make jokes or fake screenshots (change the 1st result in an search-engine on a very competitive term, change their number of visits ...). ;-) However, remember to remove the cursor from the end of the line, before taking the screenshot!

cafĂ© Did this article help you? 
Buy me a coffee!

11 answers at “Edit any web page in a browser”

  1. 1
    Peter ( said:

    This is a nice demonstration that anything transported over the network can be considered out of date as soon as it leaves the source.

  2. 2
    bls said:

    When I do this in firefox, I can save the modified page.

  3. 3
    Anselm Bradford ( said:

    For quick textual and image edits, this is a great little JS snippet. For more in-depth live preview editing, I would note that FireBug can do this to the source of a webpage, offering much more that can be directly manipulated, such as the CSS ( ... plug-ins-for-css-development/). However, FireBug is for FireFox only.

  4. 4
    dron01 said:

    Thanks! Good tip! :)

  5. 5
    David ( said:

    bls, when I save, I still get the original page on FF. :-|

    Anselm Bradford, of course, there are also the plugin Web Developper and DragonFly in Opera. More powerful, but more complicated.

  6. 6
    Inpatient Heroin Detox Center said:

    I tried this technique on IE and it works like a charm :) And I was also able to save it. Really cool tip David, thanks!

  7. 7
    Animal jewelry said:

    Wow! Never thought it was possible using any browser! I should give this one a try! Thanks mate.

  8. 8
    traffic school online california said:

    Can it be done in IE 8 also? Will I get any error with this process?

  9. 9
    Cheap Pizza said:

    Thanks for this very useful info you have provided us. I will bookmark this for future reference and refer it to my friends. More power to your blog.

  10. 10
    Rufus ( said:

    Impressive demo, it's all about convenience!

  11. 11
    Noosa Accommodation said:

    Next you're gonna have to teach us how to make a pizza in a browser.

Azure Dev