LeaVerou / refresh-it

Refresh page resources without a page reload. An alternative to the heavyweight processes that take over your local server.

🔄 Refresh It!

A set of bookmarklets to refresh page resources without a page reload. An alternative to the heavyweight processes involving local servers.

In 2008, Paul Irish posted the first Refresh CSS bookmarklet to refresh all stylesheets on the current page. Despite the amount of tools, plugins, servers to live reload released over the years, I kept coming back to it, so eventually I decided to improve it.

It works everywhere: locally or remotely, on any domain and protocol. No need to set up anything, no need to alter your process in any way. You can use the local server you want, or even — the horror! — none at all. It quietly just accepts your preferences and workflow instead of trying to change them. Sure, it doesn't automatically detect changes, but in most cases, I don’t want it to.

Will correctly refresh:

• CSS:
  • <link rel="stylesheet">
  • @import in <style>
• Images:
  • <img src>
  • SVG <image> with either href or xlink:href
• Media:
  • <video src>
  • <video poster>
  • <audio src>
  • <source> in <video> and <audio>
• Embeds:
  • <iframe>
  • <embed>
• Resources in (same-origin) iframes — even iframes within iframes!
• Resources in (open) Shadow roots

Usage

If you’re reading this on a GitHub or npm README, visit https://refresh-it.verou.me/bookmarklets.html and drag the bookmarklets to your bookmarks bar. Otherwise, you can drag them from below.

🔄 CSS

🔄 Images

🔄 Embeds

🔄 Media

🔄 Resources

Credits

• Paul Irish, for the original bookmarklet
• Maurício Kishi, for making the iframe traversal recursive (comment)