Skip to main content
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.
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.

​
Data modes

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

empty

Every SDK call resolves to empty results. Great for verifying empty states. Fully offline.

dummy

Returns generated schema-shaped content and App Data records, plus sample products and forms. Fully offline. Default.

local

Loads fixtures from dev.fixturesDir (default data) — JSON and/or CSV. Fully offline and suitable for project-specific content.

preview

Proxies Webstorio’s public API for your subdomain, so the preview reflects your real project data.
Set the default in config, or override per run:
preview mode requires a published project. The other modes are fully offline.

​
Local fixtures

Use local mode when hardcoded sample data is not representative enough. Definitions still come from schemasDir; fixtures supply rows:
CSV (content): headers slug, optional status / category / category_key, plus field keys matching the content type. Other columns become dataJson. CSV (App Data): field keys as columns (optional id). JSON: one object or an array per file; same shape as the SDK (slug, status, dataJson, …). If both content/blog.csv and content/blog/*.json exist, the CSV wins. To push fixtures to a remote project (not part of push), use webstorio seed. App Data creates, updates, and deletes stay in browser memory until reload. Form submissions and cart changes behave the same way. Local preview never writes fixture files or calls payment, email, webhook, or authentication providers.

​
Live reload

The dev server watches pages, components, assets, schemas, fixtures, and webstorio.config.ts. Saving any watched file reloads the browser. If a page 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 and dev config for the full reference.