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

# Project structure

> Layout of a Webstorio CLI project — config, pages, components, brand, assets, and optional schemas.

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:

```text theme={"dark"}
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](/cli/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`:

```ts theme={"dark"}
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](/developer/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`.

```tsx pages/about.tsx theme={"dark"}
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](/developer/schemas)
for layout, file shape, and `webstorio schema` commands.

## Imports and compilation

* Pages and components are plain **React** (`.tsx`).
* Import only from [supported libraries](/api-reference/supported-libraries);
  everything else must be a relative import (bundled on push).
* Call [`window.webstorio`](/api-reference/sdk/overview) 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](/developer/your-first-site) — build one end to end
* [How the CLI works](/developer/how-cli-works) — compose-and-push model
* [Configuration](/cli/configuration) — full `webstorio.config.ts` fields
* [Local development](/developer/local-development) — `webstorio dev` and data modes