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!
Watch as we edit a site:
Sincerely,
Neville N. Medhora
P.S. Let me know if this tool is helpful, and how you use it!
This tool is so handy!!
For real! I use it like everyday :)
Hi Nevile :)
First time for me :) Me too I use it maybe every day.
Can you write other devtools hack ?
Thanks.
Can I save the changes?
Just have to take a screenshot :)
can I change pictures too?
Yes! You can delete/add pictures with this script!
Hi, Neville!
This tool doesn’t work for me in Chrome or Safari.
Is it no longer supported?
Thanks!
Yup, still works great!
Can be done my editing inspect element also.
Yup! This is just way easier :)
Upgraded it to a toggle bookmark
javascript:document.body.contentEditable=(document.body.contentEditable==’true’?’false’:’true’); document.designMode=(document.designMode==’on’?’off’:’on’); void 0
you’re welcome
How could i not be aware of this code snippet before? Thank you for all of your content.
I tried editing using the JAVA…..IT WORKS…..ha…ha…ha…ha…ha…..love love it….I’M SOOOOOO……..HAPPY……
THIS is a Gem…….WATCH over and over again….
BEST TRICK EVER!!!!!!!!!!!!!!!!!!!!!!!!
my friends wouldn’t tell me, so i looked it up, took forever, and found this, so helpfull!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Thanks for this. Everything is fine but when I want to edit some text either on the web so on, it has red colour underline below each words. How to remove the red underline?
Thanks.
Take the same code, use it on this website, and replace editable=true with editable=false, then bookmark the =false one. When you’re done editing, click it, and they’ll go away.
THIS IS AWESOME!!!
but I am confused about why it does not publicly save because it says that contentEditible is true and that design mode is on so why does it not save?
Sorry but due to the fact this is 100% client side it will NOT save any changes!
I Just got rid of my whole entire school work lol
omg, i changed my grades and it was great i had soo much fun, thanks alot.
Thank you!!! This is so useful to know in some cases.
I love this, Thank you for this.
That looks fun! In Chrome, I usually do “Inspect Element” and edit the source code directly. But this approach is much easier when you just need to test out a copy.
it didn’t let me drag it because i am on mac do you have a solution?
If you press ctrl+shift+b the bookmarks bar comes up. Then u can drag
Hi
This is superb. I want to know how to edit backend code of the same website. Such as submission form, Contact form, Login Page, Database….etc. Help me thank you.
This is just for the front end!
Is it ok to use it in tablet or phone?
Is it permanent?
Yup use on whatever, an no it’s not permanent!
So this great for temporary use. I realized that after I refreshed the page, it went back to the original text. Is there any way around this?
The best site EVER! Thanks for doing it. My friend thinks I hack.
Bahahaha that’s hilarious, a lot of people think you’re “hacking” their site when they first see this 😂
can this kind of change could be permanent and could this change can see from any other computer?
Nope, it’s just temporarily on your browser, doesn’t actually change anything on the website!
Can I change pic too?
Yes, you can copy/paste in images or even delete images when the code in enabled.
It wont let me do it on another website how can i fix that.
you have to click on the edit thing you copied and pasted so that is how you start it up now click on a website and edit it it sould work
Hey thx for this it is really cool it helps with many things i can prank my parents.
Awesome, glad you liked it. Don’t play pranks that are TOO mean or just lying. Funny pranks accepted :)
Thank you for the wonderful bookmark! I really like JavaScript and such, so I made my own bookmark that makes it to where you can toggle the functionality.
javascript:(function(){if (document.body.contentEditable != ‘true’) { document.body.contentEditable = “true”; document.designMode = ‘on’; } else { document.body.contentEditable = “false”; document.designMode = “off”; }})()
Simply just highlight the above code then drag it into the bookmarks bar like before.
if I change something on this will it be permanent and if not how do I do it
It will not be permanent. Bookmark the link and click on it whenever you want to change it.
hey uuh… bro im trying to put it on my bookmarks bar but i highlight it and drag it to the bar and it won’t add it to my bookmarks bar. im so sad
It may be something with your browser. I have the same problem with google chrome, and what works for me is to go to the three dots in the right top corner, go to tools, and press developer tools. Then go to the console, and in the box that appears type in document.body.contentEditable = ‘true’; document.designMode=’on’; void 0
Hope this works for you!!
Is there any way to do this so the website will save the edit?
Doesn’t really work like that! You can take a screenshot if you want to save something :)
You can press ctrl+s to download changed page’s code to your computer
So I dont know how to put highlighted words onto the booksmark bars…
highlight as if you are going to copy, and then drag to the bar
how do i save the edited stuff?? or is this just for demo??
You can’t save this, it’s just on your browser. Try just taking a screenshot :)
When I highlight as if I am going to copy, and then drag to the bar, it is not staying there.. What should be done?
You can press ctrl+s to download changed page’s code to your computer
Hie… How do I use this Using a Lenovo 2 A10 tablet?
I use Google chrome
Just copy the blue text code and drag it to your Chrome bookmarks bar!
I been using this method for almost 12 years. I now just use inspect. But if you’re using a phone or tablet, or simply having prob dragging, or bookmarking here’s how. Highlight the whole thing copy &paste it in browser. Then scroll to the first section of link you will have to type javascript: in the URL since it removes it when you paste.
If you want to bookmark it first click on bookmark page (any page) then change name to what ever you want, then change URL with copy&paste
Thank you Neville, it works beautifully. Looking forward to more of your newsletter.
Anybody know how to get this to work on clickfunnel pages?
Works everywhere else except web pages built on clickfunnels.
There are certain services that run like Clickfunnels or LeadPages where this script will not work on those pages. But it works on almost every other type of webpage like CNN.com or even this very page :)
How do u get rid of the icon to return back to normal?
Hie Neville how are you… This is genius hey
How do I use this on my Lenovo Tablet 2 A10.. I use Google Chrome
Love the tip yet it doesn’t seem to work on my Chrome in Mac. Any idea?
press mouse right click and press inspect there you found console copy & paste this script to the console window then exit element you have done now you can edit any thing
to save your editing press ctrl + s then save window appears then click on the save as & select complete web page then click OK you are done now you can open any time this edited page by opening HTML page in your save directory
I could hug you, Neville. This is seriously awesome.
Let’s figure out how to change our bank account numbers on the bank’s end with this… :)
Wouldn’t that be super! Im really excited about the future.
Thank you “Neville” this was an awesome trick it worked really well.
Glad you liked it Maria. It’s a super helpful tool to demonstrate how text will look on a site!
Is there a way to save your changes? Or is this to play around with editing.
It’s simply to play around and demonstrate copy. You can always take a screenshot!
to save your editing press ctrl + s then save window appears then click on the save as & select complete web page then click OK you are done now you can open any time this edited page by opening HTML page in your save directory
darn, it works good, just sad to say i can’t change my grades :(((
Bahahhaha…..if only it could :-P
That is awesome… Thank you…
You’re very welcome, enjoy this trick!
Hello! Obviously, it doesn’t permanently edit the page, correct? It’s just so we can screenshot and show the client. Thanks!
That’s right, it DOES NOT permanently edit your page. Just reload the browser and everything will be back to normal :)
to save your editing press ctrl + s then save window appears then click on the save as & select complete web page then click OK you are done now you can open any time this edited page by opening HTML page in your save directory
Thanks for this trick man!
Glad you liked it Robert!
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.
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!
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.
I see you already answered my question on this page LOL just one more–I tried to drag something somewhere else on the page and it didn’t go. Can you drag things using this trick? Thanks!
It depends on the website. Keep in mind this isn’t a full web editor, it’s just a little trick that works on almost every website, but when it comes to formatting and dragging, it might perform differently on different websites!
to save your editing press ctrl + s then save window appears then click on the save as & select complete web page then click OK you are done now you can open any time this edited page by opening HTML page in your save directory
to save your editing press ctrl + s then save window appears then click on the save as & select complete web page then click OK you are done now you can open any time this edited page by opening HTML page in your save directory
how can i do this using an android phone
i don’t know how to use
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!
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. :-)
What a great tool. Thanks! :-)
I’ve already got some websites in mind to temporarily tamper with. tee hee
Awesome!
This works even on iphone :)
I’m trying to figure it out how to save the script into my bookmarks…
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!
Ah ah simply genius! Thank you Nev :-)
No prob Nicola, very glad you liked the little tool :)
Haha, this is great. So easy. Thanks man!
Thanks Jeffrey, glad you liked. Hope you use it wisely (or un-wisely) :-P
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!
This is so awesome! Thanks for this tool. It makes showing how I’d change pages for clients way easier!!!
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 :)
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 ;)
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
This is O for Owesome! Cheers Nev.
Nice cheesy dad joke Ricksta ;)
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 :)
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 :)
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 :)
Niiiiiiiiice!!!!Thanks
Welcome Thomas, use it wisely my friend!
This is an awesome tool. I’m having a lot of fun with it!
Excellent…..it will serve you well Sarah :)
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!
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!
But surely wasn’t it only YOU who could see these changes?
How would you use it whilst on a call with a client, such as skype etc, because again, it would only be visible in my browser not on the clients browser, while we discuss website changes etc?
thanks
Rad. Thanks so much for (finally) sharing this toy!
hehehhe…I’ve been hogging my little secret forever ;)
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.
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!
This is incredible! Thanks for sharing!
Glad ya liked it Chelsea, use it wisely :)
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.
Oh, great! Thank You- it’ll help me enrich my portfolio :)
Glad you liked it Jerzy!
Incredibly badass. Hell yeah
Thanks Chris! Use it wisely my friend :)
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.
Neville, you are the king :)
tnx.
FYI… to turn it off without reloading page
javascript:document.body.contentEditable = ‘false’; document.designMode=’off’; void 0
Oh cool Jeff, thanks!!
Nice Trick bro, please is there anyway I can make my website look like some other person’s own?
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 :)
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
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.