> ## 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.

# How the CLI works

> Create Webstorio sites as multi-file local projects, preview them locally, and deploy with a single command.

The Webstorio CLI lets you build sites the way developers like to work: real
`.tsx` files in your editor, shared components, version control, and a live
local preview. When you're ready, one command syncs everything to a Webstorio
project where the server compiles and hosts it.

<Note>
  **Alpha** — the Webstorio CLI is in active development, so commands and
  configuration may change between releases. See the [CLI
  changelog](/cli/changelog) for what's new, and share feedback at
  [hello@webstorio.com](mailto:hello@webstorio.com).
</Note>

## How it works

Pages and components are standard **React** (`.tsx`) — there's no bespoke
framework to learn, just React plus the
`window.webstorio` SDK. A Webstorio site is a small set of files:

* a `webstorio.config.ts` that lists your pages and components,
* one `.tsx` module per page (each with a `default` export), and
* shared components you import from your pages.

```text theme={"dark"}
my-site/
├─ webstorio.config.ts
├─ components/
│  ├─ _header.tsx
│  ├─ _footer.tsx
│  └─ Testimonials.tsx   # imported by pages, bundled automatically
└─ pages/
   ├─ home.tsx
   ├─ about.tsx
   └─ contact.tsx
```

See [Project structure](/developer/project-structure) for brand, assets, schemas,
and how each folder maps to config.
When you `push`, the CLI **composes** each page into a single self-contained
module — inlining your relative imports (like `Testimonials`) and keeping
allowlisted packages (React, lucide-react, …) as imports. It uploads only that
`code`; the **Webstorio server compiles it authoritatively** into the stored
HTML. The CLI never uploads compiled output, so what you see live always matches
what the platform produced.

<Note>
  Production compilation always happens on the Webstorio server. The CLI only
  composes and uploads source `code`.
</Note>

## Install

```bash theme={"dark"}
npm install -D @webstorio/cli
```

The package exposes a `webstorio` binary.

## Quickstart

```bash theme={"dark"}
npx webstorio init            # scaffold config + folders
npx webstorio update          # install supported library versions
npx webstorio dev             # live local preview at http://localhost:9678
npx webstorio login           # authenticate via your browser
npx webstorio push --publish  # sync + publish to Webstorio
```

New to the CLI? Follow [Your first site with the CLI](/developer/your-first-site) for
a guided, step-by-step walkthrough.

## Next steps

* [Project structure](/developer/project-structure) — folders and what goes where
* [Local development](/developer/local-development) — preview and data modes
* [Routing](/developer/routing) — slugs, nested paths, and `{param}` wildcards
* [Deploying](/developer/deploying) — login, status, push, and publish
* [Feature schemas](/developer/schemas) — CMS / forms / App Data in `schemasDir`
* [Configuration](/cli/configuration) and [Commands](/cli/commands) — reference
* [CLI, MCP, and SDK](/developer/cli-mcp-sdk) — how the pieces fit
* [CLI changelog](/cli/changelog) — release notes