PHPackages gadingrengga/livedomjs - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. gadingrengga/livedomjs ActiveLibrary[Utility & Helpers](/categories/utility) gadingrengga/livedomjs ====================== Integrasi LiveDomJS untuk Laravel: SPA, Live DOM binding, AJAX, dan reaktivitas. 17JavaScriptCI passing Since Jul 4Pushed 1mo ago1 watchersCompare [ Source](https://github.com/GadingRengga/LiveDomJs)[ Packagist](https://packagist.org/packages/gadingrengga/livedomjs)[ RSS](/packages/gadingrengga-livedomjs/feed)WikiDiscussions main Synced today READMEChangelogDependenciesVersions (1)Used By (0) ⚡ LiveDomJS =========== [](#-livedomjs) **HTML-native reactivity for Laravel — no build tools, no boilerplate, no learning curve.** [![Packagist Version](https://camo.githubusercontent.com/f1c3c14c4e9de8a18a3af33544cca7049eccdce1ce1a16168f8e5296ebc049b4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f676164696e6772656e6767612f6c697665646f6d6a733f7374796c653d666c61742d73717561726526636f6c6f723d363336366631)](https://packagist.org/packages/gadingrengga/livedomjs) [![Total Downloads](https://camo.githubusercontent.com/c721b519facb9b7a96a7538aecc30beb3804918bea02028c8c67a1cf83f17ff0/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f676164696e6772656e6767612f6c697665646f6d6a733f7374796c653d666c61742d73717561726526636f6c6f723d313062393831)](https://packagist.org/packages/gadingrengga/livedomjs) [![License](https://camo.githubusercontent.com/23f175de666562531e0779aad066b96f03bf2a0c5d5c86faf436a16c809d8178/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f476164696e6752656e6767612f4c697665446f6d4a733f7374796c653d666c61742d73717561726526636f6c6f723d663539653062)](https://github.com/GadingRengga/LiveDomJs/blob/main/LICENSE) [![Stars](https://camo.githubusercontent.com/e67e3f3e2b6ce19b453718877bda0815e16f8a88108121a0f8dcbc74041af2fb/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f476164696e6752656e6767612f4c697665446f6d4a733f7374796c653d666c61742d73717561726526636f6c6f723d656334383939)](https://github.com/GadingRengga/LiveDomJs) [Documentation](https://gadingrengga.github.io/LiveDomJs) · [Quick Start](#-quick-start) · [Examples](#-examples) · [Features](#-features) ``` Save ``` --- What is LiveDomJS? ------------------ [](#what-is-livedomjs) LiveDomJS is a lightweight JavaScript framework that brings reactivity directly to Laravel Blade — without Vue, React, Alpine, or any build pipeline. Instead of creating separate API endpoints, writing JavaScript state management, or setting up frontend components, LiveDomJS lets you call your **existing Laravel controllers directly from HTML attributes**. The result is a reactive, real-time interface with almost zero additional code. ``` Save ``` No component class. No state management. No route registration. **Just HTML.** --- ✨ Features ---------- [](#-features) ### 🎯 Attribute-Driven Interactions [](#-attribute-driven-interactions) Bind any user interaction to your Laravel controller methods with a single HTML attribute. No JavaScript required. ``` Create ``` ### 🔒 Scope-Based Data Isolation [](#-scope-based-data-isolation) `live-scope` defines a boundary — only inputs within that scope are sent with the request. Essential for tables with multiple rows of independent data. ``` Update Update ``` ### 🧮 Live Compute — Spreadsheet in HTML [](#-live-compute--spreadsheet-in-html) Reactive calculations that run entirely in the browser — no server round trips, zero latency. Perfect for invoices, quotes, and financial forms. ``` ``` Supports: `sum()`, `avg()`, `min()`, `max()`, `count()`, `sumif()` — and both IDR (`1.000.000,00`) and USD (`1,000,000.00`) number formats. ### ⚡ Real-Time Updates — One Attribute [](#-real-time-updates--one-attribute) Enable WebSocket broadcasting powered by [Laravel Reverb](https://reverb.laravel.com) by adding a single attribute. All channel management, event listening, and DOM updates are handled automatically. ``` Refresh Refresh ``` When `live-realtime="true"` is set, the server broadcasts the event to all users who have a matching `live-scope` open — they all receive the update simultaneously without polling. ### 🔀 Reactive Directives [](#-reactive-directives) Reactively control visibility, classes, styles, and attributes based on input values — no JavaScript needed. ``` In stock Total Preview ``` ### 🗺️ SPA Navigation [](#️-spa-navigation) Turn any region into a Single Page Application area. Links and forms inside `live-spa-region` are intercepted automatically — no configuration needed. ``` ``` ### 🔄 Smart AJAX Engine [](#-smart-ajax-engine) - Automatic request cancellation — no stale responses - Single-use response caching - Debounced requests for `live-input` and `live-keyup` - `live-poll` for automatic polling at any interval - Detailed error modals in development, clean toasts in production --- 📦 Installation -------------- [](#-installation) **Requirements:** Laravel 9+, PHP 8.1+ ``` # 1. Install the package composer require gadingrengga/livedomjs # 2. Run the install command php artisan livedomjs:install ``` Add to your Blade layout: ``` ``` That's it. No webpack. No npm. No build step. --- 🚀 Quick Start ------------- [](#-quick-start) ### Basic AJAX Interaction [](#basic-ajax-interaction) ``` Check ``` ``` // app/Http/Controllers/UserController.php // No new routes or files needed — it just works. public function checkAvailability(Request $request) { $exists = User::where('username', $request->username)->exists(); return response()->json([ 'success' => true, 'data' => $exists ? 'Username taken' : 'Username available', ]); } ``` ### Invoice Form with Auto-Calculation [](#invoice-form-with-auto-calculation) ``` Remove Total: Submit Invoice ``` ### Real-Time Dashboard [](#real-time-dashboard) ``` Sync All ``` --- 📖 Directive Reference --------------------- [](#-directive-reference) ### Interaction Attributes [](#interaction-attributes) AttributeTriggerExample`live-click`Click```live-change`Change```live-input`Input (debounced)```live-keyup`Key up```live-submit`Form submit```live-hover`Mouse enter/leave```live-poll`Interval (ms)``### Reactive Directives [](#reactive-directives) AttributeFunctionExample`live-compute`Client-side calculation`live-compute="qty * price"``live-show`Conditional visibility`live-show="stock > 0"``live-class`Dynamic class`live-class="valid ? 'green' : 'red'"``live-style`Dynamic style`live-style="opacity: active ? 1 : 0"``live-attr`Dynamic attribute`live-attr="disabled: qty < 1"``live-bind`Two-way binding`live-bind="username"`### Target & Scope Attributes [](#target--scope-attributes) AttributeFunctionExample`live-scope`Define request boundary```live-target`DOM update target`live-target="#result"``live-realtime`Enable WebSocket broadcast`live-realtime="true"``live-compute-format`Number format`live-compute-format="idr"`--- 🆚 How It Compares ----------------- [](#-how-it-compares) LiveDomJSLivewireHTMXNew files per feature02+ (PHP class + Blade)0Route registration required**No**NoYesClient-side calculations**Built-in**Server round-tripManual JSReal-time (WebSocket)**One attribute**Complex setupExtension requiredLaravel-native**Yes**YesNoBuild step required**No**NoNojQuery dependencyYesNoNo> **When to choose LiveDomJS:** Data-heavy Laravel applications (ERP, CRM, admin panels) where you want reactive UIs without the overhead of a component-based framework. --- 🏗️ How It Works --------------- [](#️-how-it-works) LiveDomJS routes all AJAX requests through a single dynamic controller: ``` GET/POST /ajax/{controller}/{action} ``` This means your existing Laravel controllers work without any modification — no new routes, no new files. ``` User clicks [live-click="saveUser"] ↓ POST /ajax/UserController/saveUser ↓ AjaxController dispatches to UserController@saveUser ↓ Response rendered into [live-target="#result"] ``` For real-time requests (`live-realtime="true"`), the server broadcasts via Laravel Reverb to all users with a matching `live-scope` open, who then each fetch the updated content independently. --- 📂 Package Structure ------------------- [](#-package-structure) ``` LiveDomJs/ ├── resources/ │ └── js/ │ └── livedom.js # Core engine ├── src/ │ ├── Console/ # Artisan install command │ ├── Http/ │ │ └── Controllers/ │ │ └── AjaxController.php # Dynamic router │ ├── Events/ │ │ └── DynamicBroadcastEvent.php │ ├── Helpers/ │ │ └── BroadcastHelper.php │ └── Providers/ │ └── LiveDomServiceProvider.php └── README.md ``` --- 🗺️ Roadmap ---------- [](#️-roadmap) - Attribute-driven AJAX interactions - Scope-based data isolation - Live compute with aggregate functions - Real-time broadcasting via Laravel Reverb - SPA navigation with pushState - Reactive directives (show, class, style, attr) - DevTools browser extension - Remove jQuery dependency - VSCode extension for attribute autocomplete - Official testing utilities --- 🤝 Contributing -------------- [](#-contributing) Contributions, bug reports, and feature suggestions are welcome. Before submitting changes, please be prepared to explain: - **What** you're changing and why - **What could break** as a result - **How it affects** the framework's long-term direction ``` # Clone and set up git clone https://github.com/GadingRengga/LiveDomJs cd LiveDomJs # Create a branch git checkout -b feature/your-feature-name # Make your changes, then open a pull request ``` --- 👤 Author -------- [](#-author) **Gading Rengga** - GitHub: [@GadingRengga](https://github.com/GadingRengga) - Email: --- 📜 License --------- [](#-license) Licensed under the [MIT License](LICENSE). Free to use in personal and commercial projects. --- **If LiveDomJS saves you time, consider giving it a ⭐ on GitHub.** [Documentation](https://gadingrengga.github.io/LiveDomJs) · [Packagist](https://packagist.org/packages/gadingrengga/livedomjs) · [Issues](https://github.com/GadingRengga/LiveDomJs/issues) ### Health Score 21 — LowBetter than 18% of packages Maintenance61 Regular maintenance activity Popularity6 Limited adoption so far Community7 Small or concentrated contributor base Maturity11 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://www.gravatar.com/avatar/ee65ab503391ea73381ae8d68add7e86b70f62a462a90b8c5bc37cbcfe2880db?d=identicon)[GadingRengga](/maintainers/GadingRengga) --- Top Contributors [![GadingRengga](https://avatars.githubusercontent.com/u/116241696?v=4)](https://github.com/GadingRengga "GadingRengga (38 commits)") ### Embed Badge ![Health badge](/badges/gadingrengga-livedomjs/health.svg) ``` [![Health](https://phpackages.com/badges/gadingrengga-livedomjs/health.svg)](https://phpackages.com/packages/gadingrengga-livedomjs) ``` ### Alternatives [symfony/polyfill-php82 Symfony polyfill backporting some PHP 8.2+ features to lower PHP versions 6651.6M102](/packages/symfony-polyfill-php82)[ddoe/wysiwyg-editor-module Summernote WYSIWYG Editor for OXID eShop. 191.0M5](/packages/ddoe-wysiwyg-editor-module)[tcb13/substringy A sub string manipulation library with multibyte support that extends Stringy 1761.0k1](/packages/tcb13-substringy) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)