Preview.js: How Vite enables instant component previews in your IDE

on YouTube ↗18m

" summary

Preview.js shows UI components and Storybook stories inside the IDE by spinning a tiny Vite dev server via the Vite node API and mounting a virtual file system that serves fake entry points in memory, so a warning that normally appears after 15 clicks can be edited immediately. It auto-detects props with the TypeScript compiler API, updates on every keystroke in milliseconds, supports React/Vue/Solid, integrates with Storybook to preview stories in IDE, and offers a paid Pro props editor and CLI.

AI-written summary · about

" chapters (7)

1. 0:00Introduction to Preview.js
2. 0:52Setting up a project
3. 5:05Using Preview.js
4. 6:56Managing component props
5. 9:43How Preview.js works
6. 12:40Storybook integration
7. 15:00Future features and wrap-up

" related talks

• 07mBuilding with Vite's JavaScript APIFrançois Wouts · ViteConf 2023
• 38mVite, a New Era of Frontend Tooling?Christophe Jollivet, Yann-Thomas Le Moigne · Devfest Strasbourg 2023
• 20mVite - The Next Generation Frontend ToolingDevlin Duldulao · React Advanced 2021
• 26mVue & Vite DevtoolsGuillaume Chau · Vuejs Amsterdam 2024
• 18mIntroduction to Vite & VitepressTim Benniks · Vue.js Global 2020
• 31mSpeed up your development flow with ViteFelipe Flor · Vueconf.US 2023
• 38mHow vite changes the game for Vue and Web developmentAlex Kyriakidis · JSWorld Conference 2022
• 20mA Tour of the Vite EcosystemBen McCann · ViteConf 2023