Updated on June 12th, 2018 in #dev-environment

Temporarily Edit Text on Any Website

When making certain types of edits on a page, having an instant feedback loop directly in your browser is really beneficial.

Quick Jump: Demo Video | But Why?

Here’s how to edit any website in your browser:

1. Make sure your bookmarks bar is visible (check your browser’s settings)

2. Select the text below:

   javascript:document.body.contentEditable = true; void 0;
   

3. Drag the selected text into your bookmarks bar

4. Click that bookmark button and start editing the text on any page

When you’re done editing, you can reload your browser to revert it back to normal. Keep in mind you’ll lose all of your changes when you do that. Try it out here by clicking this link.

Demo Video

But Why?

You might be thinking, “Um, cool story, but why would I ever want to do that?”, and that’s a fair question to ask!

When editing a template with most popular frameworks, the typical workflow looks like this:

1. Edit code in your editor
2. Save the file
3. Switch focus to your browser
4. Reload (or use live reload if your web server supports it)
5. Look at the place on the page where you expect your changes

That’s a 5 step operation, and while it might be fairly fast, it’s a ton of micro-actions that drain you. It can be very distracting depending on what you’re doing.

Here’s why I do this sometimes:

1. On this site, when trying to get a title to fit perfectly on 1 or 2 lines, I want immediate feedback and waiting ~3 seconds for Jekyll is too disruptive.

2. The same goes for editing descriptions or other situations where all I’m doing is manipulating a few sentences of text to see how it fits.

3. Sometimes I’m hired to write copy for people or companies and doing temporary live edits on their page over a screensharing session is super useful.

Once you’re happy with the results, you can move the final text over to your code editor so you can persist the changes.

What are you going to use this trick for? Let me know below!