Livewire v3 Internals: Morph, JS Hooks & Alpine | Mohamed Said [ ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed Said Laravel Backend Engineer ](https://msaied.com) [ Home ](https://msaied.com) [ Projects ](https://msaied.com/projects) [ Articles ](https://msaied.com/articles) [ Certificates ](https://msaied.com/certificates) [ Contact ](https://msaied.com#contact-section) [ ](https://github.com/EG-Mohamed) [ Home ](https://msaied.com) [ Projects ](https://msaied.com/projects) [ Articles ](https://msaied.com/articles) [ Certificates ](https://msaied.com/certificates) [ Contact ](https://msaied.com#contact-section) [ home ](https://msaied.com) [ articles ](https://msaied.com/articles) Livewire v3 Internals: Morph Markers, JS Hooks, and Alpine Integration On this page 1. [ Livewire v3 Internals: Morph Markers, JS Hooks, and Alpine Integration ](#livewire-v3-internals-morph-markers-js-hooks-and-alpine-integration) 2. [ How Morph Markers Work ](#how-morph-markers-work) 3. [ The JS Hook System ](#the-js-hook-system) 4. [ Alpine Integration: Entangle and $wire ](#alpine-integration-entangle-and-codewirecode) 5. [ Key Takeaways ](#key-takeaways) ![Livewire v3 Internals: Morph Markers, JS Hooks, and Alpine Integration](https://cdn.msaied.com/382/655b68a2b350b6d1a8963b6772b58379.png) #livewire #laravel #alpine #javascript Livewire v3 Internals: Morph Markers, JS Hooks, and Alpine Integration ======================================================================== 7 Jul 2026 3 min read ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said Table of contents 1. [ 01 Livewire v3 Internals: Morph Markers, JS Hooks, and Alpine Integration ](#livewire-v3-internals-morph-markers-js-hooks-and-alpine-integration) 2. [ 02 How Morph Markers Work ](#how-morph-markers-work) 3. [ 03 The JS Hook System ](#the-js-hook-system) 4. [ 04 Alpine Integration: Entangle and $wire ](#alpine-integration-entangle-and-codewirecode) 5. [ 05 Key Takeaways ](#key-takeaways) Livewire v3 Internals: Morph Markers, JS Hooks, and Alpine Integration ---------------------------------------------------------------------- Livewire v3 rewrote its JavaScript core from scratch. If you have ever wrestled with unexpected DOM resets, Alpine state loss, or mysterious re-renders, the answer is almost always in three places: morph markers, the JS hook system, and the Alpine entangle bridge. Understanding these internals turns debugging from guesswork into precision. --- ### How Morph Markers Work When a Livewire component re-renders, the server sends back a fresh HTML snapshot. The client-side morpher (`@livewire/morph`) walks both the old and new DOM trees and patches only what changed — similar to morphdom, but Livewire-aware. To anchor this diff, Livewire injects invisible HTML comments around dynamic regions: ```xml {{ $count }} ``` These markers tell the morpher where a keyed block starts and ends. If you remove them — for example by stripping HTML comments in a CDN or build pipeline — the morpher falls back to a full subtree replacement, which destroys Alpine component state. **Practical rule:** never strip HTML comments from Livewire responses. Add an exception in your Vite/webpack HTML minifier: ```javascript // vite.config.js export default defineConfig({ build: { minify: 'terser', terserOptions: { format: { comments: /\[if (BLOCK|ENDBLOCK)\]/ }, }, }, }); ``` --- ### The JS Hook System Livewire exposes a first-class hook API that lets you intercept the full request/response lifecycle from JavaScript. This is the correct place for things like global loading indicators, analytics events, or third-party widget re-initialisation. ```javascript import { Livewire } from '../../vendor/livewire/livewire/dist/livewire.esm'; Livewire.hook('request', ({ uri, options, payload, respond, succeed, fail }) => { // Mutate outgoing payload payload.fingerprint.extra = { timezone: Intl.DateTimeFormat().resolvedOptions().timeZone }; succeed(({ snapshot, effects }) => { // Runs after a successful server round-trip console.debug('Component updated:', snapshot.memo.name); }); fail(() => { document.dispatchEvent(new CustomEvent('livewire:error')); }); }); ``` Available hooks include `component.init`, `element.init`, `element.updating`, `element.updated`, `commit`, `request`, and `message`. The `commit` hook is particularly useful — it fires synchronously before the morph, giving you a chance to snapshot third-party widget state and restore it after. ```javascript Livewire.hook('commit', ({ component, commit, respond, succeed, fail }) => { const chartInstance = Chart.getChart(component.el.querySelector('canvas')); const zoom = chartInstance?.getZoomLevel(); succeed(() => { if (zoom) chartInstance?.zoomScale('x', zoom); }); }); ``` --- ### Alpine Integration: Entangle and `$wire` Livewire v3 ships Alpine as a first-class dependency. Every Livewire component automatically gets an Alpine scope, and `$wire` is a reactive proxy to the server-side component. ```xml Open Modal content ``` `entangle` creates a two-way reactive binding. By default it defers the server sync until the next Livewire network request. Pass `.live` to push changes immediately: ```xml ``` For read-only access without a network round-trip, use `$wire.get('property')` inside Alpine expressions. It reads the last known snapshot value synchronously. **Avoid this anti-pattern:** duplicating state in both `x-data` and a Livewire property without entangle. You end up with two sources of truth that diverge on every re-render. --- ### Key Takeaways - Morph markers are HTML comments — protect them from minifiers or suffer full subtree replacements. - Use `Livewire.hook('commit')` to snapshot and restore third-party widget state around re-renders. - `$wire.entangle` is the correct bridge for two-way Alpine ↔ Livewire state; `.live` pushes changes immediately. - `$wire.get()` is synchronous and reads the snapshot — use it for read-only Alpine expressions to avoid extra requests. - The `request` hook lets you inject metadata into every outgoing payload without touching PHP. Found this useful? [ ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fmsaied.com%2Farticles%2Flivewire-v3-internals-morph-markers-js-hooks-and-alpine-integration-2&text=Livewire+v3+Internals%3A+Morph+Markers%2C+JS+Hooks%2C+and+Alpine+Integration) [ ](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fmsaied.com%2Farticles%2Flivewire-v3-internals-morph-markers-js-hooks-and-alpine-integration-2) Frequently Asked Questions ---------------------------- 3 questions Q01 Why does my Alpine component lose state after a Livewire re-render? The most common cause is stripped HTML comments. Livewire uses comment-based morph markers to anchor DOM diffing. If your build pipeline removes HTML comments, the morpher falls back to full subtree replacement, destroying Alpine's reactive scope. Whitelist Livewire's `[if BLOCK]` comments in your minifier. Q02 When should I use `$wire.entangle` versus `$wire.get`? Use `entangle` when you need two-way synchronisation between an Alpine variable and a Livewire property. Use `$wire.get('prop')` when you only need to read the current snapshot value inside an Alpine expression without triggering a network request. Q03 What is the difference between the `commit` and `request` hooks? The `request` hook wraps the full HTTP round-trip and lets you mutate the outgoing payload or react to network-level success/failure. The `commit` hook fires per-component, synchronously around the morph phase, making it the right place to preserve third-party widget state that would otherwise be destroyed by DOM patching. Continue reading More Articles --------------- [ View all ](https://msaied.com/articles) [ ![HTTP Query Method Support in Laravel 13.19](https://cdn.msaied.com/394/4c917aad559beddb5eeb9a7a1e107f4c.png) Laravel Laravel 13 HTTP Client ### HTTP Query Method Support in Laravel 13.19 Laravel 13.19 adds Http::query() for the HTTP QUERY verb, query/queryJson testing helpers, a reduceInto() coll... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 8 Jul 2026 3 min read Read ](https://msaied.com/articles/http-query-method-support-in-laravel-1319) [ ![Blackfire & Xdebug Profiling in Laravel: Finding Real Bottlenecks in Production-Like Environments](https://cdn.msaied.com/393/a8dfc4ec52c4febc3ef41a491eb452ea.png) laravel performance profiling ### Blackfire & Xdebug Profiling in Laravel: Finding Real Bottlenecks in Production-Like Environments Stop guessing where your Laravel app is slow. This guide walks through practical Blackfire and Xdebug profilin... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 8 Jul 2026 4 min read Read ](https://msaied.com/articles/blackfire-xdebug-profiling-in-laravel-finding-real-bottlenecks-in-production-like-environments) [ ![Laravel Cloud Security Defaults Behind Every Deploy](https://cdn.msaied.com/395/28df8f542fbe81ecee3ba4ad897f36d6.png) Laravel Cloud Security PHP ### Laravel Cloud Security Defaults Behind Every Deploy Laravel Cloud ships WAF rules, DDoS mitigation, automatic PHP patching, SOC 2 Type II compliance, and deploy-t... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 8 Jul 2026 4 min read Read ](https://msaied.com/articles/laravel-cloud-security-defaults-behind-every-deploy) [ ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed Said Laravel Backend Engineer ](https://msaied.com)Senior Backend Engineer specializing in Laravel, scalable SaaS platforms, APIs, and cloud infrastructure. I build secure, high-performance web applications that help businesses grow. Explore - [Home](https://msaied.com) - [Projects](https://msaied.com/projects) - [Articles](https://msaied.com/articles) - [Certificates](https://msaied.com/certificates) - [Contact](https://msaied.com#contact-section) Connect - [ hello@msaied.com ](mailto:hello@msaied.com) - [ +20 109 461 9204 ](tel:+201094619204) © 2026 Mohamed Said. All rights reserved. [ ](https://github.com/EG-Mohamed) [ ](https://www.linkedin.com/in/msaiedm/) [ ](https://wa.me/201094619204) [ ](mailto:hello@msaied.com) [ ](https://drive.google.com/file/u/0/d/1MF20IPRJyzfy32mhEutjL5EpSls0w2Q8/view)