Content Modeling

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, slices, and custom types.

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, 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 (UID) fields by default.

How to create a page type

• Open Slice Machine

  In your Prismic project, start Slice Machine to begin editing content models.

  npx start-slicemachine --open

• 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. Use an easily understood name.

  The page type ID determines the ID used to reference the page type in the Document API. Use a short, snake-cased name.

• Add slices

  In the slices section, 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.

• (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 document in the Page Builder.

  

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

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.

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.

How to create a slice

Learn how to create slices in the Slices page.

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.

How to create a custom type

• Open Slice Machine

  In your Prismic project, start Slice Machine to begin editing content models.

  npx start-slicemachine --open

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

  The custom type name determines the label shown to content writers in the Page Builder. Use an easily understood name.

  The custom type ID determines the ID used to reference the custom type in the Document API. Use a short, snake-cased name.

• Add fields

  Add fields to the static zone as needed.

  

• (Optional) Add slices

  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.

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

Recommended models

We recommend adding the following content models to most websites.

Create a homepage type

Managing homepage content is best done with a dedicated Homepage page type. Using a Homepage page type has the following benefits:

• Content writers can only create one homepage in the Page Builder.

• You can create slices that are only available on the homepage.

• Fetching content is simple using @prismicio/client’s getSingle() method.

• Create a page type

  In Slice Machine, create a new page type by following the page type guide. Use the following page type settings:

  • Type: Single
  • Name: Homepage
  • ID: homepage
• 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.

  

  Add the files in your project such that the page is served at /.

• Add a route resolver

  Prismic needs to know your website’s routes to fill in link URLs. Add the following route resolver to your project:

  { "type": "homepage", "path": "/" }

Create a reusable page type

Managing general page content is best done with a repeatable Page page type. Using a Page page type has the following benefits:

• Content writers can create unlimited pages in the Page Builder.

• You can create slices that can be used in any page.

• Fetching content is simple using @prismicio/client’s getByUID() method.

• Create a page type

  In Slice Machine, create a new page type by following the page type guide. Use the following page type settings:

  • Type: Repeatable
  • Name: Page
  • ID: page
• Create a page file

  Slice Machine provides a code snippet to bootstrap your Next.js 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.

  

• Add a route resolver

  Prismic needs to know your website’s routes to fill in link URLs. Add the following route resolver to your project:

  { "type": "page", "path": "/:uid" }