# Livewire — Build Dynamic UIs in Laravel Without Writing JavaScript > Laravel Livewire is a full-stack framework that lets you build reactive, dynamic interfaces using only PHP and Blade templates, eliminating the need for a separate JavaScript frontend. ## Install Save in your project root: # Livewire — Build Dynamic UIs in Laravel Without Writing JavaScript ## Quick Use ```bash # Install in an existing Laravel project composer require livewire/livewire # Create a component php artisan make:livewire counter # Include in your Blade layout # Add @livewireStyles in and @livewireScripts before # Use in any Blade template ``` ## Introduction Livewire bridges the gap between traditional server-rendered Laravel apps and modern reactive UIs. Instead of building a separate JavaScript SPA, you write PHP components that automatically sync their state with the browser over AJAX. This lets Laravel developers add interactivity without leaving the PHP ecosystem. ## What Livewire Does - Lets you write reactive UI components entirely in PHP with Blade templates, no JavaScript required - Automatically handles AJAX requests to sync component state between the server and browser - Supports real-time validation, pagination, file uploads, and form handling out of the box - Provides lifecycle hooks (mount, updated, hydrate) for controlling component behavior - Integrates with Alpine.js for client-side interactivity when needed ## Architecture Overview Each Livewire component consists of a PHP class (state and actions) and a Blade view (template). When a user triggers an action (click, input, submit), Livewire sends an AJAX request to the server with the component's current state. The server re-renders the component and sends back a diff of the HTML. The JavaScript runtime on the client applies the diff to the DOM using morphdom. This server-centric approach means all logic runs in PHP. ## Self-Hosting & Configuration - Install via Composer into any Laravel 10+ project - No additional infrastructure required beyond a standard Laravel deployment (PHP, web server, database) - Configure asset publishing, pagination theme, and temporary file upload settings in `config/livewire.php` - For production, enable response caching and queue file uploads for better performance - Supports Laravel Octane for persistent worker processes and reduced boot overhead ## Key Features - Zero JavaScript required: reactive forms, modals, dropdowns, and data tables written purely in PHP - Wire model binding syncs form inputs with PHP properties automatically - Built-in support for file uploads with progress indicators and validation - Lazy loading and deferred components for optimizing initial page load - First-class integration with Alpine.js via `wire:model`, `x-data`, and `$wire` for hybrid PHP/JS components ## Comparison with Similar Tools - **Inertia.js** — serves a similar goal but requires a JavaScript framework (Vue/React/Svelte) for the frontend; Livewire uses only Blade - **htmx** — framework-agnostic HTML-over-the-wire approach; Livewire is tightly integrated with Laravel - **Hotwire (Turbo)** — Rails ecosystem equivalent; similar server-rendered approach but for Ruby - **Vue.js / React** — full client-side frameworks; more flexible but require separate API layer and JS build tooling - **Phoenix LiveView** — Elixir equivalent using WebSockets; Livewire uses HTTP polling by default ## FAQ **Q: Does Livewire scale for high-traffic applications?** A: Yes. Each request is a standard Laravel HTTP request, so standard scaling strategies (caching, queues, load balancing) apply. Pair with Laravel Octane for lower latency. **Q: Can I use Livewire with existing JavaScript?** A: Absolutely. Livewire integrates with Alpine.js and supports dispatching browser events. You can also embed Livewire components inside pages that use Vue or React. **Q: How does Livewire handle real-time updates?** A: Livewire v3 supports polling and Laravel Echo for WebSocket-driven updates. Components can listen for broadcast events and re-render automatically. **Q: What is the performance overhead of server round-trips?** A: Each interaction triggers a small AJAX call. Livewire sends minimal payloads (component state snapshot and HTML diff), so latency is comparable to a standard AJAX form submission. ## Sources - https://github.com/livewire/livewire - https://livewire.laravel.com/docs --- Source: https://tokrepo.com/en/workflows/asset-924f42d7 Author: AI Open Source