You’re browsing the web and you encounter a great website that fills you with inspiration.

Maybe it’s one of your competitors’ site, or maybe it’s even a completely unrelated website – but whatever the case, you feel there’s something to it when you see it. Something you wish you could bring back to your project, or, at least, something you could tell your developer(s) to implement in your own webpage.

But it’s their website, not yours, and you can’t even preview how would it look if it talked about your project instead of theirs. Or can you?

Take Mailchimp, for example. This is their website:

Say you liked their website and would love to test ideas right on it to take inspiration for your project. Wouldn’t it be awesome if you could just edit it?

Today we’re going to learn to do exactly this: take a website, no matter who owns it, and edit it to preview significant changes (texts, images, elements…)

There are different methods to achieve this. The first two ones require some coding knowledge and are limited, but free – the last one is a one-click solution that will handle everything for you without even seeing a single line of code.

Method 1: turn contenteditable on

One of the most popular methods out there is turning on contenteditable, a browser feature that activates the editable mode in text fields across a page. This method only allows you to change texts – but nothing more than that. You will not be able to edit a website to delete elements, change images or styles.

To perform this method, you need to:

1. Right click on any spot in the website, select “Inspect Element”
2. In the window or pane that shows up, locate the JavaScript console
3. Copy and paste the following code into the JavaScript console:
   document.body.contentEditable = ‘true’;
4. Press Enter

Now if you select a text field you’ll be able to write over it, instead of just selecting the text.

Pros:

• It’s free

Cons:

• Requires some technical knowledge
• Words tend to appear as misspelled with a squiggly red line underneath, killing the user experience and look and feel
• Doesn’t handle image changes
• Can’t delete elements
• You can’t edit links or buttons
• You may accidentally lose all your changes if you mistakenly exit the website

Method 2: use this code bookmarklet

This method is just a more convenient way of performing the last method. What we’re going to do is create a bookmark that encapsulates the necessary JavaScript code to turn contenteditable on but it’s more convenient because it’s accessible right from a bookmark in the bookmark bar, without having to copy and paste the code every single time.

However, you still won’t be able to edit pictures, delete elements, change styles, etc. This will only be solved with the third method.

To create the bookmarklet, highlight the text below:

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

And then drag and drop it into the bookmarks bar of your browser. To use it, click the bookmark.

Pros:

• It’s more convenient than writing the contenteditable code every time

Cons:

• Doesn’t fix any of the problems the previous method had
• You can’t turn the contenteditable mode off for the page unless you reload it, making the edited page unusable until you reload and lose your changes.

Method 3: use this one-click Chrome extension

Making quick edits to a website often requires a big range of functionalities that are not limited exclusively to changing text. This is why this Chrome extension exists, to take the methods above to the next level and empower digital professionals with the right tools to make quick edits to a website without depending on a technical partner.

This Chrome extension it’s called Edit, and you just need to install it and click its icon to turn the current website instantly editable:

It sells for $15, and you can check it out here:

Pros:

• Extremely convenient, just one click
• No need to have any programming or technical knowledge – or see a single line of code
• Allows you to delete elements altogether
• Allows you to change styles
• Allows you to change images as well as texts
• Doesn’t alter the user experience
• Prevents you from exiting the website in the middle of an edit

Cons:

• It’s a paid app, but if you use this on a daily basis it’s well worth it and will save you lots of time.

Conclusion

There are a few different methods that allow you to turn any website editable, but some are very inconvenient and limited for a professional use (need coding knowledge, can’t edit images, can’t delete elements, can’t edit links or buttons…); while others, like the Edit Chrome extension, are a convenient, one-click solution that add a lot of features to just being able to edit texts.

The post How to edit a website – even if it’s not yours! appeared first on Edit: the Chrome extension to edit any webpage, no code required.