@LiveComponentImpl
public class Counter extends LiveComponent {

    @State
    private int count = 0;

    @Action
    public void increment() { count++; }

    @Action
    public void decrement() { count--; }

    public int getCount() { return count; }

    @Override
    public String template() {
        return "components/counter.html";
    }
}

<div live:id="{{ _id }}">
    <h2>Count: {{ count }}</h2>

    <button live:click="increment">+ Increment</button>
    <button live:click="decrement">- Decrement</button>

    <div live:loading>Updating...</div>
</div>

{{ component('Counter') | raw }}

{{ component('UserCard', { userId: user.id }) | raw }}

No setup required. The LiveComponents runtime script is injected automatically before </body> and SessionMiddleware is applied globally to all routes.

Fields annotated with @Prop are injected before onMount() and never exposed in client state.

@LiveComponentImpl
public class UserCard extends LiveComponent {

    @Prop
    private int userId;

    @State
    private User user;

    @Override
    public void onMount() {
        user = User.findById(userId);
    }

    @Override
    public String template() {
        return "components/user-card.html";
    }
}

{{ component('UserCard', { userId: user.id }) | raw }}

@Override
public void onMount() {
    // Called once after props injection, before first render
    // Use to load initial data
}

@Override
public void onUpdate() {
    // Called after every action execution, before re-render
    // Use to recompute derived state
}

session("key")              // Read from session
session("key", value)       // Write to session
param("name")               // Query/form parameter
param("name", "default")    // With fallback
routeParam("id")            // Route parameter (:id)

Only methods annotated with @Action can be invoked from the client. Any unlisted method throws a ComponentException immediately.

@Action
public void save() {
    // Called via live:click="save"
}

@Action
public void delete(int id) {
    // Called via live:click="delete({{ id }})"
}

Actions can return a ComponentResponse to trigger a client-side navigation or dispatch a custom event after re-render.

@Action
public ComponentResponse save() {
    // Persist data...
    return redirect("/dashboard");
}

@Action
public ComponentResponse delete() {
    return emit("toast:show", Map.of("message", "Deleted!"));
}

// Listen to the event on the client
window.addEventListener("toast:show", (e) => {
    console.log(e.detail.message); // "Deleted!"
});

Mount a component after first paint to avoid blocking page render. The innerHTML is shown as a skeleton during fetch.

<!-- Plain -->
<div live:lazy="PlayerSearch"></div>

<!-- With props -->
<div live:lazy="UserCard" live:props='{"userId": 42}'></div>

<!-- With skeleton -->
<div live:lazy="PlayerSearch">
    <div class="animate-pulse h-8 bg-zinc-800 rounded"></div>
</div>