> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zopio.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> How the CMS is configured in `zopio`.

`zopio` has a dedicated CMS package that can be used to generate type-safe data collections from your content. This approach provides a structured way to manage your content while maintaining full type safety throughout your application. By default, next-forge uses [BaseHub](https://basehub.com) as the CMS.

## Key Features

* **Type-safe content**: Generate TypeScript types from your content schema
* **Real-time updates**: Automatic revalidation when content changes
* **Draft mode support**: Preview unpublished content in your application
* **Structured content**: Organize content in collections with relationships
* **Rich text support**: Render rich text content with custom components
* **Image optimization**: Built-in image resizing and optimization

## Setup

Here's how to quickly get started with your new CMS.

### 1. Fork the [`basehub/zopio`](https://basehub.com/basehub/zopiolabs/zopio?fork=1) template

You'll be forking a BaseHub repository which contains the zopio compatible content schema.

Once you fork the repository, you'll need to get your Read Token from the "Connect to your App" page:

```
https://basehub.com/<team-slug>/<repo-slug>/dev/main/dev:connect
```

The token will look something like this:

```
bshb_pk_<password>
```

Keep this connection string handy, you will need it in the next step.

### 2. Update your environment variables

Update your [environment variables](/setup/env) to use the new BaseHub token. For example:

```ts apps/web/.env theme={"system"}
BASEHUB_TOKEN="<token>"
```

### 3. Start the dev server

When you run `pnpm dev`, the CMS package will generate the type-safe BaseHub SDK, and watch changes to your CMS's schema.

<Note>You might need to run `Restart TS Server` in your IDE for TypeScript to pick up the new types.</Note>

## Querying Basics

The structure of the CMS should look something like this:

```txt theme={"system"}
- Blog
  - Posts
  - Authors
  - Categories
- Legal Pages
```

So in order to get all posts, you'd write a query like this:

```ts theme={"system"}
{
  blog: {
    posts: {
      items: {
        _title: true,
        _slug: true,
        authors: { _title: true }, // references the authors collection
        // ...
      },
    },
  },
}
```

Starter queries are provided for you in the `cms` package, within the `blog` and `legal` objects. You can read more about the BaseHub SDK in [their docs](https://docs.basehub.com/nextjs-integration/).

## Revalidation

A key part of any good CMS integration is the ability to revalidate content when it changes. To do that, BaseHub comes with automatic [on-demand revalidation](https://docs.basehub.com/nextjs-integration/environments-and-caching#on-demand-revalidation-recommended).

<CardGroup>
  <Card title="Components" icon="puzzle-piece" href="/packages/cms/components">
    Explore the components that come with the CMS package
  </Card>

  <Card title="Metadata" icon="tag" href="/packages/cms/metadata">
    Learn how to configure title, description, and Open Graph images in the CMS
  </Card>
</CardGroup>