Co-authored by
Hayden BleaselJTBDOS
Julian BenegasBaseHub
JTBDOS 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, JTBDOS uses BaseHub as the CMS. However, it is also possible to use other sources, such as Content Collections to generate type-safe data collections from MDX files.

​
Setup

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

​
1. Fork the basehub/JTBDOS template

You’ll be forking a BaseHub repository which contains the JTBDOS 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 to use the new BaseHub token. For example:
apps/web/.env
BASEHUB_TOKEN="<token>"

​
How it works

​
The Feed component

The Feed component is a wrapper around BaseHub’s Pump component — a React Server Component that gets generated with the basehub SDK. It leverages RSC, Server Actions, and the existing BaseHub client to subscribe to changes in real time with minimal development effort. It’s also setup by default to use Next.js Draft Mode, allowing you to preview draft content in your app.

​
The Body component

The Body component is a wrapper around BaseHub’s RichText component — BaseHub’s rich text renderer which supports passing custom handlers for native html elements and BaseHub components.

​
The TableOfContents component

The TableOfContents component leverages the Body component to render the table of contents for the current page.

​
The Image component

The Image component is a wrapper around BaseHub’s BaseHubImage component, which comes with built-in image resizing and optimization. BaseHub recommendeds using the BaseHubImage component instead of the standard Next.js Image component as it uses Image under the hood, but adds a custom loader to leverage BaseHub’s image pipeline.

​
The Toolbar component

The Toolbar component is a wrapper around BaseHub’s Toolbar component, which helps manage draft mode and switch branches in your site previews. It’s automatically mounted on CMS pages.