One of the features of Prismic we are really fond of is Slices. Slices are website sections that editors can use to build pages. From a developer perspective, Slices map to components in your website’s code, whether it uses React, Vue.js, Svelte, or even 11ty.

Proud of our Slices, we introduced Slice Machine to provide an improved developer experience when working with Prismic by focusing on a local, Slice-centric workflow. In that regard, some of our achievements were highlighted in the recent Slice Machine 0.2.0 release.

With that release also comes a major change for the future of Slice Machine; Storybook will not be a requirement to run Slice Machine anymore. It will still be supported, but alongside it, we’re introducing a new, in-house solution: Slice Simulator, a lighter alternative to Storybook for isolated Slice development.

In a hurry? Jump to the TL;DR in the conclusion.

Storybook?

Before talking too much about Slice Simulator, let’s first get back to Storybook to better understand why we created our own alternative tool. Storybook defines itself as a tool for building UI components and pages in isolation by streamlining UI development, testing, and documentation.

If you have never seen Storybook before, it looks like the image below, and can be customized above and beyond:

When it comes to Slice Machine, the part of Storybook that first interested us was the “building UI components in isolation” concept. Indeed, as we started creating a Slice-centric workflow, this part could easily translate to “building Slice components in isolation” for us.

This was definitely something we wanted to introduce as part of Slice Machine. Therefore, when we released its first version back in 2020, we made Storybook a requirement to benefit from the full experience: define your Slice model in Slice Machine; develop it in Storybook; ship it to Prismic.

Our experience building a tool with Storybook

Back then, we were pretty happy with Storybook being part of the Slice Machine experience. Of course Storybook provided the “building Slice components in isolation” part we were after, but from its definition above, it also brought other benefits.

Benefits of Storybook

One of the most obvious benefits of Storybook is documentation. For example, the Storybook screenshot above comes from a hosted Storybook instance that you can browse yourself here. This hosted website could be shared within the development and content editing teams to provide information about available Slices and components. The best part is that this comes free with Storybook.

Another benefit of Storybook, which is a bit more advanced, is the ability to test your components. Since with Slice Machine we wanted to provide a Slice-centric workflow, testing would eventually be part of it at some point. Storybook comes with such abilities, especially when paired with Chromatic, a component testing service built by the Storybook team. In that regard, we started to explore the integration of Chromatic within Slice Machine, and it’s likely something we’ll provide first-class integration for in the future.

Overall, we think Storybook is a fully featured tool that aligns nicely with Slice Machine goals and the process of creating websites. So do some of our users who love Storybook and became interested in Prismic because of that specific integration. But that’s not the end of the story ...

With great features come great responsibilities

Storybook supports most common frameworks. To do so, Storybook basically spins up a bundler that is preconfigured for the framework you’re using (@storybook/react or @storybook/vue, for example). This approach works great but can only get you as far as having Storybook working with your vanilla framework (without any add-ons, plugins, etc.).

To get Storybook to work with tools you use on top of your framework, whether it’s a CSS framework like Tailwind CSS or a plugin like our Vue.js integration, you have to configure Storybook further for that purpose. This is where the story gets complicated for Prismic with Slice Machine.

By making Storybook a requirement, we effectively forced our users to set up and maintain a Storybook integration alongside their website code. The complex part of it was that users had to configure it further, with at least (assuming they used no other add-ons or plugins) Prismic SDKs inside it.

For sure, this wasn’t an issue for Storybook veterans and enthusiasts — they were used to that process, and it was no surprise to them. However, for people new to Storybook, and ultimately to Slice Machine, their learning curve was really steep because they had to set up and configure two new tools at once.

Conscious of the impact Storybook had on new users’ onboarding to Slice Machine, we tried to soften that learning curve as much as possible. To do so, we relied both on framework integration, like @nuxtjs/storybook (Nuxt.js Storybook integration), and automation, like our Storybook setup command (prismic sm —add-storybook).

However, time taught us that our efforts (and others’) to simplify setup and maintenance still proved fragile. Keeping up with Storybook updates was also hard. This led to a point where most of the issues and support needed for Slice Machine were directly related to Storybook’s setup and maintenance.

All things considered, it was time for a change

Indeed, at that point, around mid-2021, we weren’t really satisfied anymore with Storybook being so tightly coupled with Slice Machine. So we started to look for a long-term, and more importantly, simpler alternative.

As we started that process, we were also in sync with people at Storybook. This was the opportunity for us to get their experts’ input on what we were trying to do with Slice Machine and their tool. Those meetings also provided insight into the future of Storybook and some of the great features their team released at the end of last year. Overall we really thank them for their support throughout our journey.

Getting back to finding an alternative, we slacked our UX team, asked them for their nicest design thinking template, and started to brainstorm with their help. Multiple POCs and hour-long discussions later, we started to be happy with a new approach we had found. We invested more time in it from November to January, which eventually led to this very blog post.

Introducing Slice Simulator

That’s the name. Slice Simulator is our simpler alternative to Storybook for isolated Slice development. With it, you can now pick between Storybook and Slice Simulator (or even use both!) to develop Slices with Slice Machine.

How is Slice Simulator simpler?

First of all, Slice Simulator doesn’t have the ambitions Storybook has as a tool. It’s a tool created specifically for Slice Machine, with a reduced scope: rendering Slices in isolation. That reduced scope allows us to make Slice Simulator simpler for you and us.

The main part we are simplifying is the setup and maintenance process; Slice Simulator doesn’t have to spin up a bundler like Storybook does. Instead, Slice Simulator plugs itself directly into your framework’s bundler, whether you’re running Next, Nuxt, or Svelte. What’s awesome about this approach is that there’s no need to configure Slice Simulator further when you start to use your framework with add-ons and plugins.

You just configured your Next.js project to use Theme UI? Great! Slice Simulator is just as ready to work with it because it relies on your Next.js project bundler to run.

Using that approach, we already developed Slice Simulator integrations for React, Vue.js 2, and Vue.js 3. We made developing those integrations simple and quick for us by abstracting all of their logic in a core package, making integrations only responsible for their rendering. This will allow us to be reactive when we need to support new technologies. I, for fun, recorded myself developing the Vue.js 3 integration from 0 to package; you can watch my journey doing so in this x16 time-lapse. This pattern also simplifies maintenance as each integration is roughly about 150 lines of code, most of which is boilerplate.

What’s the impact for you?

With Slice Simulator’s introduction, we aim to smooth the experience for people who aren’t into Storybook — not to degrade the experience of people who are into it. Therefore this update’s impact on your projects depends on your relationship with Storybook:

You’re a Storybook fan and are succeeding with it

Awesome! You can keep using Storybook with Slice Machine to build Slices. You can also run Slice Simulator alongside Storybook, so feel free to give it a try! Why would you want to use both? Because Slice Simulator enables us to build an even more integrated experience (more about that below), and its small footprint might be worth it for you. On the other side, Storybook still provides you with a lot of benefits that Slice Simulator just doesn’t come with, like documentation, testing, etc.

You’re struggling with Storybook and/or don’t really benefit from it

Slice Simulator was made just for you! Proceed through its short installation process indicated within Slice Machine, and you should be good to develop your Slices in isolation. Once Slice Simulator is installed, feel free to clean up your project from your past Storybook instance. You’re off on a fresh journey!

You don’t really know

Then we advise you to start using Slice Machine with Slice Simulator. Its lighter process and smaller footprint on your project should allow you to learn and succeed with Slice Machine much quicker. Once your project is established, you can, at any time, learn more about Storybook and decide if it would be a nice addition.

What’s the impact for us?

Now that Storybook is optional and Slice Simulator is an alternative for getting started, we are aiming to reduce Slice Machine maintenance and support related to Storybook. This will allow us to create a leaner integration of Storybook within Slice Machine but also to focus more on other aspects of the product, like its experience and stability.

Slice Simulator being an in-house solution also enables us to create integrations within our product with fewer restrictions. With it, developing a Slice can now happen within the same tab of Slice Machine, and in that respect, we have a ton of ideas to make that workflow even cooler. Regarding integration, we also started exploring using Slice Simulator within online environments as seen during our latest Product Meetup with the playground:

Conclusion and TL;DR

This was a bit of a long one, but we hope it answered most of your questions around Slice Simulator and why we decided to go this way for Slice Machine, while not letting down our Storybook integration.

Internally, we’re thrilled at the relief and progress we were able to make since we started to work on Slice Simulator. We hope you’ll be as excited as us to work with it! The integration of Slice Simulator within Slice Machine 0.2.0 is just the beginning, and we are looking forward to refining that one and creating others.

The future is bright.

TL;DR

Storybook is not mandatory anymore to benefit from the full Slice Machine experience. Instead, Slice Simulator comes as an alternative to it for developing your Slices in isolation.

You’re free to use Slice Simulator, Storybook, or both of them to develop Slices in your Slice Machine project:

• Storybook enthusiast? Keep using Storybook! Consider exploring Slice Simulator alongside.
• Struggling with Storybook? Switch to Slice Simulator.
• Not sure which to pick? Start with Slice Simulator, explore Storybook later.