> ## Documentation Index
> Fetch the complete documentation index at: https://docs.go-mizu.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Real-time interactive applications with WebSockets

The live template creates real-time applications with WebSocket support. Normal web pages only update when you refresh them. Real-time apps update automatically - like chat apps or live dashboards. WebSockets keep a connection open between your browser and the server, so the server can push updates to you instantly without you asking.

## When to Use This Template

Use the live template when:

* **Real-time updates** - Data changes pushed to clients instantly
* **Interactive UI** - User actions trigger server-side updates
* **Live dashboards** - Metrics, monitoring, feeds
* **Collaborative features** - Chat, notifications, presence

## What You Get

* **Live views** - Server-rendered UI that updates automatically
* **WebSocket handling** - Built-in connection management
* **Pub/sub messaging** - Broadcast to all or specific clients
* **Session management** - Track connected users

## Quick Start

```bash theme={null}
mizu new myapp --template live
cd myapp
go mod tidy
mizu dev
```

Open `http://localhost:8080` to see a live counter example.

## How It Works

### 1. User Loads Page

Server renders the initial HTML.

### 2. WebSocket Connects

JavaScript connects to `/ws` endpoint.

### 3. User Interacts

Click events send messages to server.

### 4. Server Updates

Server processes message, sends HTML back.

### 5. UI Updates

Client replaces DOM with new HTML.

## Project Structure

```
myapp/
├── cmd/server/main.go        # Entry point
├── app/server/
│   ├── app.go                # Application setup
│   └── routes.go             # Routes
├── handler/
│   ├── home.go               # Home page
│   └── counter.go            # Counter live view
├── assets/                   # Static files
├── views/                    # Templates
└── go.mod
```

## Example: Counter

```go theme={null}
// handler/counter.go
func Counter(live *live.Server) mizu.Handler {
    return func(c *mizu.Ctx) error {
        return c.Render("pages/counter", nil)
    }
}

// WebSocket handler
func (h *CounterHandler) OnMessage(ctx context.Context, s *live.Session, topic string, data []byte) {
    switch topic {
    case "increment":
        h.count++
    case "decrement":
        h.count--
    }

    // Re-render and send to client
    html := h.render()
    s.Send("update", html)
}
```

## Key Features

### Live Updates

Push HTML updates to connected clients:

```go theme={null}
// Send update to one session
session.Send("update", html)

// Broadcast to all sessions
server.Publish("counter", "update", html)
```

### Session State

Track per-connection state:

```go theme={null}
func OnConnect(ctx context.Context, s *live.Session) error {
    s.Set("username", "anonymous")
    return nil
}
```

### Topics

Subscribe to specific channels:

```go theme={null}
session.Subscribe("chat:room1")
server.Publish("chat:room1", "message", data)
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Project Structure" icon="folder" href="/cli/live/structure">
    Understand every file
  </Card>

  <Card title="Tutorial" icon="graduation-cap" href="/cli/live/tutorial">
    Build a real-time app
  </Card>
</CardGroup>