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

# Client SDK overview

> window.webstorio browser SDK — runtime, environments, and method index for published Webstorio sites.

The Webstorio **client SDK** is available on every published site and in the builder preview as `window.webstorio`. Use it in page code to load CMS content, submit forms, manage carts, and handle visitor sign-in.

## Runtime

```javascript theme={"dark"}
// "public" on live sites; "preview" in the builder
window.webstorio.env;

// "published" | "preview" | "dummy" | "empty"
window.webstorio.dataMode;
```

| `dataMode`  | When                                    |
| ----------- | --------------------------------------- |
| `published` | Live site — real data from your project |
| `preview`   | Builder preview — draft or preview data |
| `dummy`     | Template preview with sample data       |
| `empty`     | Blank page scaffold                     |

## Feature-gated methods

Methods only work when the matching [website feature](/guides/website-features) is enabled:

| Feature             | SDK area             |
| ------------------- | -------------------- |
| Content & CMS       | CMS methods          |
| Form & Survey       | Form methods         |
| Online Store        | Store & cart methods |
| User Authentication | Auth & My orders     |
| App Data            | Custom table CRUD    |

Check what's active:

```javascript theme={"dark"}
const { features } = await window.webstorio.getFeatures();
```

## Method index

<AccordionGroup>
  <Accordion title="General" icon="layers">
    | Method                    | Description                                |
    | ------------------------- | ------------------------------------------ |
    | `getFeatures()`           | Enabled website features                   |
    | `getPathParams()`         | Dynamic route params from slug wildcards   |
    | `getImageUrl(url, opts?)` | Image URL helper with placeholder fallback |
  </Accordion>

  <Accordion title="CMS" icon="file-text">
    `getContentTypes`, `getContentEntries`, `getContentEntryById`, `getContentCategories`, `getContentCategoryById`

    → [CMS SDK](/api-reference/sdk/cms)
  </Accordion>

  <Accordion title="Forms" icon="clipboard-list">
    `getFormSchema`, `getForm`, `submitForm`, `getFormSubmissions`,
    `getFormSubmissionById`

    → [Forms SDK](/api-reference/sdk/forms)
  </Accordion>

  <Accordion title="App Data" icon="database">
    `getDataModels`, `listRecords`, `getRecord`, `createRecord`, `updateRecord`, `deleteRecord`

    → [App Data SDK](/api-reference/sdk/app-data)
  </Accordion>

  <Accordion title="Store" icon="shopping-cart">
    **Catalog:** `getStore`, `getProducts`, `getProductById`, `getProductBySlug`, `getProductCategories`

    **Cart:** `getCart`, `addToCart`, `setCartItems`, `setCartItemQuantity`, `removeFromCart`, `clearCart`

    **Orders:** `createOrder`, `getMyOrders`, `getMyOrderById`

    → [Store SDK](/api-reference/sdk/store)
  </Accordion>

  <Accordion title="Auth" icon="lock">
    `signInWithWebstorio`, `signOut`, `getSession`, `getCurrentUser`, `getAuthConfig`

    → [Auth SDK](/api-reference/sdk/auth)
  </Accordion>
</AccordionGroup>

## Dynamic routes

Pages with wildcard slugs like `blog/{content_entry_id}` expose params synchronously:

```javascript theme={"dark"}
const params = window.webstorio.getPathParams();
// { content_entry_id: "my-post-a1b2c3d4-e5f6-4789-a012-3456789abcde" }
```

CMS detail URLs use **slug + hyphen + entry UUID** format.

## Sessions and permissions

* **Reads** — usually public; no sign-in required.
* **Writes** — forms, orders, and App Data may require `credentials: "include"` and/or a signed-in visitor.
* **App Data** — each table's access preset (public read, signed-in write, etc.) applies.

## Calling a method

Every method is available on the global `window.webstorio` object and returns a promise:

```javascript theme={"dark"}
const { entries } = await window.webstorio.getContentEntries("blog_post", {
  status: "published",
  limit: 12,
});
```

For task-based, in-context examples (listing a blog, wiring a form, building a cart), see the [how-to guides](/guides/content-and-cms). For per-method details, use the feature reference pages above.