Reactive Blade. Zero Complexity.
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])
<button @click="$set('count', count + 1)">
Clicked <span a-text="count">0</span> times
</button>
@endacceladeThat's it. No build step required. No JavaScript to write. Just Blade.
- 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.
composer require accelade/acceladeAdd to your layout:
<head>
@acceladeStyles
</head>
<body>
{{ $slot }}
@acceladeScripts
@acceladeNotifications
</body>Start building:
@accelade(['name' => ''])
<input a-model="name" placeholder="Your name">
<p a-show="name">Hello, <span a-text="name"></span>!</p>
@endaccelade@accelade(['items' => [], 'newItem' => ''])
<input a-model="newItem">
<button @click="$set('items', [...items, newItem]); $set('newItem', '')">Add</button>
<ul>
<template a-for="item in items">
<li a-text="item"></li>
</template>
</ul>
@endaccelade@accelade(['preferences' => $userPreferences])
<div a-sync="preferences">
<select a-model="preferences.theme">
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>
@endaccelade// From PHP
Notify::success('Saved!')->body('Your changes have been saved.');
// From JavaScript
window.Accelade.notify.success('Success!', 'Operation completed.');// 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');@accelade(['count' => 0, 'name' => 'World'])
<p>Hello, @{{ name }}!</p>
<p>Count: @{{ count }}</p>
<p>User: @{{ shared.user.name }}</p>
<button @click="$set('count', count + 1)">Click</button>
@endaccelade{{-- Simple toggle with animation --}}
<x-accelade::toggle animation="fade">
<button @click="toggle()">Toggle</button>
<div a-show="toggled">Fades in and out!</div>
</x-accelade::toggle>
{{-- Accordion with collapse animation --}}
<x-accelade::toggle animation="collapse">
<button @click="toggle()">FAQ Question</button>
<div a-show="toggled">Answer content...</div>
</x-accelade::toggle>
{{-- 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',
);<x-accelade::lazy :shimmer="true">
@foreach($items as $item)
<div class="card">{{ $item->name }}</div>
@endforeach
</x-accelade::lazy>
{{-- Circle shimmer for avatars --}}
<x-accelade::lazy :shimmer="true" :shimmer-circle="true">
<img src="{{ $user->avatar }}" alt="Avatar">
</x-accelade::lazy>@seoTitle('My Page Title')
@seoDescription('Page description for search engines')
@seoKeywords('laravel, blade, reactive')
@seoOpenGraph(['type' => 'article', 'image' => '/og-image.jpg'])
{{-- In layout <head> --}}
@seo// From PHP controller
SEO::title($post->title)
->description($post->excerpt)
->openGraphImage($post->featured_image);<x-accelade::link href="/dashboard">Dashboard</x-accelade::link>{{-- Render pre-rendered HTML (Markdown, CMS content, etc.) --}}
<x-accelade::content :html="$renderedMarkdown" />
{{-- With custom wrapper and styling --}}
<x-accelade::content as="article" class="prose dark:prose-invert" :html="$html" />Accelade adapts to your preferred syntax. Events use @click, @submit, etc. across all frameworks:
| Framework | Prefix | Example |
|---|---|---|
| Vanilla JS | a- |
<span a-text="name">, <button @click="..."> |
| Vue | v- |
<span v-text="name">, <button @click="..."> |
| React | data-state- |
<span data-state-text="name">, <button @click="..."> |
| Svelte | s- |
<span s-text="name">, <button @click="..."> |
| Angular | ng- |
<span ng-text="name">, <button @click="..."> |
ACCELADE_FRAMEWORK=vue- PHP 8.2+
- Laravel 11.x or 12.x
| Guide | Description |
|---|---|
| Installation | Install and configure Accelade |
| Getting Started | First steps and basic concepts |
| Configuration | All config options |
| Architecture | How Accelade works under the hood |
| Component | Description |
|---|---|
| State | Reactive state management |
| Data | Reactive data with storage persistence |
| Toggle | Toggle visibility with animations |
| Modal | Modal dialogs and overlays |
| Link | SPA navigation links |
| Content | Render pre-rendered HTML (Markdown, CMS) |
| Flash | Flash message component |
| Event | Event handling component |
| Teleport | Teleport content to other DOM locations |
| Rehydrate | Rehydrate server-rendered content |
| Component | Description |
|---|---|
| Code Block | Syntax highlighted code blocks |
| Icon | Icon component with Blade Icons |
| Tooltip | Tooltip component |
| Draggable | Drag and drop functionality |
| Chart | Chart.js and ApexCharts integration |
| Calendar | Calendar component |
| Guide | Description |
|---|---|
| SPA Navigation | Client-side routing |
| Animations | Animation presets and transitions |
| Lazy Loading | Deferred content with shimmer |
| Persistent Layout | Keep elements active during navigation |
| Shared Data | Share data from PHP to JavaScript |
| Event Bus | Decoupled component communication |
| Bridge | Two-way PHP/JavaScript binding (Beta) |
| Scripts | Script management |
| Notifications | Toast notification system |
| SEO | Meta tags, OpenGraph, Twitter Cards |
| Exception Handling | Error handling and display |
| Guide | Description |
|---|---|
| Frameworks | Vue, React, Svelte, Angular adapters |
| MCP Server | AI-assisted development with Claude |
| Testing | Testing your Accelade components |
| API Reference | Complete API docs |
| Contributing | How to contribute |
Accelade is part of a larger ecosystem of packages designed to work together seamlessly:
| Package | Description |
|---|---|
| accelade/schemas | Schema-based layouts with sections, tabs, grids, wizards, and more |
| accelade/forms | Form builder with validation, file uploads, and rich inputs |
| accelade/infolists | Display read-only data with Filament-compatible API |
| accelade/tables | Data tables with sorting, filtering, and pagination |
| accelade/actions | Action buttons with modals, confirmations, and bulk operations |
| accelade/widgets | Dashboard widgets including stats, charts, and tables |
| accelade/filters | Advanced filtering components |
| accelade/grids | Grid and card layouts |
| accelade/query-builder | Visual query builder component |
| accelade/ai | AI-powered features and integrations |
All packages follow the same Blade-first philosophy and work together without requiring a full SPA framework.
Built with inspiration from Livewire, Filament, and Inertia.js.
If you find Accelade useful, please consider sponsoring the project. Your support helps maintain and improve the ecosystem.
MIT License. See LICENSE for details.