# LivePage and start

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

A page is an ordinary decorated class; extending LivePage is optional. start() is the concise entry point that creates a LiveHtmlServer for one or more page classes.

## Explain it like I’m five

LivePage is one server-owned screen; start is the power button that publishes your collection of screens and their realtime connection.

## When should I use it?

Use a LivePage class when a route owns state, actions, lifecycle, and rendered output; use start to launch the assembled application.

## Follow the example

This source is part of the [complete realtime recipe](/docs/reference/0.13.0/recipes/realtime.md). Follow its setup and tests.

```tsx
import { action, page, start, state, type LiveHtmlStartOptions } from 'redweb';
import { runApp } from './run-app';

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

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

    render() {
        return (
            <main class="home">
                <h1>A counter owned by the server</h1>
                <p>Open this page in two tabs. Either button updates both.</p>
                <button rw-click="increment">
                    Count <output>{this.count}</output>
                </button>
            </main>
        );
    }
}

export function createApp(options: LiveHtmlStartOptions = {}) {
    return start(CounterPage, { port: Number(process.env.PORT ?? 8181), templateRoot: __dirname, ...options });
}

if (require.main === module) runApp(createApp);
```

1. The page decorator assigns the HTTP route and rendering metadata.
2. A new page instance is created according to its configured scope.
3. start builds the HTTP and socket surfaces, then returns a handle for orderly shutdown.

## 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 page constructors cheap and move cancellable preparation into lifecycle hooks. Always retain and await the returned shutdown handle.