README

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>
@endaccelade

That's it. No build step required. No JavaScript to write. Just Blade.

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

composer require accelade/accelade

Add 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

Features at a Glance

Reactive Components

@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

Server State Sync

@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

Toast Notifications

// From PHP
Notify::success('Saved!')->body('Your changes have been saved.');

// From JavaScript
window.Accelade.notify.success('Success!', 'Operation completed.');

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

@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

Animations & Transitions

{{-- 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',
);

Lazy Loading with Shimmer

<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>

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 <head> --}}
@seo

// From PHP controller
SEO::title($post->title)
    ->description($post->excerpt)
    ->openGraphImage($post->featured_image);

SPA Navigation

<x-accelade::link href="/dashboard">Dashboard</x-accelade::link>

Content Component

{{-- 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" />

Choose Your Framework

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

Requirements

PHP 8.2+
Laravel 11.x or 12.x

Documentation

Getting Started

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

Core Components

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

UI Components

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

Features

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

Advanced

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 Ecosystem

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.

Credits

Built with inspiration from Livewire, Filament, and Inertia.js.

License

MIT License. See LICENSE for details.

accelade / accelade

Maintainers

Package info

Fund package maintenance!

Statistics

Security