Announcing Slice Machine: a workflow for developing and deploying website sections

Ever thought about using components for sections of your web pages? With SliceMachine, you can build page sections, define their model, edit properties, deploy them, and deliver a visual interface that allows even your most technically challenged colleagues to easily build pages without any further help from you.

Sounds too good to be true?

Well, there have been points during this project where we thought it might be, but we are pleased to announce the release of our open-source project Slice Machine!

OK, you probably need a lot more details before you get as excited as we are, so let’s fill you in.

TLDR;

At Prismic, we've been experimenting a lot with building websites with components. Our Slices feature, which encourages our users to visualize sections of their pages as components, has been one of our most popular features. That popularity made us think about how we could take the feature to the next level and develop a tool to improve component workflow and management—and that’s where Slice Machine was born.

We know that even technical terms can sometimes be interchangeable and unclear, so when we refer to components for this project we are thinking about page sections (macro components) like carousels, FAQ sections, hero sections, CTA, etc…

So this isn’t the standard component library that you may have seen in the past. It is a tool that will allow you to improve your component workflow. From building the individual components to combining them into actual pages.

The project currently runs on Prismic, Nuxt, and Netlify and ships with a default library of customizable components. To offer you real value right out of the box (as if you needed more) we’ve teamed up with Sara Soueidan to bring you a high-quality default library that focuses on accessibility and responsiveness.

Much like Prismic, we want Slice Machine to be suitable for just about any stack, and we’ve already started working on supporting other React and Vue frameworks (including Gatsby and Next).

So wait…what’s Prismic?

There’s every chance that you’ve made it this far without knowing what Prismic is. We’re slightly offended, but we’ll get over it.

Prismic is a Headless CMS that offers unlimited custom types, API calls, and a bunch of other great things. You should really check it out.

The problem is, API-based CMS’s have created a gap between the components and the data that they require and we wanted to bridge that gap.

We took our first step on that journey when we created our Slices feature.

With Slices, you can break your page content into JSON components that correspond to your frontend components. Each Slice represents the JSON model (content) for a given component.

Slices also give non-technical people a visual interface that allows them to easily build and fill content and create pages simply by combining sections.

Slices are one of our coolest features and a big reason why so many people are choosing to use Prismic.

But we wanted to find a way to take Slices to the next level and to allow developers to adopt a totally component-based approach to how they build websites and create pages. And that’s why we’ve partnered with Netlify and Nuxt to bring Slice Machine to life.

Slice Machine — Build website sections and combine them into pages

In it’s most basic form, Slice Machine is an open-source CLI and a component library. And just that should be enough to pique your interest.

There are two parts to building pages with components. The first part is about building and deploying page sections (components). The second part is about building pages using these components.

But let’s start by focusing on the second part: combining components into pages. That’s where the cool stuff really begins.

Slice Zone. Where the magic really starts

So imagine that you've already built your set of sections, or maybe you're using our default library. Either way, the question is the same: how can you combine these components to build actual pages?

Of course, you could hard-code it and simply call the necessary components into your page. But this is far from ideal. You will have to duplicate a lot of code, rebuild your website, and deploy it each time you need to edit or re-arrange these sections.

This is where SliceZone comes into play. SliceZone is a component that you drop into your page and it will take care of calling the necessary components and provide them with their content props to build the page.

This way, all that you have to do is use the visual editor (Prismic interface) to define the different Slices - every Slice containing the props that are passed to a given component - and the SliceZone will automatically mirror these Slices by calling the corresponding components in your frontend code.

It really is that simple.

The other cool thing about the SliceZone is that it is linked to a page (Document) in Prismic, so you don't have to do the query manually. Just drop the SliceZone component anywhere in your page code.

SliceZone is the part of Slice Machine that separates it from anything that we’ve ever used before. But before you can see the true value of the tool it is worth taking a look at that first part that we mentioned: defining and building page sections.

SliceMachine CLI— a workflow to iterate on defining page sections

Building a page section is an iterative approach. You start by creating the component file, define the model schema, add markup and JS to the component, add more props to the model, add markup and JS, and so on and so on…

With Slice Machine, we provide you with a CLI that will help you throughout the process of building website sections and significantly improve your workflow. You can quickly create the boilerplate for the component code and the model, sync that with Prismic, and properly list your components so that SliceZone can find them.

And as I mentioned, we've already built a default library of components to help you get started.

Vue-essentials. A default library of components built by Sara Soueidan

We didn't want to launch Slice Machine with an empty library. We knew that doing so would make it more difficult for you to see the true value of the tool and make it less likely that community members would be inspired to start making libraries of their own.

By working with Sara Soueidan we have ensured that you will immediately have access to high-quality, fully responsive components that will make you want to build something beautiful.

Customizable without a strong design identity

Components that you can add to any page or any design. You can customize their colors, fonts, and design using CSS-variables, props and, other mechanisms.

Cross-browser compatibility

All of those annoying, but necessary, browser compatibility considerations have been thoughtfully handled for you.

Responsiveness

It’s no good having a website that doesn’t deliver the full experience on whichever browser your users choose. These fully-responsive components will ensure that all of your visitors get the exact experience that you intended for them.

Accessibility

All of the components in this library are accessible. ARIA attributes are used when and where they are needed.

So we’ve already partnered with Sara Soueidan to ensure that we offer a great set of components right from launch day. Headers, footers, carousels…we’ve got everything that you need to start working on that next website and get it up and running in just a couple of minutes.

The library has been developed in VUE, although we are actively working on developing more libraries and starters for other frameworks. Not only that, but we’re also working on developing components that integrate to other services (like Netlify forms).

It’s open-source. It needs a community. It needs you

If you would like to try Slice Machine out - and ideally start contributing to our open-source projects, component libraries and community - you can get started in just a few minutes by following these straightforward instructions.

The project is currently still in the beta testing phase, so we would love for you to start using Slice Machine and to let us know how it can be improved.

You’ve made it this far, you must be at least a little bit interested.

So here are a few ways that you can help us to keep moving this project forward:

1. Try out the project and give us your feedback and ideas. There is a section in our Forum where you can share your thoughts and join in the discussion.
2. Contribute to the open-source project, file issues, submit PRs for the CLI.
3. Build and share your own SliceMachine library. You can start from scratch or by forking Sara's library.
4. Help us bring SliceMachine to other frameworks.

You can always reach out to me directly on Twitter to ask any questions that you may have.