Create and Model a Component

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 will teach you how to generate a component template and model the CMS data with The Slice Builder. In the following example, we'll see how to create a 'text and image block' component with an image and simple text field.



Generate a Component Template

The very first step is to generate the component files. For this, open your terminal, navigate to your project folder and simply run the following command:

Copy
prismic sm --create-slice

Once you run this command you will be shown the following prompts:

  • Select your local lib: Select the local library you're working with. The default @/slices path should be in your sm.json file, where @ means that the path is local, you can choose this or create a new one.
  • Enter the name of your slice (PascalCase): For this example, we will call our Slice "TextImageBlock".

This command creates the following template files for a new component in a new ~/slices/TextImageBlock folder in your project:

index.js

The actual component file.

index.stories.js

The file that put everything together for Storybook.

mocks.json

This file contains a mock API response used later for developing the component locally.

model.json

This file contains the Slice fields data that will be forward to Prismic.

⚠️ Conflicting components?

If the component you've just created has a naming conflict with any components in the repository, you'll see a warning and the option to overwrite the components so that only one copy exists. Once there are no conflicts, you can enter the Slice Builder to begin modelling your data.


Create a Model with the Slice Builder

The next step will be to create the content model for your component. To do this we will need to open The Slice Builder!

💡 What is the Slice Builder?

A visual builder for you Slice Models with all the tools you need to generate data models and mock CMS content locally. This tool includes suggest code snippets & options for customising your mock data output.

Launch the Slice Builder

Then, to open The Slice builder, open a new terminal window and run the following command:

Copy
prismic sm --develop

Build your Content Model (Slice)

Once you run the prismic sm --develop command, The Slice Builder, by default, will be running on http://localhost:9999.

When you visit this port, you can see The Slice Builder environment with your newly created slice (TextImageBlock). Click on this slice, and you will see repeatable and non-repeatable zones where you can add any fields by clicking on the "+" icon.

Here are the fields we will add to the component, with their API IDs:

textField

image

The 'field id' you enter here is the API ID that you will use to reference the field in the component code.

Once you've added your fields, click the 'Save model to file system' button; this will update the model.json and mocks.json files in your project.

The Slice Builder Example Video:


Customization

Change Field Settings

If you want to edit any of these field's settings, click the icon ⚙️. For instance, for a Rich Text field, you might want to restrict the field only to use <p> tags, or you might want to change the API ID of one of your fields; these sorts of changes are handled here in the field settings.

Customize your Mock Data

The Slice Builder also gives you control of the mock data that is generated so that the data will be consistent and closer match what you have in your design.

Click the edit button on your fields and select the 'Mock Config' tab. You'll be given different options to output different mock data patterns so you can see how components look with multiple variants or with a pattern that matches your design.

The video below shows how this works:

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.