Edit Any Website With This Free Tool in 2024

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

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.

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.)

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.

Get Started with the Free Website Editor

In just a few minutes, you can initiate the utilization of this tool. Simply incorporate it into your bookmarks right from this post, and proceed to experiment with its features. The tool’s functionality extends to this very page as well! Feel free to provide us with a humorous headline or insert a couple of playful sentences – your creativity is welcome.

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.