Interactive Demos

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

Click to Edit In-Place

Swap a static display element with an editable form in-place, then save and restore the card view.

Controller & Template Code

// Read view:
<div id="contact-card">
    <p><strong>Name:</strong> Alex Mercer</p>
    <p><strong>Status:</strong> Available</p>
    <button data-nq-get="/api/demo/contact/edit" data-nq-target="#contact-card" data-nq-swap="outerHTML">
        Edit Profile
    </button>
</div>

// Edit view returned by server:
<form data-nq-post="/api/demo/contact/save" data-nq-target="#contact-card" data-nq-swap="outerHTML">
    <input type="text" name="name" value="Alex Mercer">
    <button type="submit">Save</button>
</form>

Live Interactive Output

Name: Alex Mercer

Role: Senior Systems Architect

Status: Active Maintainer