Live Reload for TYPO3

Targeted live reload for TYPO3

Reload only
affected pages.

Save a Fluid file or content in the TYPO3 backend. Only browser tabs that use the changed file or record reload. Other tabs keep their state.

Install the extension Read the full documentation

TYPO3 13.4 or 14.3+ · PHP 8.2+ · Open source

Two change sources Connected
F
Fluid file savedHomeTeaser.html
C
Content savedtt_content_42
Only matching pages reload
↻
HomepageUses the changed file or content
Reloads
—
ContactNot affected
Stays
—
News overviewNot affected
Stays
Two change sourcesFluid file edits and backend content changes use the same targeted flow.
AutomaticNo browser extension and no manual refresh.
SafeInactive for visitors and never blocks an editor save.

What it reloads

Fluid file and content reloads use the same rule.

A browser tab reloads when its rendered tags overlap with the tags of a change.

01 Code editor

Fluid file reloads

Save a Fluid template, partial, component, or ViewHelper. Rendered-file tags identify every page that used it.

  • Knows which files each page rendered
  • Uses the existing Vite dev server
  • Keeps normal CSS and JavaScript HMR
02 TYPO3 backend

Content reloads

Save a page, content element, or another record. TYPO3 cache tags identify every open page that shows it.

  • Works through Vite or polling
  • Useful for development and staging
  • Supports custom extension tags

How it works

Three small steps.

  1. 1
    A change creates tags

    For example, file:packages/site/Partials/Teaser.html or tt_content_42.

  2. 2
    The tags reach every open tab

    Vite pushes them over its WebSocket. Without Vite, logged-in editors can use polling.

  3. 3
    Each tab checks its own tags

    A matching tab reloads. A tab without a match does nothing.

Setup

Install the package.
Connect Vite for Fluid reloads.

1

Install with Composer

This activates content reloads in the Development context.

Terminal
$ composer require --dev wazum/typo3-live-reload

Upgraded sites must enable the frontend.cache.autoTagging feature toggle — it is on by default only for new TYPO3 installations. Without it, content reloads only trigger for edits on the exact page you are viewing.

2

Add the Vite plugin

This enables targeted reloads for Fluid files and ViewHelpers. The plugin is included in the Composer package; no npm package is needed.

vite.config.ts
import { defineConfig } from 'vite'
import { liveReload } from
  './vendor/wazum/typo3-live-reload/Resources/Private/Vite/dist/index.js'

export default defineConfig({
  plugins: [
    liveReload({ watch: { paths: ['packages'] } }),
  ],
})
Installation details and configuration →

Practical details

Designed to stay out of the way.

Nothing for visitors

Outside Development, only logged-in backend users receive live reload on explicitly allowed contexts.

Saves stay reliable

Broadcasting happens after the response. A failed broadcast never breaks an editor action.

Works with CSP

Injected scripts automatically use TYPO3's Content Security Policy nonce.

You stay in control

Pause a session in the Admin Panel or replace the reload with Turbo or your own browser code.

Live Reload for TYPO3

Less manual refreshing.
More focused work.

View on GitHub ↗ Open on Packagist ↗