Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Search in posts
Search in pages

Instant Reload

What is Instant Reload?

Local’s Instant Reload feature saves you time so you never have to click “refresh” in your browser again. Instant reload is helpful for:

  • Working with your code and browser side-by-side: Maintain flow-state and streamline previewing your CSS changes.
  • Debugging file changes: Local displays a log stream of your latest changes which helps make sure new changes are detected and displayed. 
  • Make edits in real-time: Changes are displayed immediately meaning you’ll never have to clear your cache again.

Where can I get Instant Reload?

The easiest way to get the Instant Reload is to install it from the Add-ons tab within Local.

Screenshot of the Local Add-ons library which includes the Instant Reload add-on.

Using Instant Reload

All of the Instant Reload functionality can be found within the “Instant Reload” section of the “Tools” tab in Local.

The general flow of using this tool looks like this:

  1. Enable Instant Reload for the site
  2. Open the site within a browser. You’ll know that Instant Reload is working correctly if you see the “Instant Reload Enabled” message in the upper-right corner of the browser.
  3. Edit a CSS file in your editor of choice. Once that file is saved, Instant Reload will automatically refresh those styles in the browser!

Local keeps a session log when a CSS file has changed. To view that log, navigate to the “Instant Reload” section of the “Tools” tab.

note

Instant Reload is enabled on a per-site basis. Once you’ve enabled Instant Reload, it will automatically start up when using Local in the future.

Instant Reload only watches wp-content/plugins and wp-content/themes for changes to .css files.

Changes that are made using page builders or other WordPress plugins which do not persist their changes to the filesystem will not be refreshed.

FAQs

Why isn’t Instant Reload detecting my changes?

There could be a number of reasons for this. Here are some common things to check:

  1. Ensure that you are editing a CSS file within either the plugins or the themes folder of the site.
  2. Make sure the styles are specific enough. Using the Browser’s developer tools, inspect the styles for the element you are working on and ensure the style that’s being written is specific enough.
  3. Disable any caching plugins on the Local site.

Still not working? Simplify the networking setup and try switching to localhost routing mode.