Project structure

A CLI project is a small set of React files plus a config that maps them to routes and features. webstorio init scaffolds this layout:

my-site/
├─ webstorio.config.ts   # pages, components, features, branding, SEO, dev
├─ package.json
├─ tsconfig.json
├─ brand/
│  ├─ brand-info.md
│  └─ design-system.md
├─ components/
│  ├─ _header.tsx
│  └─ _footer.tsx
├─ pages/
│  └─ home.tsx
├─ assets/               # optional — favicon, OG images (default assetsDir)
└─ schemas/              # optional — CMS / forms / App Data JSON
   ├─ content/
   ├─ forms/
   └─ data/

Root files

Path	Role
`webstorio.config.ts`	Project identity (`name`, `subdomain`), `pages`, `components`, `features`, `branding`, `dev`, and optional `schemasDir` / `assetsDir`. Full schema: Configuration.
`package.json`	Scripts (`dev`, `push`, …) and dependencies. Run `webstorio update` to align allowlisted library versions.
`tsconfig.json`	TypeScript options for local editing.

`pages/`

One .tsx module per route. Each file must have a default export. Register every page in webstorio.config.ts with file, slug, and title:

pages: [
  { file: "pages/home.tsx", slug: "/", title: "Home", type: "system" },
  { file: "pages/about.tsx", slug: "about", title: "About" },
],

Use slug: "/" for the home page (type: "system").
Nested or dynamic routes use path segments (e.g. blog/{content_entry_id}). How-to: Routing.

`components/`

Two kinds of components: Site chrome (_header, _footer) — listed under components in the config with slugs "_header" and "_footer". Pushing them enables the matching header/footer features on the live site. Shared UI — any other .tsx you import with a relative path (for example ../components/Testimonials). Do not list these in the config; the CLI inlines them into each page that imports them on push.

pages/about.tsx

import Testimonials from "../components/Testimonials";

export default function About() {
  return (
    <main>
      <Testimonials />
    </main>
  );
}

`brand/`

Markdown the AI and dashboard use for voice and visual guidance. Point to the files from branding in config:

brandInfoFile: "brand/brand-info.md"
designSystemFile: "brand/design-system.md"

You can also set brandInfo / designSystem as inline strings instead of files.

`assets/`

Default assetsDir is assets. Paths in branding and page SEO (favicon, defaultOgImage, per-page ogImage) are relative to this folder.

`schemas/` (optional)

Set schemasDir (for example "schemas") when you want CMS content types, forms, or App Data tables versioned in the repo:

Folder	Feature
`schemas/content/*.json`	Content & CMS
`schemas/forms/*.json`	Form & Survey
`schemas/data/*.json`	App Data

When the directory is present, webstorio push upserts schemas by key. When absent, remote schemas are left unchanged. See Feature schemas for layout, file shape, and webstorio schema commands.

Imports and compilation

Pages and components are plain React (.tsx).
Import only from supported libraries; everything else must be a relative import (bundled on push).
Call window.webstorio for live site data.
On push, the CLI composes each page and uploads source; the server compiles authoritatively.

Next steps

Your first site with the CLI — build one end to end
How the CLI works — compose-and-push model
Configuration — full webstorio.config.ts fields
Local development — webstorio dev and data modes

Get started

Explanation

How-to

Help

Root files

`pages/`

`components/`

`brand/`

`assets/`

`schemas/` (optional)

Imports and compilation

Next steps

​Root files

​pages/

​components/

​brand/

​assets/

​schemas/ (optional)

​Imports and compilation

​Next steps

Root files

`pages/`

`components/`

`brand/`

`assets/`

`schemas/` (optional)

Imports and compilation

Next steps