slice-machine-ui - v1.0


slice-machine-ui is the core package for Prismic's local development tool, Slice Machine.

Upgrade to version 1.0

Are you on a version of slice-machine-ui below 1.0? Follow our migration guide to upgrade.

Dependencies and requirements

slice-machine-ui v1.0 depends on an adapter to work with your framework. There are currently three officially-supported adapters:


Slice Machine offers an init script to take care of most boilerplate and configuration.

init script

In your project, run this command:

npx @slicemachine/init@latest

This command will do the following:

  1. Create a new Prismic repository or let you specify an existing one.
  2. Add a slicemachine script to package.json.
  3. Create an slicemachine.config.json configuration file containing your API endpoint and the location of your slice library.
  4. Detect your framework (Next.js).
  5. Install dependencies: @prismicio/client@prismicio/slice-simulator-react@prismicio/react@prismicio/next, and slice-machine-ui.
  6. Create a pages/slice-simulator.js|jsx|tsx file.

Manual install

To manually install Slice Machine, follow these steps:

1. Create a new Prismic repository from the Prismic dashboard.

2. In your project, add a slicemachine script to your package.json:

    scripts: {
     "slicemachine": "start-slicemachine"

3. Create a slicemachine.config.json file at the root of your project and paste in this information:

  "repositoryName": "example-prismic-repo",
  "adapter": "@slicemachine/adapter-next",
  "libraries": ["./slices"]

4. Update the repositoryName property to your repository name and the adapter property with your framework's Slice Machine adapter.


Launch Slice Machine

slice-machine-ui locally runs a development tool called Slice Machine. Run this command to launch Slice Machine:

npm run slicemachine

This will launch Slice Machine on localhost and show the URL in your terminal. Open the URL in your browser.

Configure slicemachine.config.json

The slicemachine.config.json file contains an object that contains the following properties:



The repository name for your repository (e.g. "your-repo-name").



An array of directories where Slice Machine can find slices, relative to the project's root director. By default, this is ["./slices"].



The name of the npm package to use as an adapter for your framework (e.g. "@slicemachine/adapter-next", "@slicemachine/adapter-nuxt").


The endpoint for your repository. Slice Machine automatically uses the correct API endpoint for your repository by default, based on repositoryName. You can override the API endpoint using this property if you are working behind a network proxy that requires a custom URL.

It should use the CDN (.cdn) and use V2 of the API (e.g. "").

Was this article helpful?
Not really
Yes, Thanks

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.