Javascript trick to edit the page displayed

Do you want to quickly edit the text of any webpage that you are browsing? Maybe you wanted to see how the site looks if you change some words. Here is a neat Javascript trick that you can use to edit the text part of the web page.

Do note that you can’t save the changed text onto the server or is this any means to hack a web server. If you refresh the page, all the changes you made will disappear. You can however save the resulting HTML if you goto File -> Save as.

Step 1: Drag thisĀ Edit/View bookmarklet into your bookmarks toolbar.

Step 2: Goto the web page which you want to edit and click on the bookmarklet – you will be put into the edit mode. Click the bookmarklet again and you will be put into the normal view mode.

Step 3: ?????

Step 4: Profit.

For those of you who like to know what it does beneath the scenes, it just sets two properties of the document to make it editable.

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

92 thoughts on “Javascript trick to edit the page displayed

  1. Pingback: Facebook Mahabharatha « Doing Jalsa and Showing Jilpa

  2. cnu Post author

    @qwerty
    You can save the resulting page as html file on to your disk. Unfortunately you cannot save the changes onto the server (if that is what you asked). That is the point of javascript.

    Reply
    1. CP

      My wife is helping to edit a website in Javascript, but doesn’t know how to save these changes to the website. How would she do this? If this is to complex to describe here, what reference would she need to consult to do this?
      Thanks,
      CP

      Reply
  3. lol cool

    lol i wish u could save these it would be so hilarious. i have a million things i would do with this if u could XD

    Reply
  4. Eclipse

    i went into CMD at my friends house and typed stuff really fast like:
    Net
    >
    Net user
    >
    Net Help
    >
    Help
    and then went into IE and got onto his myspace and started changing stuff xD it was fny

    Reply
  5. me

    lol i used it on my school’s website and showed everyone i knew to make it look like we didnt have school for three weeks it was AWESOME……but then i got suspended….

    Reply
  6. aaron

    very lol. i kno this dickhead who used this to trick me into thinking he was getting messages from this really hot chick saying they were together.. .lol pretty sad eh?

    Reply
  7. Pingback: we can no spamz? - Page 3 - World Dominance

  8. TOBY

    i edited my google.co.uk so instead of UK next to it it said we have cookies and i tricked my whole class into thinking google had a virus

    Reply
  9. syrish

    Hi,
    Its awesome what you can do, but i am facing a problem… how to paste the image on the page you want to edit.

    Can anyone reply please asap.

    I need it urgently

    Thanks

    Reply
  10. Andrew Harris

    @ syrish
    To paste an image on a page you want to edit just find the image you want to paste then right-click and do “Copy” then go to the page you want to add the picture too and do “Paste”.

    hope that help, if you have anymore question you can email me at: [email protected]

    Reply
  11. trevor.smokes

    okay i know this isnt kool but how can you make the edited content saved onto the page itself . i know it might be a stupid question . but if it can be done i would like to know how.

    please.help.me.edit.page.content.without.being.on.server.

    can i edit the page , and have the edited content saved onto the domain. thank you.

    Reply
  12. Java hacker

    In order to “save” it, you type this in javascript:document.body.contentEditable=’true'; document.designMode=’on'; void 0

    but really, all that happens is it changes YOUR INDIVIDAUL site, it doesn’t do anything for anyone else. Just you. But, if you have fire fox, it is possilbe to save it to your favorites, I think, so that would be a help, also, you still will be able to re-edit the site once you re insert the first code javascript:document.body.contentEditable=’true'; document.designMode=’on'; void 0

    the only diffrence is this: Javascript:document.body.contentEditable=’ true, {change this to false} ;document.designMode= ‘on’ {change this to off}; void 0{change this to the number ‘1’}. And there you have it:), enjoy!!!

    Reply
    1. dhanun

      how can i update ,delete .insert into the exisisting xml(employee details ) information using javascript .And updated information shold be save in the table.

      pls help me ….

      Reply
  13. Danny

    javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName(“img”); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position=’absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+”px”; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+”px”}R++}setInterval(‘A()’,5); void(0);
    THE BIG WHEEL

    This piece of code pulls off all the images from your web page and rotates them in a circle. Really makes any page go naked (without its images). The best place to test is a website with many images. (Google Images for an example)

    Reply
  14. Jon

    LOL I fooled my mom with this trick by editing wikipedia!
    XD I am definitely going to do it again some day!

    Reply
  15. lol

    lol i tricked my friends that in yahoo i was the number 1 in trending now lol really cool trick but how do you remove the red underline so it won’t be obvious?

    Reply
    1. Predrag

      Just right click on the screen, and toogle to this: Spell-checker options > Check the spelling of this field. Un-check that. And that’s the whole magic, but you can also use Google Chrome for trickin’ some n00bs, it’s better then this because it’s built-in development tools allow you so much more then this. Good luck anyways.

      Reply
  16. Dude

    This used to work for me, but now it doesn’t. Instead of letting me edit the page, the browser searches it on google. I’m not sure what happened. Can anyone explain?

    Reply
  17. Google Chrome

    There is a way you can do this in Chrome. Once you copy and paste this code, the “javascript:” part now gets cut off, but there’s a way you can still have fun playing around with the page:

    1. Copy and paste the “javascript:document.body.contentEditable=’true'; document.designMode=’on'; void 0″ to your address bar.
    2. At the beginning of the address, type “javascript:”
    3. Press Enter.

    Done! You can now start editing again.

    Reply
  18. mario BMC

    you can use the website if u change ‘true’ to ‘false’, till u quit out…
    i pretended to hack the CIA website and showed my friends…very funny…plus i pretended to hack the school server…speaking of hacking school stuff…try this website…-https://www.youtube.com or try going to google translate and typing http://www.youtube.com make sure to include all of the website…have fun hacking hopefully ull advance by curiosity

    Reply
  19. Spiderman

    Hey idiot it works for me it doesn’t fully copy the code when you copy and paste it with chrome smart one
    I would know you stupid nicky.
    So I’m going to go plays some pranks on people toodles!
    Megusta
    Trolololol

    Reply
  20. Nicholas

    Hey idiot it works for me it doesn’t fully copy the code when you copy and paste it with chrome smart one
    I would know you stupid nicky.
    So I’m going to go plays some pranks on people toodles!
    Megusta
    Trolololol

    Reply
  21. gaston

    hola, yo lo he utilizado hace bastante varias veces lo de poder editar la pagina, pero ahora no me deja, es posible que sea por la version nueva de firefox? lo probe en IE y me lo bloquea porque dice script peligroso bloqueado.
    antes lo usaba lo mas bien (mas de 6 meses atras)

    Reply
  22. whatever

    javascript:document.body.contentEditable=’false'; document.designMode=’off'; void 0 Type that to stop editing the page, so people don’t see through your trick. Also, make a bookmarklet for this by bookmarking this page, then edit the bookmark location to be the code.

    Reply
  23. Samuel Blake

    I need help, im using mozilla firefox and when i press enter it searches for it on google

    how can i prevent this?

    Thank you

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

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

    Reply
  25. Cuterbunny

    It works! Thank you. I am using Firefox. Just drag “edit/view” into your bookmarks, and then click it, and its done!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>