# Live reload ## About the feature By default, customizing element markup, styles, and scripts requires reloading the page each time to see the changes, which can be time-consuming and frustrating. Many modern frameworks, such as Next/Nuxt.js and Laravel, offer a live reloading feature. While the exact implementation varies between frameworks, the general idea is the same: updating the changed piece (HTML or CSS) automatically and in the background, without noticeable and time-consuming page updates. As a modern and modular framework, Advanced Views provides live reloading out-of-the-box. Advanced Views may be the only WordPress-related framework currently offering this feature. ## Benefits * Automatically refreshes the changed element (HTML/CSS/JS) without reloading the entire page. * Automatically refreshes the page when you press 'update' on the page. * Works with and without [File System Storage](/advanced-views/templates/file-system-storage.md) active. * Functions for both local and remote websites. * Only available for Admins making it more secure. ## How to use the feature 1. Visit any page where a *Layout* or *Post Selection* is used (or create a new one). 2. Hover over the 'Advanced Views' item in the top admin bar and click on 'Enable Live On-page Reload'. This action adds a special query argument to the URL and reloads the page (only once). Once the page is in live reload mode, you should see a colorful dot in the bottom-left corner of the screen. The colors indicate the current state: * **Green**: The page is up-to-date. * **Orange**: The reloader is checking for potential changes. * **Blue**: The reloader has entered 'inactive' mode. * **Red**: An error has occurred (check the browser console for details). {% hint style="info" %} Pro tip: You can precisely configure the reloader timeouts in the plugin settings. {% endhint %} ## Known Limitations In some cases, *Layout* and *Post Selection* updates cannot be applied in the background and require a full page reload. This will automatically trigger a full page reload instead of a background update in the following cases: * Markup changes in *Layouts* with Gutenberg blocks. * Markup and CSS changes when the 'Declarative Shadow DOM' option is active. * Pages without a post ID (e.g., CPT archive, single taxonomy, etc.). #### Tailwind You can use the live reloading feature with Tailwind, but be aware that during background updates, the Tailwind class merging feature will be skipped. This means that the same rules (e.g., `flex{}`) may appear multiple times. This won't hinder your development process, and you shouldn’t worry about duplicates, as this issue occurs only with the active live reload mode. For convenience, the `!important` rule is automatically added on the server side to all Tailwind @media rules, ensuring the correct appearance regardless of the style order. ## Behind the scenes In case you're wondering about what happens behind the scenes or how it works. Advanced Views provides a special REST API endpoint. When the feature is enabled, Advanced Views adds a JavaScript script to the page. This script keeps track of the *Layouts* and *Post Selections* used on the page and their code field hashes (Template/CSS/JS). It periodically requests the server and sends the list along with the hashes. The server checks if the hashes are still current; if they have changed, it sends the updated markup, CSS, and JavaScript to the client, which then applies the changes. Although this scheme uses timers (with a default 5-second delay), you shouldn't worry about server load. We have optimized the process to be as lightweight as possible, minimizing server strain. We encountered several challenges in implementing this scheme but have kept the explanation straightforward. #### Why Timers instead of File System Events? PHP does not have file change events and does not run continuously in the background (unless it’s a separate CLI app), so using timers is the only viable option. This method is also universal, as it works on websites including remote servers, unlike Vite, which relies on file system events and may not be suitable for all environments. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://wplake.gitbook.io/advanced-views/templates/live-reload.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.