Quick Start

Build your first Diffyne component in 5 minutes!

1. Generate Component

bash

php artisan make:diffyne Counter

This creates:

app/Diffyne/Counter.php - Component class
resources/views/diffyne/counter.blade.php - Component view

2. Component Class

Open app/Diffyne/Counter.php and define your component:

php

<?php

namespace App\Diffyne;

use Diffyne\Attributes\Invokable;
use Diffyne\Component;

class Counter extends Component
{
    public int $count = 0;

    #[Invokable]
    public function increment()
    {
        $this->count++;
    }

    #[Invokable]
    public function decrement()
    {
        $this->count--;
    }
}

Key Points:

Public properties are reactive - changes trigger UI updates
Methods must be marked with #[Invokable] to be called from the browser (security feature)
No need for manual state management

3. Component View

Open resources/views/diffyne/counter.blade.php:

blade

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md">
    <div class="text-center">
        <h2 class="text-2xl font-bold mb-4">Counter</h2>
        
        <div class="text-4xl font-bold mb-6">
            {{ $count }}
        </div>
        
        <div class="space-x-4">
            <button 
                diff:click="decrement"
                class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">
                -
            </button>
            
            <button 
                diff:click="increment"
                class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
                +
            </button>
        </div>
    </div>
</div>

Key Concepts:

displays the current count
diff:click="increment" calls the method on the server
Changes are automatically synced via Virtual DOM diff

4. Use Component

Add the component to any Blade view. Make sure your layout includes the required directives:

blade

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    @diffyneStyles
</head>
<body>
    @diffyne('Counter')
    
    @diffyneScripts
</body>
</html>

Important:

@diffyneStyles must be in the <head> section
@diffyneScripts must be before the closing </body> tag

5. See It In Action

Visit your page and click the buttons. Each click:

Sends AJAX request to server
Server updates $count
Re-renders component
Computes minimal DOM diff
Applies patch to browser (only the changed text node!)

How It Works

User clicks button
    ↓
JavaScript sends AJAX request with method name
    ↓
Server calls increment() method
    ↓
$count property changes
    ↓
Component re-renders to Virtual DOM
    ↓
Diff engine computes minimal patch
    ↓
Patch sent to browser (~50 bytes)
    ↓
DOM updated (only the count text)

What Makes Diffyne Fast?

Instead of sending full HTML like:

html

<div class="text-4xl font-bold mb-6">1</div>

Diffyne sends a minimal patch:

json

{"type":"text","node":"#text-42","value":"1"}

Result: 70-95% smaller payloads than traditional approaches.

Next Steps

Ready to build more? Check out:

Your First Component - Build a complete todo list component
Data Binding - Connect forms to component properties
Forms & Validation - Handle form submissions and validation
Examples - See real-world component examples

Quick Start ​

1. Generate Component ​

2. Component Class ​

Key Points: ​

3. Component View ​

Key Concepts: ​

4. Use Component ​

5. See It In Action ​

How It Works ​

What Makes Diffyne Fast? ​

Next Steps ​