--- title: "Content Modeling" description: "This article explains what content modeling is." category: "concepts" audience: developers lastUpdated: "2026-04-22T23:55:38.000Z" --- # What is content modeling? Content modeling is the process of converting page designs into structured fields. For example, a blog has authors and posts. They are modeled using smaller pieces of content, like an author's photo and a post's title. A developer determines the kinds of content authors and posts contain through the process of content modeling. Prismic provides four main structures to model your content: fields, page types, slices, and custom types. # Fields Fields hold small pieces of website content, like text, images, and links. They are used to model larger pieces of content, like [page types](#page-types), [slices](#slices), and [custom types](#custom-types). > For a list of available fields and how to use them, see the [Fields](https://prismic.io/docs/fields.md) page. # Page types Page types represent the pages in your website. For example, homepages, landing pages, and blog posts are modeled using page types. A page type is designed around [slices](#slices), which are individual sections of a page made up of fields. A page type can use any number of slices or fields to model its content. A page type includes search engine optimization (SEO) and [unique identifier](https://prismic.io/docs/fields/uid.md) (UID) fields by default. ## How to create a page type Page types are created using the [Type Builder](https://prismic.io/docs/type-builder.md), a tool for building by hand, or the [Prismic CLI](https://prismic.io/docs/cli.md), a tool for AI agents. * **Type Builder:** > **Important** > > Type Builder is rolling out to new users. If you do not have access, use **Slice Machine**. 1. **Watch for changes** In your local website project, start the Prismic CLI's `sync` command. The CLI will watch for changes in the Type Builder and pull them into your project. ```sh npx prismic sync --watch ``` > **Tip**: You can pull Type Builder changes at any time using `npx prismic > sync`. 2. **Create a page type** In the Type Builder, select **Page types** from the sidebar and click **Create a new page type**. Provide the following in the dialog: * **Type**: Choose **Reusable type** or **Single type** depending on the type of page you are modeling. * **Reusable type**: There is no limit to how many pages of this type can be published. For example, a product or generic page. * **Single type**: Only one page of this type can be published. For example, a homepage. * **Name**: The label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understood name. * **API ID**: The ID used to reference the page type in the Content API. Use a short, snake-cased name. 3. **Add slices** In the **Slices** section, add a [slice](https://prismic.io/docs/slices.md) by clicking the **Add** button. From the menu, you can create a new slice or select an existing one. [Learn how to create slices](https://prismic.io/docs/slices.md#how-to-create-a-slice) 4. **Add fields** If you have content that shouldn't be modeled as a slice, add [fields](#fields) to the **static zone**. Fields in the static zone appear at the top of a page in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). 5. **Customize the page file** The Prismic CLI generates a matching page file based on the page type's [route](https://prismic.io/docs/routes.md) when the `sync` command runs. Customize the file as needed to match your design. > Learn how to customize a page file in the [Next.js](https://prismic.io/docs/nextjs.md#create-pages), [Nuxt](https://prismic.io/docs/nuxt.md#create-pages), or [SvelteKit](https://prismic.io/docs/sveltekit.md#create-pages) guide. You can now close the Prismic CLI `sync` command or create your next page type. * **Prismic CLI:** > Your AI agent can perform these steps for you. See [Prismic with AI](https://prismic.io/docs/ai.md) for details. 1. **Create a page type** Use the `prismic type create` command with the `--format page` flag: ```sh npx prismic type create "Page" --format page ``` Use the `--single` flag for pages that should only have one document, like a homepage: ```sh npx prismic type create "Homepage" --format page --single ``` The CLI adds a matching [route](https://prismic.io/docs/routes.md) to `prismic.config.json` automatically. 2. **Add slices** Use the `prismic slice connect` command to make a [slice](https://prismic.io/docs/slices.md) available to a page type. ```sh npx prismic slice connect call_to_action --to page ``` In this example, `call_to_action` refers to a slice's API ID and `page` refers to the **Page** page type's API ID. [Learn how to create slices](https://prismic.io/docs/slices.md#how-to-create-a-slice) 3. **Add fields** Use the `prismic field add` command to add [fields](#fields) to a page type. ```sh npx prismic field add text title --to-type page ``` TypeScript types are generated automatically each time the CLI updates a page type. [See the available field types](https://prismic.io/docs/fields.md) 4. **Customize the page file** The Prismic CLI generates a matching page file based on the page type's [route](https://prismic.io/docs/routes.md). Customize the file as needed to match your design. > Learn how to customize a page file in the [Next.js](https://prismic.io/docs/nextjs.md#create-pages), [Nuxt](https://prismic.io/docs/nuxt.md#create-pages), or [SvelteKit](https://prismic.io/docs/sveltekit.md#create-pages) guide. * **Slice Machine:** 1. **Open Slice Machine** In your Prismic project, start Slice Machine to begin editing content models. ```sh npx start-slicemachine --open ``` 2. **Create a page type** In Slice Machine, navigate to the **Page types** settings using the sidebar. Click the **Create** button in the top-right corner. In the modal that appears, choose **Reusable type** or **Single type** depending on the type of page you are modeling: * **Reusable type**: There is no limit to how many pages of this type can be published. For example, a product or generic page. * **Single type**: Only one page of this type can be published. For example, a homepage. The **page type name** determines the label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understood name. The **page type ID** determines the ID used to reference the page type in the Content API. Use a short, snake-cased name. 3. **Add slices** In the **slices** section, add a [slice](https://prismic.io/docs/slices.md) by clicking the **Add** button. From the menu, you can create a new slice or add one of the built-in templates. You can also add an existing slice if you already have one modeled. > Learn how to [create slices](https://prismic.io/docs/slices.md#how-to-create-a-slice) in the slices guide. 4. **(Optional) Add fields** If you have content that shouldn't be modeled as a slice, add fields to the **static zone**. Fields in the static zone appear at the top of a page in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). 5. **Push to Prismic** When your page type is ready for content writers, push it to your Prismic repository. Click **Review changes** in the sidebar. Then, if the changes look correct, click the **Push** button in the top-right corner. The Page Builder will now recognize your page type. 6. **Create a page file** Slice Machine provides a code snippet to bootstrap your website's page files. The snippet contains everything needed to query and display a page's content from Prismic. Open the page type in Slice Machine and click the **Page snippet** button in the top-right corner. Follow the instructions in the page snippet modal. Pages published in Prismic will now appear in your website. 7. **Add a route** Prismic needs to know your website's routes to fill in link URLs. Add a [route](https://prismic.io/docs/routes.md) to your project for the new page type. > Learn how to add routes in the [Next.js](https://prismic.io/docs/nextjs.md#define-routes), [Nuxt](https://prismic.io/docs/nuxt.md#create-slices), or [SvelteKit](https://prismic.io/docs/sveltekit.md#create-slices) guide. # Slices Slices are sections of a page — like a block of text, a hero, or a call to action. They are modeled using a collection of [fields](#fields). Content writers build pages using a stack of slices. Developers have control over which slices are available to content writers. For example, a homepage might allow a **Hero** slice, while a blog post might allow a **Quote** slice. When needed, slices can be made available to multiple page types. [Learn more about slices](https://prismic.io/docs/slices.md) # Custom types Custom types represent content that isn't a page. For example, website settings, navigation menus, and blog categories are modeled using custom types. Pages can reference and display content from custom types as needed. A custom type is modeled using a collection of [fields](#fields). ## How to create a custom type Custom types are created using the [Type Builder](https://prismic.io/docs/type-builder.md), a tool for building by hand, or the [Prismic CLI](https://prismic.io/docs/cli.md), a tool for AI agents. * **Type Builder:** > **Important** > > Type Builder is rolling out to new users. If you do not have access, use **Slice Machine**. 1. **Watch for changes** In your local website project, start the Prismic CLI's `sync` command. The CLI will watch for changes in the Type Builder and pull them into your project. ```sh npx prismic sync --watch ``` > **Tip**: You can pull Type Builder changes at any time using `npx prismic > sync`. 2. **Create a custom type** In the Type Builder, select **Custom types** from the sidebar and click **Create a new custom type**. Provide the following in the dialog: * **Type**: Choose **Reusable type** or **Single type** depending on the type of content you are modeling. * **Reusable type**: There is no limit to how many documents of this type can be published. For example, a category or tag. * **Single type**: Only one document of this type can be published. For example, website settings or a navigation menu. * **Name**: The label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understood name. * **API ID**: The ID used to reference the custom type in the Content API. Use a short, snake-cased name. 3. **Add fields** Add [fields](#fields) to the static zone as needed. 4. **(Optional) Add slices** > **Important** > > Slices are intended for [page types](#page-types) and should be avoided in custom types. In the **Slices** section, enable [slices](https://prismic.io/docs/slices.md) by clicking the toggle. Then, add a slice by clicking the **Add** button. From the menu, you can create a new slice or select an existing one. [Learn how to create slices](https://prismic.io/docs/slices.md#how-to-create-a-slice) * **Prismic CLI:** > Your AI agent can perform these steps for you. See [Prismic with AI](https://prismic.io/docs/ai.md) for details. 1. **Create a custom type** Use the `prismic type create` command. Custom is the default format, so no `--format` flag is needed. ```sh npx prismic type create "Author" ``` Use the `--single` flag for content that should only have one document, like website settings or a navigation menu: ```sh npx prismic type create "Settings" --single ``` 2. **Add fields** Use the `prismic field add` command to add fields to a custom type. ```sh npx prismic field add text site_title --to-type settings ``` TypeScript types are generated automatically each time the CLI updates a custom type. [See the available field types](https://prismic.io/docs/fields.md) 3. **(Optional) Add slices** > **Important** > > Slices are intended for [page types](#page-types) and should be avoided in custom types. Use the `prismic slice connect` command to make a slice available to a custom type. ```sh npx prismic slice connect call_to_action --to settings ``` In this example, `call_to_action` refers to a slice's API ID and `settings` refers to the **Settings** custom type's API ID. [Learn how to create slices](https://prismic.io/docs/slices.md#how-to-create-a-slice) * **Slice Machine:** 1. **Open Slice Machine** In your Prismic project, start Slice Machine to begin editing content models. ```sh npx start-slicemachine --open ``` 2. **Create a custom type** In Slice Machine, navigate to the **Custom types** settings using the sidebar. Click the **Create** button in the top-right corner. In the modal that appears, choose **Reusable type** or **Single type** depending on the type of content you are modeling: * **Reusable type**: There is no limit to how many pages of this type can be published. For example, a category or tag. * **Single type**: Only one page of this type can be published. For example, website settings or a navigation menu. The **custom type name** determines the label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understood name. The **custom type ID** determines the ID used to reference the custom type in the Content API. Use a short, snake-cased name. 3. **Add fields** Add **fields** to the static zone as needed. 4. **(Optional) Add slices** > **Important** > > Slices are intended for [page types](#page-types) and should be avoided in custom types. In the **slices** section, enable slices by clicking the toggle. Add a slice by clicking the **Add** button. From the menu, you can create a new slice or add one of the built-in templates. You can also add an existing slice if you already have one modeled. > Learn how to [create slices](https://prismic.io/docs/slices.md#how-to-create-a-slice) in the slices guide. 5. **Push to Prismic** When your custom type is ready for content writers, push it to your Prismic repository. Click **Review changes** in the sidebar. Then, if the changes look correct, click the **Push** button in the top-right corner. The Page Builder will now recognize your custom type. # Impact of pushing changes Here's what happens when you modify a content model's [fields](#fields) and push to production: * **Adding a field**: The new field appears with an empty default value. * **Removing a field**: The field no longer appears. * **Renaming a field**: If the API ID is changed, existing content is not transferred. The renamed field appears with an empty default value. If you need to rename a field, we recommend updating the field's label while keeping its API ID. The field's existing content will be retained and content writers will see the new label. > The [Content API](https://prismic.io/docs/fetch-content.md) will not reflect the content model changes until at least one page is published or archived. # Recommended models We recommend adding the following content models to most websites. ## Create a homepage type For a website's homepage, use a **Single** page type named **Homepage** with the route `/`. Content writers can only create one homepage, you can build homepage-only slices, and the page is fetched with [`getSingle()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#clientgetsingle). ```sh npx prismic type create "Homepage" --format page --single ``` [See the page type guide](#how-to-create-a-page-type) ## Create a reusable page type For general website pages, use a **Repeatable** page type named **Page** with the route `/:uid`. Content writers can create unlimited pages, you can build slices available to any page, and pages are fetched with [`getByUID()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#getbyuid). ```sh npx prismic type create "Page" --format page ``` [See the page type guide](#how-to-create-a-page-type)