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

# Local development

> Preview your site locally with live reload and switchable SDK data modes.

`webstorio dev` serves a live preview of your site. It composes each page and
component with esbuild, resolves dependencies from the same pinned versions the
server uses, and reloads the browser whenever you save a file.

```bash theme={"dark"}
npx webstorio dev
# Local:     http://localhost:9678
# Data mode: dummy
# Pages:     /, /about, /services, /contact
```

Every configured page is routable at its slug (the home page is `/`). Header and
footer components render around each page, just like production. Dynamic slugs
with `{param}` segments work in preview the same way as on the live site — see
[Routing](/developer/routing).

## Data modes

Pages can read CMS content, store products, forms, and auth state through the
`window.webstorio` SDK. `dev` provides that SDK in one of three modes:

<CardGroup cols={3}>
  <Card title="empty" icon="circle-dashed">
    Every SDK call resolves to empty results. Great for verifying empty states.
    Fully offline.
  </Card>

  <Card title="dummy" icon="flask-conical">
    Returns realistic mock content, products, and forms so you can build against
    representative data. Fully offline. **Default.**
  </Card>

  <Card title="preview" icon="cloud">
    Proxies Webstorio's public API for your subdomain, so the preview reflects
    your real project data.
  </Card>
</CardGroup>

Set the default in config, or override per run:

```bash theme={"dark"}
npx webstorio dev --mode empty
npx webstorio dev --mode preview
```

<Note>
  `preview` mode requires the project to exist (push at least once). `empty` and
  `dummy` need nothing but the CLI.
</Note>

## Live reload

The dev server watches `pages/**`, `components/**`, and `webstorio.config.ts`.
Saving any file recompiles the affected module and reloads the browser. If a file
has a compile error, the preview shows the error message instead of a blank page.

## Fidelity

The local preview mirrors production closely (same React/dependency versions,
same header/body/footer composition), but it is **not** the authoritative build.
The final HTML is always produced by the server on `push`.

See [`webstorio dev` options](/cli/commands#webstorio-dev) and
[`dev` config](/cli/configuration) for the full reference.