Interactive Demos

Experience server-rendered speed and reactivity with zero SPA build tooling.

Click to Load Fragment

Load and swap server-rendered HTML components asynchronously with zero client-side boilerplate.

Controller & Template Code

// In Controller:
#[Route('/api/demo/timestamp', methods: ['GET'])]
public function timestamp(): Response {
    $time = date('H:i:s');
    $hash = bin2hex(random_bytes(4));
    return new Response(
        "<div class='status-badge status-success'>Server Time: {$time}</div>" .
        "<p style='margin-top: 0.5rem; color: #8b949e;'>Payload Hash: <code>{$hash}</code></p>"
    );
}

// In HTML Template:
<button 
    data-nq-get="/api/demo/timestamp" 
    data-nq-target="#timestamp-result" 
    data-nq-swap="innerHTML"
    class="btn-action">
    ⚡ Fetch Server Fragment
</button>
<div id="timestamp-result" style="margin-top: 1rem;">
    <em>Click the button to request HTML fragment from server</em>
</div>

Live Interactive Output

Click the button to request HTML fragment from server