Preview.js is now feature complete

It's been a while since the last blog post. There have been quite a few improvements over the past few months!

React + Preact + Solid + Svelte + Vue 2 & 3

First off, Svelte and Preact are now fully supported. That makes a total of five supported frameworks. It's also easier than ever to implement support for another framework—as long as it's supported by Vite—so if there's another framework in particular that you'd love to see Preview.js support, let me know :)

In case you're wondering, Astro support is planned, but it's not doable until the Container API is ready. I also have a proof-of-concept for Qwik!

Screenshot API

Preview.js is built with a modular architecture. Several of these modules can be reused for more than just "previewing components in an IDE".

For example, you can now generate screenshots of all components and/or Storybook stories in your codebase with just a few lines of code using the new @previewjs/screenshot package.

You can use this for visual regression testing, documentation, and so on.

Stories editor and custom previews

Aside from a fair number of reliability and performance improvements, I'm especially excited about a couple of new features that took me months to figure out how to build: the stories editor and custom previews. Looking back, these features seem glaringly obvious, but it turns out they were both a technical challenge (lots of refactoring required) and a tricky UX design problem (at least for a developer like me!).

In a few words, the stories editor lets you save a preview as a Storybook story. It actually writes code in a stories file for you! It also lets you edit existing stories, which can come in handy to quickly update them.

On the other hand, custom previews are useful if you don't use Storybook, but you'd like to save a set of properties (or several) for next time.

These are both Pro features, but the good news is that Preview.js Pro is now free for 30 minutes per day for everyone (you don't even need to sign in). I decided to switch to this model after trying 14-day trials, and realising that a good portion of my new subscribers were people who forgot to cancel their trial. I'd rather you make a conscious decision to pay because Preview.js Pro is actually useful to you! It helps me validate that I'm building the right thing too.

Switching to marketing gear

Now that Preview.js is feature complete, it's time to start telling people about it! I'm planning to publish YouTube videos and blog articles on a regular basis to help get the word out.

Here is the first video, where I introduce Preview.js!

I hope you have fun trying out the newest Preview.js features. Don't hesitate to shoot me an email!