Send Slices to Prismic


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 push Slices from The Slice Builder to the Prismic UI and make them available for content editors.

šŸ•š Before starting

This article is the final of 3. Please read theĀ Create and Model a ComponentĀ &Ā Code & Style Components articlesĀ before continuing :)

Open the Slice Builder

Now that you've created your Slice, plus coded and styled the component using its mock data, you can send this Slice to Prismic for your content editors to use in their documents.

Run the Slice Builder if it's not running already:

prismic sm --develop

Now, if you visit http://localhost:9999/ you should be able to see the home screen of The Slice Builder. šŸ˜ƒ

Push your Slices

Now, Take a Screenshot of your Storybook component and then Push Slice to Prismic. Clicking this button will send your Slice model to the Prismic UI. You can also create Custom Component Previews if you like; read more about this below.

Once you push Slices from The Slice Builder, they will be available in the repository's Custom Types shared slices library.

Broken screenshot?

Sometimes the builder might not be able to generate the screenshot. This can be caused by 2 things:

1. Storybook is re-rendering your Slice, in that case re-clicking the 'Push to file system' button will resolve the issue.
2. Updating or deleting a field might cause the component to break, in this case, you will need to update your component first and make sure it renders correctly.

Custom Component Previews

As discussed above, you can choose to have a custom component preview image instead of the one auto-generated from your Storybook. To do this, simply add an image namedĀ preview.pngĀ in your Component folder in your project, so in our exampleĀ ~slices/TextImageBlock/preview.png. Doing so will overwrite the default image and give you the control that you may need.

Create a new Custom Type

Go to your repository and navigate to theĀ 'Custom Types'. If you don't have any Custom types yet, clickĀ 'Create New'. Add a name to it and configure it as either a Repeatable Type, which allows you to create as many instances of the Custom Type as you need (i.e., blog pages), or a Single Type, where you will only be able to create one instance of this Custom Type (i.e., homepage).

Add your Slice

Now, toggle slice-zone and click onĀ 'Add a slice' (+). This will open an overlay with four different tabs; the one we care about here isĀ 'Shared Slices'. Once you click this, you'll see your Slices from The Slice Builder represented by their preview screenshots, choose a Slice to add to your Custom Type, and save the changes.

Now your content editors can use your Slices and their corresponding components to build beautiful, versatile pages. šŸ˜€


Currently, Slice Machine & The Slice Builder are in BETA. If you encounter any problems, please read the troubleshooting guide for a list of the most common issues and the possible solutions:

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.