What is Slice Machine?

Slice Machine is a local development tool for building types and slice models in sync across your codebase and your Prismic repository. Slice Machine puts your content models in your codebase, so your code serves as the source of truth for your data structures. With Slice Machine, you can version and simulate your content models locally.

Slices are reusable, branded components in both the editing interface and in code. They enable content teams to quickly create and iterate on new pages by combining different slices in various ways, ensuring a fresh and engaging visual appearance. Additionally, slices are designed to be on-brand, with built-in design systems that guide content teams in making consistent design choices. They are also easy to maintain and expand, as updates to a slice's design or code are made in just one place, making the overall website structure scalable and manageable.

What is the connection between Slice Machine and the Page Builder?

Slice Machine is a local development tool that helps developers deliver a powerful page builder for their marketing teams. You create components, aka slices, locally alongside your code and ship them to the Page Builder for your marketing team to create pages independently.

Slice Machine

Deliver a visual page builder fast

Configure a page-building experience for your marketing team easily with our development tool, Slice Machine. Empower marketers to release on-brand pages independently.

Get started Request a demo

Why ship just a website? Ship it with a page builder.

Slice Machine

Create components, aka slices, locally using our development tool, Slice Machine. Slice Machine helps you build a visual page builder for your marketing team fast.

Visual Page Builder

The visual Page Builder is where marketers create beautiful pages to grow their website independently. It's what you create and customize for your marketing team using Slice Machine.

Prismic empowered Monogram to not only deliver websites, but a powerful page builder. The intuitive editing experience and killer features like slices have cemented Prismic as our default choice.

Work alongside your code without impacting production

Speed up your development time with built-in features that let you build, preview, and test locally, right inside your development environment.

Slice Machine screenshot showing a screen with a new call to action slice being created with background colour and heading fields

Slice Machine allows you to model your slices alongside your code. Slices are page sections that show up as reusable components in both the editing interface and in code.

I don’t know that there’s another workflow that would let us get this far, this fast.

Tight integrations with Next.js, Nuxt, and SvelteKit

Get an unmatched integration experience that goes beyond simple data fetching. Slice Machine generates components and data models within your project's environment, enabling you to work more efficiently.

A developer experience that feels like "Hey, developers, we love you"

Visual content modeling
Save time defining content fields. Model your slice by adding or removing fields in Slice Machine. Your JSON model will be updated automatically.
Code snippets
For each content field you add to your slice, we provide code snippets to template that field in the component.
Automatic TypeScript
Code safely with automatic types for your content.

Auto-generated component structure
Skip the initial repetitive tasks with boilerplate code. Slices are automatically saved to your project in your /slices folder with boilerplate code.
Templates
Slice templates are slices made by the Prismic team. Start with pre-configured CTAs or heroes and simply style them to match your brand.

Shared slices
Reuse slices across page types. Make your slices available on specific pages or reuse them everywhere.
Slice variations
Build multiple variations of your slice, such as light and dark option. Give flexibility to your content team, maintain one component.
Slice libraries
Curate your own slice library with all components you want to share or reuse across projects.

One-click syncs
All changes between your code and the cloud are in one place, so you can sync them together with one click.
Git-compatible
You and your team can develop simultaneously and merge everything at the same time.

Once I got to try Slice Machine, I realised how much of a game changer it was. I've not started any brand new projects with a CMS other than Prismic since.

Slice Machine changes the game and helps Prismic stand out in the headless space.

There are many headless solutions out there. You will need to spend weeks learning how the platform works. That was not my experience with Prismic.

Let's build it together

Follow progress
We’re always shipping new updates to Slice Machine. See what’s new, what’s coming up, or submit an idea for a new feature.
Follow progress
Share feedback
Join our research panel and help shape Prismic directly. Dive into usability tests, interviews, surveys, and more.
Join our research panel
Build locally, connect globally
Got questions? Have answers? Head over to our community forum to meet developers from around the world. Learn from them, help them with their projects, and start building together.
Join our community

Latest and greatest additions to your favorite tool

2.10.3

Nov 15, 2024Latest

Resolved a vulnerability warning related to the cookie package in Slice Machine. Issue #1482

...

2.10.2

Nov 7, 2024

When toggling Allow display text on a Link, the code snippets are now updated right away.

...

2.10.1

Oct 31, 2024

The Next.js adapter (@slicemachine/adapter-next) no longer throws when used with [Next.js 15](https://nextjs.org/blog/next-15). We recommend updating Next.js and your Slice Machine adapter to benefit from the latest Next.js improvements.

...

Have questions? We have answers?