LivePage and start

Documentation for Redweb 0.16.1. Install that exact version when following these examples.

Pages are plain decorated classes; extending LivePage is optional. Prefer defineApp({ pages: [...] }) and app.run() for startup. start() remains a supported lower-level convenience.

Explain it like I’m five

A page class describes one server-owned screen. defineApp groups the screens and socket routes; run opens their shared front door.

When should I use it?

Use a plain @page class for route-owned state, actions and rendering. LivePage inheritance and start remain compatibility options, not requirements.

Follow the example

This API pattern illustrates the named surface; it may require application-owned classes, credentials, or assets. Start from a complete recipe for a runnable application.

import { action, defineApp, page, state } from 'redweb';

@page('/', { shared: true })
class CounterPage {
    @state() count = 0;

    @action()
    increment() { this.count += 1; }

    render() {
        return <button rw-click="increment">Count {this.count}</button>;
    }
}

const app = defineApp({ pages: [CounterPage] });
app.run();

1. @page declares the HTTP route and page policy.
2. @state reads in TSX update automatically; no output wrapper or repeated binding name is required.
3. defineApp registers the page, and app.run starts it. The example uses shared state deliberately so two tabs see the same counter.

Methods and members

start(PageClass, options?)

Starts one decorated page, or an array of pages, with the concise Live HTML server API.

loading(context)

Optional cancellable hook that runs before the initial server render.

connected(context)

Optional hook that runs after the authenticated live socket connects.

disconnected(context)

Optional hook for stopping connection-owned timers and subscriptions.

disposed()

Optional idempotent final cleanup hook for pages and components.

What should I watch for?

Keep constructors cheap and use lifecycle hooks for cancellable work. Connection-scoped state is the default; shared state is public to all authorized visitors of that page.