This is how you can edit any website directly from your browser:
Step 1.) Highlight the text in the blue box:
javascript:document.body.contentEditable = 'true'; document.designMode='on'; void 0
Step 2.) Drag the highlighted text into your bookmarks bar.
Step 3.) Click the icon whenever you want to edit any page!
Try it for yourself:
Click this link, and instantly you’ll be able to edit the text on this page from your browser. Reload the page if you want to quit editing.
There’s a bunch of useful AND silly uses for this little editing hack!
A Helpful Use:
If you’re a copywriter doing consulting session with a client, you can edit their page live to show them how it will look:
A Fun Use:
Make your bank balance look super huge! Move over Bill Gates, my BankOfAmerica account now has billions of dollars:
This helpful little bookmark has been extremely useful for me through the years, hope you enjoy it too!
Sincerely,
Neville N. Medhora
Dude, this is super useful for testing out copy. Thank you.
Thanks Reed! I find it useful for a lot of different reasons too, enjoy!
Is the change permanent?
That really worked !! like magic ! Thx soo much !
I tried copy paste text directly from word document but the style automatically changed. is there any tricks to help me copy text on a page and keep the original style ?
If for some reason you are pasting in text from a Word doc, on a Mac you can press ‘Shift + Command + V’ and it will strip the copied text of formatting and paste it without changing font.
Sooo tempted to use this on Trump’s website and screenshot it for twitter!
Pity this tool can’t add an up vote button.
Still not there yet Marc :)
Hahahha…..it’s definitely good for faking funny news articles :-P
I use Firebug to make these and also design changes. You can also use “Inspect element” in chrome.
Then I send screenshots of it to my clients and sometimes even the new html code so they only have to copy-paste.
Yeah there’s a lot of other ways to do this…..but for the general public, I’ve always found they like this super-simple bookmark! Thanks Stefano :)
FYI… to turn it off without reloading page
javascript:document.body.contentEditable = ‘false’; document.designMode=’off’; void 0
Oh cool Jeff, thanks!!
Neville, you are the king :)
tnx.
This will come in handy with websites I build out for clients, thanks!
I’ve also forwarded the email you sent to my fiance who is a copywriting and branding consultant. She’ll get a kick out of this!
Awesome Kyle! It’s a super useful trick….it’ll go a looonngg way especially for building out sample copy for websites.
Incredibly badass. Hell yeah
Thanks Chris! Use it wisely my friend :)
Oh, great! Thank You- it’ll help me enrich my portfolio :)
Glad you liked it Jerzy!
I just use the built in chrome inspection tool, no need for any added JS.
I use inspect for certain design aspects……but this is WAY faster than hunting through HTML to change text since you can immediately edit things on the front end.
Also WAY WAY easier for newbz like me.
This is incredible! Thanks for sharing!
Glad ya liked it Chelsea, use it wisely :)
This is way too cool. I have been playing with my friends facebook statuses and sending them screenshots of my changes. Hey Nev can you recommend a good web host for startups? Particularly if I wanted to do reseller hosting for my clients?
Hey Schar, glad you’re getting a kick out of it :)
Basic Hosting: I think BlueHost.com might be cheapest/best value.
Do-it-yourself: If you have someone technical enough to deal with it, use Amazon AWS (super cheap, but need some technical chops).
Advanced-but-reliable Use WPengine.com ….it’s only for WordPress…….but once you start with them, you’ll never have a WordPress issue again (self hosting wordpress in my experience gets dicey every 6 months).
Good luck Schar!
OH MY GOD. YOU ARE MY SAVIOR! This will be AMAZING to make portfolio pieces as a copywriter. I was finding it very time consuming to photoshop everything and find the proper font and everything. Thanks Neville.
AWESOME!! So happy this helps you Alex :)
Small hack = Big savings.
Rad. Thanks so much for (finally) sharing this toy!
hehehhe…I’ve been hogging my little secret forever ;)
Love this tool. Now time to think about who to fool with the tool. Thanks!
Lol….the first time I figured this out I was making fake New York Times articles and posting them on friends Facebook walls all over the place!
I usually use Chrome Dev, but this would be handy.
If you want better control over editing, try these Chrome Extensions:
1. PageEdit
2. Stylebot
Thanks
I think this is better for a QUICK LITTLE CHANGE rather than Chrome dev.
Will check those out, thanks for the tips Karim!
This is an awesome tool. I’m having a lot of fun with it!
Excellent…..it will serve you well Sarah :)
Niiiiiiiiice!!!!Thanks
Welcome Thomas, use it wisely my friend!
This is a great (and fun) tool! Thanks, Neville.
PS – I took the steps and went ahead and reloaded this page. Here’s a screenshot of my first go with it: http://joeltimothy.com/millions_while_you_sleep/
Bahaha niceee! See how fast it was to mock up a website?? No more tedious Photoshopping :)
What concerns me is that there are many unscrupulous actors on the web who will use this to phony up their ad copy to make their sales results look better than they are. “Look, see? It’s on my bank’s statement,” or the like.
Otherwise, as you suggested, this looks quite useful as an educational tool.
Lol…..people have “Photoshopping” pictures since the dawn of…well….PICTURES!
This is a simple trick anyone can do….and most people use it for helpful stuff :)
Cool tool for sure but I could see the misleading ways people could use it. Sigh… You cannot believe everything you see on the internet.
True……but people could do this LONG before this trick. It’s used more for good than bad :)
This is O for Owesome! Cheers Nev.
Nice cheesy dad joke Ricksta ;)
Thanks for sharing this! I plan on using it professionally (collaborating with web development and copywriting clients) but let’s be honest. I’m having too much fun f***ing with friends on Facebook first.
This tool just made my life better. Thank you :)
You’re very welcome Caryn! Professional use is great…..using it to mess with friends IS BETTER :-D
Hey Neville,
I dragged the code to my bookmarks bar and then clicked it on a couple of sites, but nothing happens.
I also tried clicking the “Click this link” under the Try This Yourself sub-head above, but that only opens a blank new tab page.
I’m using the latest version of Mozilla Firefox. Any ideas what’s wrong?
Hey Raspal, it should work just fine in FireFox.
I know it works great in Chrome (which like….EVERYONE uses)! Try it in Chrome.
Good luck getting it to work. Someone else simply re-loaded the page in FireFox and it worked.
Tried it in Chrome and it works like a charm!
In Mozilla FF, the problem seems to be the %20% when dragging the code. I tried removing those spaces and they come back.
BTW, did you read my experiment post I published last year? It attracted 3000+ comments. Here’s a screenshot: http://prnt.sc/ablba3 :D
Bahahaha, NICEE!! I see you’ve got the hang of it ;)
I been using this since you mentioned it in an earlier writing course from a couple of years ago. Cool ish!
Glad you picked it up then! I’ve been telling people about this little hack forever, but just somehow never put it into a blog post till now :)
This is so awesome! Thanks for this tool. It makes showing how I’d change pages for clients way easier!!!
For those having difficulties: Copying and pasting the code directly won’t work on Chrome; as it will often remove the ‘javascript:’ so be sure to add the required ‘javascript:’ before ‘document.body’ so it obviously looks like this:
javascript:document.body.contentEditable = ‘true’; document.designMode=’on’; void 0
As seen above. Then press enter = MAGIC! Such edit, much change, wow.
I think it’s generally easiest to highlight the text in the blue box….then just “drag” the text to the bookmarks bar. That seems to work really well.
Thanks for the suggestion Rage!
Haha, this is great. So easy. Thanks man!
Thanks Jeffrey, glad you liked. Hope you use it wisely (or un-wisely) :-P
Ah ah simply genius! Thank you Nev :-)
No prob Nicola, very glad you liked the little tool :)
Also I use Firebug or Inspect Element to change the code of web pages, but I find this just as extraordinary method. Thank you very much!
Awesome!
This works even on iphone :)
I’m trying to figure it out how to save the script into my bookmarks…
What a great tool. Thanks! :-)
I’ve already got some websites in mind to temporarily tamper with. tee hee
P.S. Even after 2 modules I’m already seeing crap copy everywhere (not to mention the manipulative sh*t you get in your mailbox every day.) So thanks for the course. I’m learning a lot. :-)
Hey Neville, have you tried this tool? It does exactly the same as this Javascript but it makes changes permanent and visible to other visitors (so you can actually improve your clients websites copy directly):
https://www.alterly.com
(if it’s not useful, feel free to flag it as a spam. But hopefully it’s not :) )
I finally wanted to give this a try, but can’t get it to work in Chrome when used as a bookmark. It works in FF. It works when I click the link in the article. I’ve double-checked the code in the bookmark. I’ve restarted the browser. I’m on a Macbook. Anything I’m missing?
Just follow the directions, it’s working just fine in Chrome for me and others!
i don’t know how to use
why do my changes and edits delete after I reload the page? is it SUPPOSED to do that??
Yes, this is just a script that runs on your web browser, it doesn’t actually change your real webpage content.
This little script is soooooo tight. I thought Dev Tools were cool….but I fell of trying to learn Front End a long time ago. Thanks man!
Google Chrome: Right click on the bookmark and select edit. There is a place for the name and one for the URL. Sometimes the script will be in the bookmark name instead of the URL. Copy and paste it into the URL field. A name is not required but you can give it any name you want.