Preview.js CLI, experimental Svelte support and simpler configuration for Vite projects

Preview.js CLI powered by the component explorer

You may know Preview.js as an IDE extension that lets you preview your UI components and Storybook stories instantly, side by side with your code. Under the hood, Preview.js is primarily a Node.js application—it just happens to be spun up by a very simple IDE extension. A CLI version of Preview.js was released in April, but it was mostly a technical demo.

I'm glad to announce that Preview.js CLI has significantly improved from v1.15 onwards, thanks to a brand new component explorer panel. Run previewjs and you'll see a full list of components in your codebase, previewing any of them nearly instantly! Better yet, you can also see your Storybook stories, so you don't need to spin up Storybook separately.

Here is the old UX for comparison:

If you'd like to try it out, all you need is to install @previewjs/cli in your project (or globally), then run previewjs from your project directory. Yes, that's it!

Automatic support for vite.config.js

Preview.js detects your project's framework and global CSS automatically, but sometimes you need a bit more control.

While you could already customise its configuration through the dedicated preview.config.js file, you may no longer need it if you use Vite. From v1.16 onwards, Preview.js will automatically load your configuration from vite.config.js. No need to duplicate Vite plugin configs anymore!

Experimental Svelte support

Last but not least, Preview.js v1.16 adds experimental support for the Svelte framework, on top of React, Solid, Vue 2 and Vue 3. Storybook support is coming soon!

If you're a Svelte developer yourself, don't hesitate to report issues on the GitHub repo. Your feedback is instrumental to refine it!

Try Preview.js v1.16

Preview.js is free and open source. Check out the Getting Started guide to try it out yourself!