PHPackages accelade/accelade - 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. accelade/accelade ActiveLibrary[Templating & Views](/categories/templating) accelade/accelade ================= Reactive Blade templates with Vue, React, Svelte, Angular, or vanilla JavaScript v1.0.0(3mo ago)02.5k[10 PRs](https://github.com/accelade/accelade/pulls)12MITBladePHP ^8.2CI passing Since Jan 19Pushed 1mo agoCompare [ Source](https://github.com/accelade/accelade)[ Packagist](https://packagist.org/packages/accelade/accelade)[ Docs](https://github.com/fadymondy/accelade)[ GitHub Sponsors](https://github.com/fadymondy)[ RSS](/packages/accelade-accelade/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (1)Dependencies (10)Versions (21)Used By (12) Accelade ======== [](#accelade) **Reactive Blade. Zero Complexity.** [![Tests](https://github.com/accelade/accelade/actions/workflows/tests.yml/badge.svg)](https://github.com/accelade/accelade/actions/workflows/tests.yml)[![Latest Version](https://camo.githubusercontent.com/563cb7d9c8fddca1438343835dfdd8b475ff931c7fdd2c071e2956af14a62db2/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f616363656c6164652f616363656c616465)](https://packagist.org/packages/accelade/accelade)[![Total Downloads](https://camo.githubusercontent.com/17a45fdf722e6bcad53626f60cea6b69ac78611c2170866170a68126deaf356a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f616363656c6164652f616363656c616465)](https://packagist.org/packages/accelade/accelade)[![License](https://camo.githubusercontent.com/7013272bd27ece47364536a221edb554cd69683b68a46fc0ee96881174c4214c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)](LICENSE) --- Add reactivity to your Laravel Blade templates without the overhead of a full SPA framework. Keep your server-rendered templates and sprinkle in reactive components exactly where you need them. ``` @accelade(['count' => 0]) Clicked 0 times @endaccelade ``` **That's it.** No build step required. No JavaScript to write. Just Blade. --- Why Accelade? ------------- [](#why-accelade) - **Blade-First** — Your templates stay in Blade. Add reactivity where needed. - **No Build Required** — Works out of the box. Zero configuration. - **Multi-Framework** — Use Vanilla JS, Vue, React, Svelte, or Angular syntax. - **SPA Navigation** — Client-side routing with automatic progress bar. - **Server Sync** — Seamlessly persist state to Laravel backend. - **Shared Data** — Pass data from PHP to JavaScript globally across your app. - **Animations** — Built-in animation presets for smooth transitions. - **Lazy Loading** — Defer content with beautiful shimmer placeholders. - **Persistent Layout** — Keep media players and widgets active during navigation. - **SEO Engine** — Fluent API for managing meta tags, OpenGraph, and Twitter Cards. - **Toast Notifications** — Beautiful Filament-style notifications from PHP or JS. - **Lightweight** — ~28KB gzipped. No heavy dependencies. --- Quick Start ----------- [](#quick-start) ``` composer require accelade/accelade ``` Add to your layout: ``` @acceladeStyles {{ $slot }} @acceladeScripts @acceladeNotifications ``` Start building: ``` @accelade(['name' => '']) Hello, ! @endaccelade ``` --- Features at a Glance -------------------- [](#features-at-a-glance) ### Reactive Components [](#reactive-components) ``` @accelade(['items' => [], 'newItem' => '']) Add @endaccelade ``` ### Server State Sync [](#server-state-sync) ``` @accelade(['preferences' => $userPreferences]) Light Dark @endaccelade ``` ### Toast Notifications [](#toast-notifications) ``` // From PHP Notify::success('Saved!')->body('Your changes have been saved.'); // From JavaScript window.Accelade.notify.success('Success!', 'Operation completed.'); ``` ### Shared Data [](#shared-data) ``` // Share data from PHP (controller, middleware, etc.) Accelade::share('user', auth()->user()->only('id', 'name')); Accelade::share('settings', ['theme' => 'dark']); ``` ``` // Access in JavaScript anywhere const userName = window.Accelade.shared.get('user.name'); const theme = window.Accelade.shared.get('settings.theme'); ``` ### Text Interpolation [](#text-interpolation) ``` @accelade(['count' => 0, 'name' => 'World']) Hello, @{{ name }}! Count: @{{ count }} User: @{{ shared.user.name }} Click @endaccelade ``` ### Animations & Transitions [](#animations--transitions) ``` {{-- Simple toggle with animation --}} Toggle Fades in and out! {{-- Accordion with collapse animation --}} FAQ Question Answer content... {{-- Available presets: fade, scale, collapse, slide-up, slide-down, slide-left, slide-right --}} ``` ``` // Register custom animation preset Animation::new( name: 'bounce', enter: 'transition ease-bounce duration-300', enterFrom: 'opacity-0 scale-50', enterTo: 'opacity-100 scale-100', leave: 'transition ease-in duration-200', leaveFrom: 'opacity-100 scale-100', leaveTo: 'opacity-0 scale-50', ); ``` ### Lazy Loading with Shimmer [](#lazy-loading-with-shimmer) ``` @foreach($items as $item) {{ $item->name }} @endforeach {{-- Circle shimmer for avatars --}} ``` ### SEO Management [](#seo-management) ``` @seoTitle('My Page Title') @seoDescription('Page description for search engines') @seoKeywords('laravel, blade, reactive') @seoOpenGraph(['type' => 'article', 'image' => '/og-image.jpg']) {{-- In layout --}} @seo ``` ``` // From PHP controller SEO::title($post->title) ->description($post->excerpt) ->openGraphImage($post->featured_image); ``` ### SPA Navigation [](#spa-navigation) ``` Dashboard ``` ### Content Component [](#content-component) ``` {{-- Render pre-rendered HTML (Markdown, CMS content, etc.) --}} {{-- With custom wrapper and styling --}} ``` --- Choose Your Framework --------------------- [](#choose-your-framework) Accelade adapts to your preferred syntax. Events use `@click`, `@submit`, etc. across all frameworks: FrameworkPrefixExampleVanilla JS`a-```, ``Vue`v-```, ``React`data-state-```, ``Svelte`s-```, ``Angular`ng-```, ````` ACCELADE_FRAMEWORK=vue ``` --- Requirements ------------ [](#requirements) - PHP 8.2+ - Laravel 11.x or 12.x --- Documentation ------------- [](#documentation) ### Getting Started [](#getting-started) GuideDescription[Installation](docs/installation.md)Install and configure Accelade[Getting Started](docs/getting-started.md)First steps and basic concepts[Configuration](docs/configuration.md)All config options[Architecture](docs/architecture.md)How Accelade works under the hood### Core Components [](#core-components) ComponentDescription[State](docs/state.md)Reactive state management[Data](docs/data.md)Reactive data with storage persistence[Toggle](docs/toggle.md)Toggle visibility with animations[Modal](docs/modal.md)Modal dialogs and overlays[Link](docs/link.md)SPA navigation links[Content](docs/content.md)Render pre-rendered HTML (Markdown, CMS)[Flash](docs/flash.md)Flash message component[Event](docs/event.md)Event handling component[Teleport](docs/teleport.md)Teleport content to other DOM locations[Rehydrate](docs/rehydrate.md)Rehydrate server-rendered content### UI Components [](#ui-components) ComponentDescription[Code Block](docs/code-block.md)Syntax highlighted code blocks[Icon](docs/icon.md)Icon component with Blade Icons[Tooltip](docs/tooltip.md)Tooltip component[Draggable](docs/draggable.md)Drag and drop functionality[Chart](docs/chart.md)Chart.js and ApexCharts integration[Calendar](docs/calendar.md)Calendar component### Features [](#features) GuideDescription[SPA Navigation](docs/spa-navigation.md)Client-side routing[Animations](docs/animations.md)Animation presets and transitions[Lazy Loading](docs/lazy-loading.md)Deferred content with shimmer[Persistent Layout](docs/persistent-layout.md)Keep elements active during navigation[Shared Data](docs/shared-data.md)Share data from PHP to JavaScript[Event Bus](docs/event-bus.md)Decoupled component communication[Bridge](docs/bridge.md)Two-way PHP/JavaScript binding (Beta)[Scripts](docs/scripts.md)Script management[Notifications](docs/notifications.md)Toast notification system[SEO](docs/seo.md)Meta tags, OpenGraph, Twitter Cards[Exception Handling](docs/exception-handling.md)Error handling and display### Advanced [](#advanced) GuideDescription[Frameworks](docs/frameworks.md)Vue, React, Svelte, Angular adapters[MCP Server](docs/mcp-server.md)AI-assisted development with Claude[Testing](docs/testing.md)Testing your Accelade components[API Reference](docs/api-reference.md)Complete API docs[Contributing](docs/contributing.md)How to contribute--- Accelade Ecosystem ------------------ [](#accelade-ecosystem) Accelade is part of a larger ecosystem of packages designed to work together seamlessly: PackageDescription**[accelade/schemas](https://github.com/accelade/schemas)**Schema-based layouts with sections, tabs, grids, wizards, and more**[accelade/forms](https://github.com/accelade/forms)**Form builder with validation, file uploads, and rich inputs**[accelade/infolists](https://github.com/accelade/infolists)**Display read-only data with Filament-compatible API**[accelade/tables](https://github.com/accelade/tables)**Data tables with sorting, filtering, and pagination**[accelade/actions](https://github.com/accelade/actions)**Action buttons with modals, confirmations, and bulk operations**[accelade/widgets](https://github.com/accelade/widgets)**Dashboard widgets including stats, charts, and tables**[accelade/filters](https://github.com/accelade/filters)**Advanced filtering components**[accelade/grids](https://github.com/accelade/grids)**Grid and card layouts**[accelade/query-builder](https://github.com/accelade/query-builder)**Visual query builder component**[accelade/ai](https://github.com/accelade/ai)**AI-powered features and integrationsAll packages follow the same Blade-first philosophy and work together without requiring a full SPA framework. --- Credits ------- [](#credits) Built with inspiration from [Livewire](https://livewire.laravel.com), [Filament](https://filamentphp.com), and [Inertia.js](https://inertiajs.com). --- Sponsors -------- [](#sponsors) If you find Accelade useful, please consider [sponsoring](docs/sponsor.md) the project. Your support helps maintain and improve the ecosystem. --- License ------- [](#license) MIT License. See [LICENSE](LICENSE) for details. ### Health Score 47 — FairBetter than 94% of packages Maintenance84 Actively maintained with recent releases Popularity22 Limited adoption so far Community17 Small or concentrated contributor base Maturity56 Maturing project, gaining track record Bus Factor1 Top contributor holds 53.4% 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 Unknown Total 1 Last Release 119d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/2147eb2fca7ab5f0124d0fafd88ba2d2a5dfa3a0036fb8872d1084b7cba29366?d=identicon)[fadymondy](/maintainers/fadymondy) --- Top Contributors [![fadymondy](https://avatars.githubusercontent.com/u/11937812?v=4)](https://github.com/fadymondy "fadymondy (62 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (54 commits)") --- Tags laravelcomponentsnotificationsbladereactvuereactiveangularsvelteSPA ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/accelade-accelade/health.svg) ``` [![Health](https://phpackages.com/badges/accelade-accelade/health.svg)](https://phpackages.com/packages/accelade-accelade) ``` ### Alternatives [tightenco/jigsaw Simple static sites with Laravel's Blade. 2.2k438.5k29](/packages/tightenco-jigsaw)[stijnvanouplines/blade-country-flags A package to easily make use of country flags in your Laravel Blade views. 26307.2k6](/packages/stijnvanouplines-blade-country-flags)[electrik/slate Slate - a Laravel Blade UI Kit is a set of anonymous blade components built using TailwindCSS v4 with built-in dark mode support for your next Laravel project 102.3k1](/packages/electrik-slate) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)