PHPackages hamzi/catchy - 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. [Templating & Views](/categories/templating) 4. / 5. hamzi/catchy ActiveLibrary[Templating & Views](/categories/templating) hamzi/catchy ============ Convert standard Laravel applications into SPAs using Alpine.js and HTML-over-the-wire. v1.5.4(3w ago)068MITJavaScriptPHP ^8.2CI failing Since Jun 13Pushed 2w agoCompare [ Source](https://github.com/catchyui/catchy)[ Packagist](https://packagist.org/packages/hamzi/catchy)[ RSS](/packages/hamzi-catchy/feed)WikiDiscussions main Synced 1w ago READMEChangelog (10)Dependencies (6)Versions (37)Used By (0) CatchyUI ========= [](#catchyui-) **A lightning-fast, headless Single Page Application (SPA) adapter for Laravel.** [![Latest Version](https://camo.githubusercontent.com/9325bae153e3fd2e56f5366c438f30e498b3ffc160c77ee311f6011a5d5619c0/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f68616d6479656c626174616c3132322f6361746368793f7374796c653d666f722d7468652d626164676526636f6c6f723d313062393831)](https://github.com/hamdyelbatal122/catchy/releases) [![GitHub Tests Action Status](https://camo.githubusercontent.com/f7f195e21470f65904dbba75171d99949cbe7234bef1820d21f2f5adfb6b6914/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f68616d6479656c626174616c3132322f6361746368792f72756e2d74657374732e796d6c3f6272616e63683d6d61696e267374796c653d666f722d7468652d6261646765266c6162656c3d746573747326636f6c6f723d363336366631)](https://github.com/hamdyelbatal122/catchy/actions/workflows/run-tests.yml) [![PHP Version](https://camo.githubusercontent.com/752569662c223ec92ecbb4993e09bed76354a61aeda01b3c4482056ed4ae9f41/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7068702d253545382e32253230253743253230253545382e33253230253743253230253545382e342d626c75653f7374796c653d666f722d7468652d626164676526636f6c6f723d306561356539)](https://camo.githubusercontent.com/752569662c223ec92ecbb4993e09bed76354a61aeda01b3c4482056ed4ae9f41/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7068702d253545382e32253230253743253230253545382e33253230253743253230253545382e342d626c75653f7374796c653d666f722d7468652d626164676526636f6c6f723d306561356539) [![License](https://camo.githubusercontent.com/6f29322cf9524e01430ec8e47fa5507968be779c32ab8d8ca6bd8f518d339a69/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e3f7374796c653d666f722d7468652d626164676526636f6c6f723d383463633136)](LICENSE) #### Convert standard Laravel views into a fluid, zero-refresh SPA using Alpine.js and HTML-over-the-wire. [](#convert-standard-laravel-views-into-a-fluid-zero-refresh-spa-using-alpinejs-and-html-over-the-wire) --- Introduction ------------ [](#introduction) **CatchyUI** is a lightweight, zero-dependency SPA engine for Laravel. By utilizing Alpine.js and `@alpinejs/morph`, it intercepts native anchor clicks and form submissions, fetching only the modified HTML fragments and morphing them seamlessly into the active DOM. Unlike heavy frontend frameworks, CatchyUI is **100% headless**—it imposes no styling, letting you design premium interfaces while managing transitions, SWR caching, lazy loading, and validation highlights out-of-the-box. ``` sequenceDiagram autonumber Browser->>CatchyUI: Clicks Link / Submits Form alt SWR Cache Hit CatchyUI->>DOM: Render cached HTML instantly CatchyUI->>Server: Background fetch fresh HTML Server-->>CatchyUI: Returns fresh fragment CatchyUI->>DOM: Morph update & refresh cache else Cache Miss CatchyUI->>Server: AJAX Fetch HTML fragment Server-->>CatchyUI: Returns fragment CatchyUI->>DOM: Morph updates & update page title/heads end ``` Loading --- Key Features ------------ [](#key-features) - **HTML-over-the-wire**: Only exchange modified page body fragments, saving bandwidth and rendering layouts instantly. - **Zero Configuration**: Anchors and forms are intercepted automatically. Plug and play with no custom routing scripts. - **Dynamic SEO & Head Syncing**: Seamlessly merges document titles, meta tags, styles, and script tags during navigation. - **Stale-While-Revalidate (SWR)**: Instantly render cached pages, fetching updates in the background for zero-wait loads. - **Lazy Loading (`x-catchy-lazy`)**: Load page sections asynchronously on load or viewport intersection. - **Live Inputs Syncing (`x-catchy-sync`)**: Bind inputs (e.g. search boxes) to backend routes with debounced live morph updates. - **Graceful Degradation**: Automatically falls back to standard page visits if server connection fails. --- Installation ------------ [](#installation) ### 1. Install via Composer [](#1-install-via-composer) ``` composer require catchyui/catchy ``` ### 2. Run Setup Command [](#2-run-setup-command) This command publishes configurations, assets, and generates the layout template: ``` php artisan catchy:install ``` ### 3. Setup Layout File [](#3-setup-layout-file) Include the dynamic toasts `` and scripts `` components into the master layout file before ``: ``` > Laravel SPA @vite(['resources/css/app.css', 'resources/js/app.js']) @yield('content') ``` --- Blade Components (SPA DX Wrapper) --------------------------------- [](#blade-components-spa-dx-wrapper) CatchyUI provides clean, premium wrapper components to handle routes, forms, modals, and toasts seamlessly. ### 1. Navigation Link (``) [](#1-navigation-link-x-catchy-link) Automatically manages active/inactive classes depending on route matching, matching exact URLs or wildcards. ``` Dashboard ``` - **Properties**: - `href`: Target URL. - `active`: CSS classes applied when active. - `inactive`: CSS classes applied when inactive. - `exact`: Match exact pathname string only (default: `false`). ### 2. Declarative Form (``) [](#2-declarative-form-x-catchy-form) Simplifies form submissions with auto-injected CSRF tokens, automatic error clearing, method spoofing, and customizable loaders. ``` Submit Post ``` - **Properties**: - `action`: Target submission URL. - `method`: HTTP Verb (`GET`, `POST`, `PUT`, `DELETE`, etc.). - `on-success`: Shorthand actions to execute on successful submissions (e.g. `reset;toast:msg;reload:lazy-id`). - `on-error`: Shorthand actions to execute on failure. - `confirm-modal`: Auto-open/close a target modal on validation completion. - `no-loader`: Disable the automated inline submit spinner button animation. ### 3. Responsive Modals (``) [](#3-responsive-modals-x-catchy-modal) Dynamic modals that automatically handle view transitions, forms, and triggers. ``` View Profile ``` --- Directives & Interceptors ----------------------------- [](#directives--interceptors) ### 1. Lazy Loading (`x-catchy-lazy`) [](#1-lazy-loading-x-catchy-lazy) Load elements asynchronously when the container scrolls into view or during initial page render: ``` Loading comments... Loading recommendations... ``` To reload a lazy block programmatically: ``` window.dispatchEvent(new CustomEvent('catchy:lazy-reload', { detail: { id: 'comments' } })); ``` ### 2. Live Syncing (`x-catchy-sync`) [](#2-live-syncing-x-catchy-sync) Intercepts input changes/keystrokes and syncs/morphs the page target with the backend: ``` ``` --- Asset Overrides & Customization ----------------------------------- [](#asset-overrides--customization) CatchyUI has 100% decoupled frontend assets, meaning you can fully customize visual elements and animations: ### Stylesheets Customization [](#stylesheets-customization) If published, transition and modal styles are fully separate: - `resources/css/transitions.css`: Handles slide, fade, scale transitions. - `resources/css/modal.css`: backdrop blur, top borders, responsive sizing. ### Custom SVG Components [](#custom-svg-components) All core SVGs are isolated in Blade files under `resources/views/svg/` to allow full customization: - `close.blade.php`: Close button for modal overlays & toasts. - `spinner.blade.php`: Button submit loader animation. --- License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE) for more details. ### Health Score 46 — FairBetter than 92% of packages Maintenance96 Actively maintained with recent releases Popularity12 Limited adoption so far Community8 Small or concentrated contributor base Maturity58 Maturing project, gaining track record Bus Factor1 Top contributor holds 95.5% 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. ### Release Activity Cadence Every ~1 days Total 36 Last Release 21d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/36019461?v=4)[Hamdy Elbatal](/maintainers/hamdyelbatal122)[@hamdyelbatal122](https://github.com/hamdyelbatal122) --- Top Contributors [![hamdyelbatal122](https://avatars.githubusercontent.com/u/36019461?v=4)](https://github.com/hamdyelbatal122 "hamdyelbatal122 (107 commits)")[![cyber-ghost44](https://avatars.githubusercontent.com/u/281261974?v=4)](https://github.com/cyber-ghost44 "cyber-ghost44 (5 commits)") --- Tags laravelbladepjaxalpinemorphalpinejsSPAhtml-over-the-wire ### Code Quality TestsPHPUnit Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/hamzi-catchy/health.svg) ``` [![Health](https://phpackages.com/badges/hamzi-catchy/health.svg)](https://phpackages.com/packages/hamzi-catchy) ``` ### Alternatives [psalm/plugin-laravel Psalm plugin for Laravel 3345.3M348](/packages/psalm-plugin-laravel)[api-platform/laravel API Platform support for Laravel 58174.6k17](/packages/api-platform-laravel) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)