Automatically reload the frontend when content changes are saved in the panel.

Overview

Kirby Reload On Save

This plugin for Kirby 3 automatically reloads the frontend when content changes are saved in the panel.

It uses the Broadcast Channel API to communicate between panel and frontend. There is no build tool or npm install necessary, so the plugin can be used both in your local development and your production environment.

preview.mp4

Clicking "Save" or using CMD+S / CTRL+S saves the content and reloads the frontend.

Installation

Download

Download and copy this repository to /site/plugins/kirby-reload-on-save.

Git submodule

git submodule add https://github.com/junohamburg/kirby-reload-on-save.git site/plugins/kirby-reload-on-save

Composer

composer require junohamburg/kirby-reload-on-save

Setup

Enable the plugin in your config using in the ready option shown below. That way, the plugin is only active when the user is logged in and it does not interfere with the Kirby cache.

site/config/config.php

<?php

return [
  'ready' => function ($kirby) {
    return [
      'junohamburg.reload-on-save' => [
        'active' => $kirby->user() !== null
      ]
    ];
  }
];

Tip: If you only want to enable the plugin in your local development environment, use domain/environment specific config files: Kirby docs

How it works

The plugin uses the Broadcast Channel API to communicate between tabs: One Broadcast Channel is added in the panel, another one is added in the frontend using a page.render:after hook. When the user saves content changes in the panel, the Broadcast Channel in the panel sends a message to the frontend to reload the page.

Limitations

  1. This plugin will reload any open page in your frontend. There is no distinction which page (or file or user) was saved in the panel – only if the page belongs to the same site.
  2. Uploading files, adding new pages, changing the page title or other actions that do not trigger a content/save action in the panel will not reload the frontend automatically.
  3. The Broadcast Channel API is supported by any modern browser, except Safari 15.3 and older: Can I Use

License

MIT

Credits

You might also like...

Implements live reload functionality to Adobe extension development.

Adobe Live Reload Adobe Live Reload implements live reload functionality to Adobe extension development. Features Reload Adobe Extensions on file save

Apr 24, 2022

Browser tab reload automation.

SpeedFeed Browser tab reload automation. Report Bug · Request Feature · View License (back to top) Contributing Contributions are what make the open s

Aug 10, 2022

Detect webpage updates and notify user to reload. support vite and umijs

English | 简体中文 plugin-web-update-notification Detect webpage updates and notify user to reload. support vite and umijs. Take the git commit hash as th

Dec 26, 2022

Demodal is a browser extension that automatically removes content blocking modals including paywalls, discount offers, promts to sign up or enter your email address and more.

Demodal Demodal is a browser extension that automatically removes content blocking modals including paywalls, discount offers, promts to sign up or en

Jan 4, 2023

↕️ A little Alpine.js plugin to automatically resize a textarea to fit its content.

↕️ Alpine Autosize ↕️ A little Alpine.js plugin to automatically resize a textarea to fit its content. 🚀 Installation CDN Include the following scri

Nov 5, 2022

A simple mod that researches content automatically!

A simple mod that researches content automatically!

Auto Research A simple mod that researches content automatically! Algorithm Description Looks up for avaliable tech nodes with all the objectives comp

Sep 7, 2022

A project that let's you see a list of scores using an API, you can add ypur own and it will be saved on the list forever

Leaderboard This is a project that let's you see a list of scores using an API, you can add ypur own and it will be saved on the list forever! Built W

Mar 4, 2022

A remote nodejs Cache Server, for you to have your perfect MAP Cache Saved and useable remotely. Easy Server and Client Creations, fast, stores the Cache before stopping and restores it again!

A remote nodejs Cache Server, for you to have your perfect MAP Cache Saved and useable remotely. Easy Server and Client Creations, fast, stores the Cache before stopping and restores it again!

remote-map-cache A remote nodejs Cache Server, for you to have your perfect MAP Cache Saved and useable remotely. Easy Server and Client Creations, fa

Oct 31, 2022
Releases(1.0.1)
Owner
JUNO
JUNO is a branding agency for design-oriented brands.
JUNO
JOSE ZEPEDA 10 Nov 18, 2022
A status monitor for Elite Dangerous, written in PHP. Designed for 1080p screens in the four-panel-view in panel.php, and for 7 inch screens with a resolution of 1024x600 connected to a Raspberry Pi.

EDStatusPanel A status monitor for Elite Dangerous, written in PHP. Designed for 1080p screens in the four-panel-view in panel.php, and for 7 inch scr

marcus-s 24 Oct 4, 2022
Gatsby-Formik-contact-form-with-backend-panel - Full working contact form with backend GUI panel.

Gatsby minimal starter ?? Quick start Create a Gatsby site. Use the Gatsby CLI to create a new site, specifying the minimal starter. # create a new Ga

Bart 1 Jan 2, 2022
A modern client panel for the Pterodactyl® panel, made by Wrible Development.

Dashboardsy A modern client panel for the Pterodactyl® panel, made by Wrible Development. Support Discord: https://discord.gg/zVcDkSZNu7 Screenshots S

Wrible Development 23 Jan 1, 2023
Wrap a function with bun-livereload to automatically reload any imports inside the function the next time it is called

bun-livereload Wrap a function with bun-livereload to automatically reload any imports inside the function the next time it is called. import liveRelo

Jarred Sumner 19 Dec 19, 2022
A frontend framework containing of tools for fast development of dashboard, panel, etc.

Khaos-Admin A frontend framework containing of tools for fast development of dashboard, panel, etc. Tools We Provide Fast Development: We handle data

Hamrah Mechanic 7 Nov 27, 2022
cpace - nodemon for C/C++ files. Monitor for any changes in your [.c] and [.cpp] application and automatically restart it - perfect for development

cpace cpace is a tool that helps develop [.c] and [.cpp] based applications by automatically restarting them when file changes are detected. The packa

null 17 Dec 3, 2022
Refresh - Simple browser reload on file change middleware for your Deno web applications.

refresh Simple browser reload on file change middleware for your Deno web applications. Usage To use refresh middleware, just add a few extra lines to

Craig Morten 13 Dec 19, 2022
Live Reload Examples

Live Reload Examples Examples of live reloading code to create a fast feedback loop. Examples in this code repo accompany a soon to be published blog

Ashley Davis 16 Sep 29, 2022
This experimental library patches the global custom elements registry to allow re-defining or reload a custom element.

Redefine Custom Elements This experimental library patches the global custom elements registry to allow re-defining a custom element. Based on the spe

Caridy Patiño 21 Dec 11, 2022