---
title: "Slice Machine"
description: "Prismic's local development tool for content modeling."
meta_title: "What Is Slice Machine?"
category: "concepts"
audience: developers
lastUpdated: "2026-03-20T12:51:51.000Z"
---

Slice Machine is a local development tool for [content modeling](https://prismic.io/docs/content-modeling.md) and developing [slices](https://prismic.io/docs/slices.md). Developers use Slice Machine to turn website designs into structured fields for Prismic.

> **Important**
>
> New repositories have access to the **Type Builder**, our new cloud-based content modeling interface that replaces Slice Machine. [Learn more](https://prismic.io/docs/type-builder.md)

Slice Machine works with all of Prismic's framework integrations: [Next.js](https://prismic.io/docs/nextjs.md), [Nuxt](https://prismic.io/docs/nuxt.md), and [SvelteKit](https://prismic.io/docs/sveltekit.md). You run it from within your website project with [an `npm` command](#run-slice-machine).

# Install Slice Machine

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

See the [Next.js](https://prismic.io/docs/nextjs.md#set-up-a-nextjs-website), [Nuxt](https://prismic.io/docs/nuxt.md#set-up-a-nuxt-website), or [SvelteKit](https://prismic.io/docs/sveltekit.md#set-up-a-sveltekit-website) guide for installation instructions.

## Run Slice Machine

Once installed, open Slice Machine via the terminal:

```sh
npx start-slicemachine --open
```

# Model content

Slice Machine is used to model your website's [pages](https://prismic.io/docs/content-modeling.md#page-types), [slices](https://prismic.io/docs/slices.md), and [custom data](https://prismic.io/docs/content-modeling.md#custom-types). See the following guides to learn how to model in Slice Machine:

* [Pages](https://prismic.io/docs/content-modeling.md#page-types): The pages of your website.
* [Slices](https://prismic.io/docs/slices.md): The individual sections of a page.
* [Custom data](https://prismic.io/docs/content-modeling.md#custom-types): Content used throughout the pages and slices of your website.

> Learn more about modeling in the [Content Modeling](https://prismic.io/docs/content-modeling.md) guide.

# TypeScript

Slice Machine generates [TypeScript](https://www.typescriptlang.org/) types for all of your website's content.

The types are automatically available through the Prismic client, [`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md).

```ts
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.

```ts
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`](#configure-slice-machine) via your [adapter](#adapters)'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](https://prismic.io/docs/nextjs.md#set-up-a-nextjs-website), [Nuxt](https://prismic.io/docs/nuxt.md#set-up-a-nuxt-website), or [SvelteKit](https://prismic.io/docs/sveltekit.md#set-up-a-sveltekit-website) guide for installation instructions.

## Configure adapters

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

See the [Next.js](https://prismic.io/docs/nextjs.md#configure-slice-machine), [Nuxt](https://prismic.io/docs/nuxt.md#configure-slice-machine), or [SvelteKit](https://prismic.io/docs/sveltekit.md#configure-slice-machine) for a list of adapter options.

# Environments

Slice Machine supports [environments](https://prismic.io/docs/environments.md), a way to change content models without affecting production content.

> Environments is a Platinum and Enterprise plan feature. [Learn more](https://prismic.io/docs/environments.md).

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:

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

| Parameter              | Type      | Description                                                                                                           | Default |
| ---------------------- | --------- | --------------------------------------------------------------------------------------------------------------------- | ------- |
| repositoryName         | string    | The Prismic repository domain for the project.                                                                        | None    |
| adapter                | string    | The package name of the project's Slice Machine [adapter](#adapters).                                                 | None    |
| libraries              | string\[] | The list of [slice libraries](https://prismic.io/docs/slices.md#slice-libraries) available to Slice Machine.          | None    |
| localSliceSimulatorURL | string    | The full URL of the local [slice simulator](https://prismic.io/docs/slices.md#simulate-slices) route in your website. | None    |

Your website's [adapter](#adpaters) may have options as well. See the [Next.js](https://prismic.io/docs/nextjs.md#configure-slice-machine), [Nuxt](https://prismic.io/docs/nuxt.md#configure-slice-machine), or [SvelteKit](https://prismic.io/docs/sveltekit.md#configure-slice-machine) guide.

# Troubleshooting

## Chrome blocking local network access

If you see an "Oops" screen when trying to log in to Prismic from Slice Machine, Chrome may be blocking local network access.

Starting in Chrome 142, [local network access restrictions](https://developer.chrome.com/blog/local-network-access) prevent public websites from accessing private network resources without explicit permission.

To fix this:

1. When Chrome shows a permission prompt asking to access your local network, click **Allow**.
2. If the prompt doesn't appear, go to **Settings > Privacy and security > Site settings** and allow `prismic.io` to have **Local network access**.

# Migrate to Slice Machine

Looking to move your existing Prismic setup from the Legacy Type Builder to Slice Machine? You can follow our guide below.

[Learn how to migrate to Slice Machine](https://prismic.io/docs/migrate-to-slice-machine.md)