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.

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. This Custom Type contains 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 to the Static Zone

The fields in the Static Zone are not meant to be flexible in the sense that you can mix and match them. They appear once on a document are usually fields you want your content creators to always use.

Click on the '+ Add a new field' button to add top-level fields.

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.

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

Legacy Slices

Non-shared Slices or legacy Slices, at the moment, can not be edited from local Custom Types. Although in the latest version of the Builder they are represented in the Custom Types, to give you as the developer more information on the contents of existing Custom Types.

Tabs

Within a Custom Type, you can use tabs to organize your content fields and make document editing more user-friendly. In the Custom Type builder, click the '+ Add a new tab' button to add a tab.

Using tabs will only affect the organization of the writing-room editor. It will not impact the structure of the document in the API response.

Multiple Slice Zones

If you want to use multiple Slice Zones in your Custom Types you can do so by enabling another Slice Zone with the checkbox. Any extra Slice Zone will have its own API ID which you reference in your code.

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 Custom Types as your project evolves by using a code versioning service like GitHub or Bitbucket.

Afterwards, 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.

Syncing Slices as a group

Once you push your Custom Type to Prismic, any selected Slices will also be synced with your Prismic repository.

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.