By the end of this page, your project will have Custom 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: Document, Slice, Field, and Custom Type.
Prismic stores each page on your website in a Document. The Document includes a Static Zone and a Slice Zone. The Static Zone houses metadata, like your page title and settings. The Slice Zone houses the page content, composed of Slices.
A Slice is a section of the webpage — like a block of text, an image, or a banner.
Prismic stores each piece of information in a Field. There are many Field types, including Rich Text, Number, Link, and Heading.
A Custom Type is a template for a Document. Content managers create each Document from a Custom Type.
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.
Push your Slice screenshots. Slice Machine takes screenshots of your Slices. 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.
Not using Slice Machine?
Slice Machine is currently compatible with Next.js and Nuxt. If you're not using Slice Machine, you can model content with the Legacy Builder.
Create a Custom Type
In Slice Machine, click Create a Custom Type. Choose Repeatable or Single, then enter a name and ID.
Slice Machine will save the model of your Custom Type as a JSON file in your customtypes folder after you click on Save to file system.
Put Fields for page metadata in the Static Zone. If your Custom Type is repeatable, include a UID. The UID is a unique identifier that lets you easily identify and query Documents.
Create a Slice
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.
Add a Slice to a Custom Type
Click on the Custom Types tab, select your Custom Type, and Add a new Slice. Select your Slice from the list and click Save. Then click Save to File System.
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:
Was this article helpful?
Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.