Local Custom Types

Beta

These docs rely on Slice Machine, which is in active development and subject to change. Content Relationships are not currently supported with Slices.

This article explains how to create Custom Types with Slices from the Prismic Builder to your repository's UI to make them available for content editors.


Launch the Prismic Builder

Before you start reading this article, launch the Prismic Builder in a new terminal window with the prismic sm --develop command. It should open by default at http://localhost:9999.

The Prismic builder is the place where you create all the content modeling for your documents. You model your Slices here and then add them to Custom Types to sync with your Prismic repository. Once all the models are pushed to Prismic, they become available in the documents.

Local Custom Types

With the latest versions of Slice Machine, you will now be able to manage your Custom Types locally.

To give some context to this, Custom Types used to be configured in the Prismic Dashboard alongside your documents. While this worked well, bringing Custom Types locally brings more advantages to you as a developer, such as the ability to use content relationships in 'Slice Machine Slices' and even more powerfully, versioning of your Custom Types along with changes in your code using the versioning tool of your choice.

Sync your Slices

Each time you create, update or edit a Slice in the Slice builder, save the changes so they're always up to date both in the project code and in your repository.

Once you're done adding changes to a Slice, perform the next three actions:

  • First, Take screenshot. This screenshot is generated using Storybook. It provides a visual example of the Slice that content writers will be able to see in the documents of the repository.
  • Then, Save model to filesystem. This option will update the component data in your project code.
  • Finally, Push Slice to Prismic. This will enable your Slice in the shared slices Library, which we'll later use to build Custom types.

Create a Custom Type

After having created your Slices, coded your components, and styled them using its mock data, you'll need to add them to a Custom Type.

Custom Types are models for your documents. They are the place where you define and configure Fields and Slices for your content. The Prismic builder gives you the freedom to structure your Custom Types as you like to match your project needs and design.

Open the Prismic builder, select the Custom Types page and click on the + button in the top right corner of the page to create a new Custom Type.

Visual example of a Page Custom Type created in the Prismic builder
Visual example of a Page Custom Type created in the Prismic builder

Then, you'll see the pop-up to Create a new Custom Type. Select if you want the type to be either Single or Repeatable. Give it a name to display in the UI of the repository and an ID to identify the Custom Type in the API. Then, save.

Example configuration window of a Custom Type.
Example configuration window of a Custom Type.

After saving, you'll see your new Custom type, which has a Static zone, where you can add fields that only appear once per document, and the SliceZone, where you can mix and match your shared Slices. Now you can start creating the content modeling of the types that will make up your documents.

Add Fields and Slices

Click on Add Slices to select the Slices you previously created and saved in the Slice builder. You'll see the configuration window to update the SliceZone. Select the ones you need, and save.

Example Slice in the SliceZone of a Custom Type.
Example Slice in the SliceZone of a Custom Type.

Click on the + Add a new field button to add top-level fields; this option works in the same way as in the Slices.

Example view of a Page Custom Type with one Slice and a UID field.
Example view of a Page Custom Type with one Slice and a UID field.

Save and Push to Prismic

To make your models available on your repository first, click on Save to filesystem so that the Custom Types can exist locally in your project code. This gives you the ability to version your Slices as your project evolves with a code hosting service GitHub or Bitbucket.

Afterward, select Push to prismic. Clicking this button will send the model to Prismic and make it available to use in the repository UI when creating a new document.

Use your Slices in a document

The only thing left to do is to begin using your Custom Types to create documents and their Slices to create components on your site.

To start, go to your Dashboard, select repository. Click the green pencil button to generate a new document. You'll be able to see and use all the Slices and Fields created in the Prismic Builder. Their variations are accessible in the ⇄ Switch variations dropdown.

Visual example of a Page Custom Type and its Slice used in a document.
Visual example of a Page Custom Type and its Slice used in a document.

Creating a local Custom Type example:

Currently, Slice Machine and The Prismic Builder are in beta. If you encounter any problems, please read the troubleshooting guide.

Related Articles


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.