FAQ

Will Preview.js work with my project?

If you use React 16+, SolidJS or Vue 2/3, you should be fine.

Plugins for Preact and Svelte are coming soon.

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. It's also much faster, at least until Storybook migrates off Webpack (which might happen soon!).

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 since Preview.js is open source.

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.