Will Preview.js work with my project?

If you use Preact 10+, React 16.14+, Solid, Svelte 3 or Vue 2/3, you should be fine.

How is Preview.js different from Storybook?

Storybook is an amazing tool to document UI components. We highly recommend writing component stories with Storybook, especially if you work in a team of engineers. Kudos to the Storybook team for building such a great piece of software ❤️

Preview.js serves a different use case. It's best used to quickly visualise a component without having to write any boilerplate code.

Preview.js Pro also lets you save your previews as Storybook stories.

In summary, Preview.js and Storybook can work hand-in-hand!

Will my CSS work?

Preview.js can handle CSS-in-JS libraries such as Styled Components and Emotion. It also supports CSS imports, including CSS Modules. You can also use SASS or LESS.

If your specific use case doesn't work, please file an issue.

How does Preview.js work?

There are a few pieces to the puzzle, and you can check out the source yourself.

In summary:

  • TypeScript's Compiler API enables us to detect components.
  • Vite and esbuild enable incredibly fast refresh.
  • Source code is served from a virtual filesystem that updates on every keystroke.
  • A fair bit of code ties it all together nicely.