Slice Machine

Slice Machine is a local development tool for content modeling and developing slices. Developers use Slice Machine to turn website designs into structured fields for Prismic.

Slice Machine works with all of Prismic’s framework integrations: Next.js, Nuxt, and SvelteKit. You run it from within your website project with an npm command.

Install Slice Machine

Slice Machine is installed with the npx @slicemachine/init command during website setup.

See the Next.js, Nuxt, or SvelteKit guide for installation instructions.

Run Slice Machine

Once installed, open Slice Machine via the terminal:

npx start-slicemachine --open

Model content

Slice Machine is used to model your website’s pages, slices, and custom data. See the following guides to learn how to model in Slice Machine:

• Pages: The pages of your website.
• Slices: The individual sections of a page.
• Custom data: Content used throughout the pages and slices of your website.

TypeScript

Slice Machine generates TypeScript types for all of your website’s content.

The types are automatically available through the Prismic client, @prismicio/client.

import { createClient } from "@prismicio/client";

const client = createClient("example-prismic-repo");
const blogPost = await client.getByUID("blog_post", "my-first-post");
//    ^ Typed as BlogPostDocument

The types are also directly accessible through @prismicio/client’s generated Content type.

import type { Content } from "@prismicio/client";

Content.BlogPostDocument;
Content.CallToActionSlice;
// And the rest of your models...

The types are generated in a prismic-types.d.ts file by default. The location of the generated TypeScript file is configurable in slicemachine.config.json via your adapter’s options.

Field code snippets

Slice Machine provides code snippets for every field in your content models. The code snippets show you the recommended way to display a field’s content.

The code snippets are specific to your website’s framework. A Next.js website, for example, will show snippets for @prismicio/next.

How to view field code snippets

To show the field code snippets, activate the Show code snippets toggle located above the list of fields.

Adapters

Slice Machine works with multiple website frameworks using adapters.

Adapters are available for:

• Next.js (@slicemachine/adapter-next)
• Nuxt (@slicemachine/adapter-nuxt)
• SvelteKit (@slicemachine/adapter-sveltekit)

Your project’s Slice Machine adapter is automatically installed and set up by @slicemachine/init. See the Next.js, Nuxt, or SvelteKit guide for installation instructions.

Configure adapters

Adapter features can be configured in slicemachine.config.json.

See the Next.js, Nuxt, or SvelteKit for a list of adapter options.

Environments

Slice Machine supports environments, a way to change content models without affecting production content.

The active environment can be changed in Slice Machine using the drop down in the top-left corner. You can immediately modify and push content model changes to the selected environment.

Fetch content from environments

Changing the active environment in Slice Machine automatically points your Prismic client to the selected environment.

This is done by updating an environment variable depending on your website’s framework:

• Next.js: NEXT_PUBLIC_PRISMIC_ENVIRONMENT
• Nuxt: NUXT_PUBLIC_PRISMIC_ENVIRONMENT
• SvelteKit: VITE_PRISMIC_ENVIRONMENT

Configure Slice Machine

Slice Machine is configured using a slicemachine.config.json file in the root of your project.

Here is the default configuration file for a Next.js project:

{
  "repositoryName": "example-prismic-repo",
  "adapter": "@slicemachine/adapter-next",
  "libraries": ["./src/slices"],
  "localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
}

Your website’s adapter may have options as well. See the Next.js, Nuxt, or SvelteKit guide.