Model Content

Create content with Slice Machine.

By the end of this page, your project will have page types with slices that are synced to Prismic.

Understand content modeling

Content modeling is the process of designing the data structures for your content. Prismic makes this easy by providing useful data structures that you can configure as needed.

There are four main structures in Prismic’s content models: slices, fields, page types, and custom types.

Slice

A slice is a section of the webpage — like a block of text, an image, or a banner.

Field

Prismic stores each piece of information in a field. There are many field types, including rich text, number, link, and Heading.

Type

A type is a model for a document in your repository. Types can take one of two different formats: “page” or “custom”. A page type is a model for a page on your website. A custom type is a generic model for an element on your website, like a menu, a category, or a call to action.

👉 The most important part of a content model

When you configure a website builder, you create an application for your content managers. You’re designing an interface, which will affect how your content managers create, edit, and understand the content. The content model will determine the project’s success or failure.

Once a content model is in use, it’s hard to change, so we recommend starting your project with well-thought content models. Think about how your content managers and developers will use your custom types and slices.

Here are some best practices for content modeling:

Start with content models. Think about the design and information architecture of your website, and use that information to create content models. Wait until you have good models, then start creating content.

Give fields logical names. Use the same language as your content managers, so it’s clear what content goes in each field.

Use slices. Slices are the content of your website. By building your website with slices, you give your content managers an easy and intuitive way to edit content.

Add slice screenshots. Upload or copy-paste a screenshot for each slice. Make sure your screenshots get pushed to Prismic so that your content team can see what each slice looks like.

Run Slice Machine

Slice Machine is Prismic’s development tool for building content models. You should have installed Slice Machine in the setup step.

First, ensure your project is running in development mode. Then, run the Slice Machine command:

npm run slicemachine

The terminal will show you a link, which is http://localhost:9999 by default. Open the link in your browser.

Create a page type

In Slice Machine, click Create a page type. Choose Reusable or Single, then enter a name and ID.

Slice Machine will save the model of your page type as a JSON file in your customtypes folder after you click on Save to file system.

Page types have pre-configured metadata fields for SEO and a slice zone for the page content.

Create slices

In the left-hand side menu, click slices, then Create a slice. Give your slice a name and choose the library for it.

Slice Machine will create a folder for the slice in your slices directory. The folder includes a component file where you can code your slice component.

In Slice Machine, add fields to your slice, then click Save to filesystem.

Slice Machine suggests code snippets to template each field in your component. Learn more about templating in the templating article.

To see what your slice looks like, click Preview slice. Slice Machine will simulate your slice with mock data.

How to create slice variations?
You can create multiple variations of a single slice. You might want to add an extra field, change the position of an image, or display an image gallery in different layouts. It's all possible with variations.

Add a slice to a page type

Click on the Page types tab, select your page type, and Add a new slice. Select your slice from the list and click Save. Then click Save to file system.

Create a custom type

Custom types are generic models that you can use to create menus, taxonomies, and objects for your website.

To create a new custom type, click on the Custom Types tab in the left menu, then click Create. Custom types cannot have slices, but they can have any other property.

Push models to Prismic

When your changes are ready, go to the changes page and click the Push to Prismic button. Now, your content managers can use these models to create content: