Laravel HyperLaravel-Native Reactivity

Build reactive web applications with the elegance of Laravel and the power of Datastar

Get Started

View on GitHub

@signals(['count' => 0])

data-on:click="@postx('/update')"

#[Route(method: 'post')]

hyper()->signals([...])

data-text="$value"

return hyper()->view('counter');

signals('count')

@postx('/increment')

data-if="$show"

signals()->validate([])

data-for="item in $items"

return hyper()->fragment('users', 'list')

@navigate('/dashboard')

hyper()->stream()

data-navigate="@get('/posts')"

data-bind="search"

request()->isHyperNavigate()

@ifHyper

data-error="title"

@signals('normalSignals', 'lockedSignals_', '_localSignals')

counter.blade.php
<div @signals(['count' => 0, 'errors' => []])>
    <button data-on:click="@postx('/increment')">
        +
    </button>
    <span data-text="$count"></span>
    <div data-error="count"></div>
</div>

CounterController.php
#[Route(method: 'post')]
public function increment()
{
    $validated = signals()->validate([
        'count' => 'required|numeric|min:0'
    ]);

    return hyper()->signals([
        'count' => signals('count') + 1
    ]);
}

Laravel-Native

Write Blade templates, use familiar helpers like hyper() and signals(), and leverage Laravel's validation. No new paradigm—just reactive Laravel.

Server-Driven Reactivity

Your Laravel backend controls the frontend through signals and fragments. Business logic stays on the server where it's testable, secure, and maintainable.

Automatic CSRF & Validation

CSRF-protected actions with @postx, seamless Laravel validation integration, and automatic error display. Security built-in, not bolted-on.

Zero Build Step

No npm, no webpack, no compilation. Add @hyper to your layout and start building reactive interfaces immediately. Deploy like any Laravel app.

Hyper Attributes in Action

Simple, powerful reactive patterns built for Laravel

@signals

Initialize reactive data directly from your Laravel backend

<div @signals(['count' => 0])>
  <span data-text="$count"></span>
</div>

data-bind

Two-way binding between form inputs and reactive signals

<input data-bind="email" />
<p data-text="$email"></p>

@postx

CSRF-protected POST requests with automatic signal transmission

<button data-on:click="@postx('/save')">
  Save
</button>

data-if

Conditional rendering that adds/removes elements from the DOM

<template data-if="$isVisible">
  <div>Content</div>
</template>

data-for

Loop through arrays to render dynamic lists efficiently

<template data-for="todo in $todos">
  <div data-text="todo.title"></div>
</template>

data-error

Display Laravel validation errors automatically

<input data-bind="email" />
<div data-error="email"></div>

hyper()->signals()

Update reactive signals from your Laravel controller

return hyper()
  ->signals([
    'count' => $newCount
  ]);

@fragment

Define reusable view sections for partial page updates

@fragment('user-list')
  <div id="users">...</div>
@endfragment

Ready to Build Reactive Laravel Apps?

Start building modern, reactive interfaces with the simplicity of Laravel

Get Started