Routing

Every page in a Webstorio CLI project is a React module registered with a slug in webstorio.config.ts. The slug is the URL path on both webstorio dev and the published site.

Register a route

webstorio.config.ts

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

Slug	URL
`"/"`	`/` (home — always `type: "system"`)
`"about"`	`/about`
`"docs/guide"`	`/docs/guide`

Slugs are path segments separated by /. Do not include a leading slash except for home ("/").
Exactly one page should use slug: "/".
Header and footer are components (_header, _footer), not pages — they wrap every route and are not visited as their own URLs.

Full field reference: Configuration → pages.

Nested routes

Use multiple segments for hierarchy:

{ file: "pages/docs-getting-started.tsx", slug: "docs/getting-started", title: "Getting started" },

That serves /docs/getting-started. Nesting is only in the slug string — you do not need a matching folder tree under pages/ (flat files are fine).

Dynamic routes (wildcards)

A path segment wrapped in {…} is a wildcard. One page module handles every URL that matches the pattern:

{
  file: "pages/blog-detail.tsx",
  slug: "blog/{content_entry_id}",
  title: "Post",
},

Pattern	Matches	Does not match
`blog/{content_entry_id}`	`/blog/abc-123`	`/blog`, `/blog/a/b`
`store/product/{product_slug}`	`/store/product/mug--id`	`/store/products`
`docs/{section}/{topic}`	`/docs/api/auth`	`/docs/api`

Rules:

Param names must be {name} where name starts with a letter or _, then letters, digits, _, or -.
Segment count must match exactly (no optional trailing segments).
Exact static routes win over wildcards when both could apply.
The same rules apply in webstorio dev and on the live site.

Read params in page code

pages/blog-detail.tsx

import { useEffect, useState } from "react";

export default function BlogDetail() {
  const [entryId, setEntryId] = useState<string | null>(null);

  useEffect(() => {
    const params = window.webstorio.getPathParams();
    setEntryId(params.content_entry_id ?? null);
  }, []);

  // Fetch with getContentEntryById(contentTypeKey, entryId), etc.
  return <main>{entryId}</main>;
}

getPathParams() returns an object of param name → decoded path segment. It is available in local preview and on published pages. See Client SDK → Dynamic routes.

Feature page conventions

Dashboard create-page and webstorio generate use stable slug patterns so SDK helpers and deep links stay consistent:

Feature	Typical slugs
Content list	`content/{typeKey}`
Content detail	`content/{typeKey}/{content_entry_id}`
Content category	`content/category/{categoryKey}`
Form	`form/{formKey}`
Store	`store/products`, `store/product/{product_slug}`, `store/checkout`
Orders (with auth)	`store/orders`, `store/orders/{order_id}`
Auth	`auth/sign-in`, `auth/account`

You can use custom slugs (for example blog/{content_entry_id}) — just keep list links and getPathParams() keys aligned with the names you chose.

Linking between pages

Use normal <a href="…"> (or your own router helpers). Paths are site-relative:

<a href="/blog">All posts</a>
<a href={`/blog/${entry.id}`}>Read more</a>
<a href="/store/product/${encodeURIComponent(slug)}">View product</a>

For store product detail, the platform often uses slug--id in the {product_slug} segment so the page can resolve by slug or id.

Configuration — slug field details
Local development — preview and data modes
webstorio generate — scaffold feature routes
Client SDK — getPathParams() and data methods

Get started

Explanation

How-to

Help

Register a route

Nested routes

Dynamic routes (wildcards)

Read params in page code

Feature page conventions

Linking between pages

​Register a route

​Nested routes

​Dynamic routes (wildcards)

​Read params in page code

​Feature page conventions

​Linking between pages

​Related

Register a route

Nested routes

Dynamic routes (wildcards)

Read params in page code

Feature page conventions

Linking between pages

Related