Introduction

What is Laravel Hyper?

Laravel Hyper brings reactive user interfaces to your Laravel applications. By integrating Datastar—a hypermedia framework for building reactive frontends—with Laravel's natural patterns, Hyper lets you create dynamic, real-time web applications while staying firmly rooted in server-side rendering and the tools you already know.

With Hyper, you write Blade templates, return familiar Laravel responses, and use hyper() to build reactive responses and signals() to access frontend state. Your server drives the frontend through reactive signals and HTML fragments, giving you the responsive user experience modern applications demand without requiring you to learn a new paradigm or abandon Laravel's conventions.

Why Hyper Exists

Modern web applications need to feel responsive. Users expect instant feedback when they click buttons, submit forms, or filter data. Traditionally, achieving this in Laravel meant either building a separate JavaScript frontend (adding complexity and deployment overhead) or using full-page reloads (creating a sluggish experience).

Hyper provides a third path: reactive interfaces that feel instant, built entirely with Laravel and Blade, requiring minimal JavaScript knowledge. Whether you're building a contact management system, a live dashboard, or a multi-step form, Hyper gives you the tools to make your Laravel applications feel modern and responsive.

The Foundation: Datastar

At its core, Hyper integrates Datastar into Laravel. Datastar is a hypermedia framework that provides:

• Reactive Signals: Variables that automatically update the UI when they change (learn more in Essentials: Signals)
• Data Attributes: HTML attributes like data-text, data-on:click, and data-show that make your interface reactive (see Datastar Attributes)
• Server Communication: HTTP actions that send requests and handle Server-Sent Events (SSE) responses (detailed in Request Cycle)
• DOM Updates: Efficient patching of HTML content without full page reloads (explained in DOM Morphing)

Datastar handles all the client-side reactivity. It watches for changes, updates the DOM, manages server communication, and keeps your interface in sync with your application state.

What Hyper Adds to Datastar

Hyper extends Datastar with Laravel-specific enhancements that make integration seamless:

Server-Side Helpers

hyper() Response Builder: A fluent interface for building reactive responses, similar to Laravel's response() helper. Use it to update signals, render views, manipulate the DOM, and chain multiple operations (see HyperResponse API):

return hyper()
    ->signals(['count' => 5])
    ->view('counter-status', $data)
    ->js('console.log("Updated!")');

signals() Helper: Read signals sent from the frontend, just like using request() (detailed in Signals Helper API):

$count = signals('count', 0);
$validated = signals()->validate(['count' => 'required|integer']);

Blade Directives

@hyper: Includes Datastar and Hyper's JavaScript, plus the CSRF token meta tag

@signals: Initialize signals from PHP data with automatic JSON encoding (learn the full syntax in Blade Integration)

@fragment / @endfragment: Define reusable sections for partial updates (see Fragments)

Laravel Integration

CSRF Protection: Enhanced HTTP actions (@postx, @putx, @patchx, @deletex) automatically include Laravel's CSRF token (detailed in Actions)

Validation Integration: Use Laravel's validation system with signals, with automatic error signal updates (complete guide in Validation)

File Uploads: Handle base64-encoded file uploads from the frontend with signals()->store() (tutorial in File Uploads)

Route Discovery: Optional attribute-based routing that generates routes from controller methods (advanced feature in Route Discovery)

Custom Attributes

data-error: Automatically display validation errors for specific fields based on Laravel's error structure

data-navigate: Client-side navigation that works with Laravel routes (complete guide in Navigation)

data-for: Hyper's implementation of loops for rendering lists (learn more in Lists & Loops)

data-if: Conditional rendering based on signal values (examples in Conditional Rendering)

How Hyper Works

Here's the flow of a typical Hyper interaction:

1. User Interaction: A user clicks a button with data-on:click="@postx('/increment')"
2. Automatic Signal Transmission: Datastar automatically sends all current signals (like {"count": 5}) to your Laravel controller
3. Server Processing: Your controller reads signals with signals('count'), processes business logic, runs validation
4. Response Building: You return hyper()->signals(['count' => 6])->view('status', $data)
5. SSE Delivery: Hyper sends Server-Sent Events back to the browser
6. Automatic Updates: Datastar receives the events and updates signals and DOM elements instantly

The entire cycle happens in milliseconds, creating an experience that feels as responsive as a single-page application, but with all your logic safely on the server where you can test it, validate it, and maintain it using Laravel's conventions.

What You Can Build

Hyper is well-suited for a wide range of applications:

• CRUD Interfaces: Contact managers, admin panels, and data tables with inline editing and instant updates
• Forms with Live Validation: Multi-step wizards, dynamic forms, and file uploads with real-time feedback
• Real-Time Dashboards: Live metrics, notifications, and streaming data
• Search and Filtering: Instant results as users type, with pagination and sorting
• Interactive Components: Tabs, modals, accordions, and other UI patterns that respond immediately

Getting Started

Ready to build reactive Laravel applications? The next sections will guide you through:

1. Installation: Set up Hyper in your Laravel application
2. Your First App: Build a complete counter application step by step
3. Core Concepts: Understand signals, reactivity, and the request cycle

By the end of the Getting Started section, you'll understand how Hyper works and be ready to build your own reactive Laravel applications.

Prerequisites

This documentation assumes you're comfortable with:

• Laravel Fundamentals: Routes, controllers, Blade templates, and validation
• Basic HTML/CSS: Understanding of HTML attributes and CSS selectors
• HTTP Concepts: Familiarity with GET/POST requests and how web applications communicate

You don't need deep JavaScript knowledge. Hyper handles the reactive frontend, letting you focus on Laravel code you already understand.