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. 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. Of course, you could hard-code it and simply call the necessary components into your page. Either way, the question is the same: how can you combine these components to build actual pages? So imagine that you've already built your set of sections, or maybe you're using our default library. That’s where the cool stuff really begins. building and deploying page sections (components)īut let’s start by focusing on the second part: combining components into pages.There are two parts in building webpages with components. In its most basic form, Slice Machine is an open-source CLI and a component library. Slice Machine - Build website sections and combine them into pages And that’s why we’ve partnered with Netlify and Nuxt to bring Slice Machine to life. Slices are one of our coolest features and a big reason why so many people are choosing to use Prismic.īut 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. 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. Each Slice represents the JSON model (content) for a given component. With Slices you can break your page content into JSON components that correspond to your frontend components. We took our first step on that journey when we created our Slices feature. 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.
Prismic is a Headless CMS that offers unlimited custom types, API calls, and a bunch of other great things. There’s every chance that you’ve made it this far without knowing what Prismic is.
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). 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. The project currently runs on Prismic, Nuxt, and Netlify, and ships with a default library of customizable components. So this isn’t the standard component library that you may have seen in the past, it truly is a tool that will allow you to improve your component workflow, from building the individual components, to combining them into actual pages. 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. 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. Our Slices feature, which encourages our users to visualize sections of their pages as components, has been one of our most popular features. Tools & Services Slice Machine: a workflow for developing and deploying website sectionsĪt Prismic, we've been experimenting a lot with building websites with components.