1. Website Planet
  2. >
  3. Blog
  4. >
  5. Edit Any Website With This Free Tool in 2020

Edit Any Website With This Free Tool in 2020

Sophia Conti
October 15, 2020

We’ve found a nifty little tool that will help you test how content looks BEFORE clicking the publish button. It lives in your bookmarks bar, and when you want to test a change on a website, you simply click the button and type whatever changes you’d like to make.

How to Install the Tool

Installing the free website editor tool is very easy. Simply highlight the code below and drag it to your bookmarks bar, where it will automatically save.

Here is the code to copy:

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

Edit Any Website With This Free Tool in 2020

Now, it’s extremely tricky to get a single line of code like this to work perfectly on every device and browser, so you may need to troubleshoot a little. Here are some of the things I learned as I tested this tool:

  • If the code doesn’t save as a bookmark: Try adding it manually. Open your bookmark settings, click “Add new bookmark” (or equivalent field), and paste the code into the URL line. Name your bookmark something clear and concise, and try to edit a webpage.
  • If the code saves, but doesn’t let you edit webpages: You might need to make slight edits to the code. When saving as a bookmark, your browser might replace spaces with percent signs (%) or other characters that break the code. Edit your bookmark, and remove any extra characters. Be sure the code you have bookmarked exactly matches the code written above.

Many browsers guard against the use of Javascript code like this, so you may find it more finicky to use depending on what browser you’re running it on. Google Chrome did not let me save it as a bookmark. Safari and Microsoft Edge did, but I had to edit the code for spacing.

How to Use the Tool

Once you’ve installed the tool, all you have to do is navigate to the webpage you want to edit and click your bookmark. When you click on the page, you’ll see a flashing cursor that indicates you are ready to edit.

How the free website editor tool works
A silly example of how the tool works in real-time.

You can make whatever changes you like to the text of the page after clicking the bookmark. You can’t edit images or move buttons, but you can see if a headline is too long to fit on one line or if removing a paragraph will change the layout of your page above the fold.

Once you’ve made your changes, you can take a screenshot to save whatever you were experimenting with – there’s no other way to preserve your edits. To stop the tool from operating on your webpage, refresh the page. This will also make any changes you’ve made disappear.

Why Is This Tool Useful?

This tool is definitely fun to play with – I got a few laughs making funny news headlines and sending them to my dad – but we’re not here for pranks or becoming a fake news generator. We’re here because this tool is a simple, powerful way to test marketing or layout changes without having to edit source code or access a website builder.

Here are a few ways you can use this tool:

  • Test a headline to see if it fits in your layout
  • Experiment with paragraph length and formatting
  • Create several mockups of a webpage to show clients or stakeholders
  • Set up wireframes for a designer or developer to reference
  • Make multiple versions of landing pages to narrow down the options for an A/B test

Here’s an example. In the image below, I’m trying to see if I can add more text to this Apple landing page without needing a fourth line of copy. It works, but I can also see that I liked the original layout better. The whole process of testing this took about 30 seconds. (The process of typing perfectly so I could record the gif took about 10 minutes.)

Example of using the website editor tool
With this tool, you can try dozens of options without having to save, preview, or revert your changes.

If you’re a bit more code-savvy, you might be wondering why we wouldn’t just tell you to use the Inspect Element tool to edit the source code directly. It’s built in to the browser, so why not use that?

Well, you could go that route, but this tool is a much easier way to make quick, front-end changes. You don’t need to hunt for the right spot to change the HTML, because you can just click on the headline and start typing.

And of course, if you’re going to install this tool, you might as well have some fun with it. I enjoyed making myself look like a millionaire and daydreaming about the giant library I’d build in my house if I had this kind of money.

Example of using the website editor tool
Sadly, this balance decreased dramatically when I refreshed the page.

Get Started with the Free Website Editor

You can start using this tool in just a few minutes. Add it to your bookmarks directly from this post, and then test it out. It will even work on this page! Give us a funny headline or add a silly sentence or two – we don’t mind.

Once you’ve figured out how it works, you’ll be amazed at how handy this little piece of code can be. It will live in your bookmarks bar, happy to help any time you need to make a quick change to show your web developer or create a simple mockup to prove to a client that your idea will actually look exactly the way they want it to.

Like this fun editing hack? Share it with others on Facebook and Twitter!
Inside this Article
How to Use the Tool
Why Is This Tool Useful?
Get Started with the Free Website Editor
Rate this Article
4.0 Voted by 3 users

Any comments?

Required Field Maximal length of comment is equal 80000 chars Minimal length of comment is equal 100 chars
0 out of minimum 100 characters

Related posts

Show more related posts

We check all user comments within 48 hours to make sure they are from real people like you. We're glad you found this article useful - we would appreciate it if you let more people know about it.

Share this blog post with friends and co-workers right now:

We check all comments within 48 hours to make sure they're from real users like you.

Once a month you will receive interesting, insightful tips, tricks, and advice to improve your website performance and reach your digital marketing goals!

So happy you liked it!

Share it with your friends!