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
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 join the Discord or 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!