I missed Jetpack Compose's @Preview in React, so I built a Vite plugin for it

说明与用途

Vitrine 让 React 开发者能够即时预览组件、创建变体并分享画廊，从而加速开发流程。

问题

React developers often rebuild and reload the app to see component changes, lacking an inline preview like Jetpack Compose's @Preview.

结果

Vitrine enables React developers to preview components inline, create variants, and share galleries, reducing the need for manual reloads and improving development speed.

工作流

• Add a /** @preview */ comment above a component export.
• Configure Vite by adding the vitrine plugin alongside the React plugin in vite.config.ts.
• Run the Vite dev server; open /__vitrine to view the component preview.
• Use the gallery to adjust props, create variants, and view matrix combinations.
• Optionally install the VS Code extension to see previews beside the editor.
• Share the gallery by building static files with vitrine-plugin-static.

证据

You add a comment above a component you export: /** @preview */ export const PrimaryButton = () => <Button tone="primary">Save</Button> ;

来源

Setup is one plugin next to your React plugin: // vite.config.ts import react from "@vitejs/plugin-react"; import { defineConfig } from "vite"; import vitrine from "vite-plugin-react-vitrine"; export default defineConfig({ plugins: [react(), vitrine()], });

来源

Because the previews go through your own dev server, aliases, CSS, plugins and HMR behave exactly like in your app.

来源

The gallery also gives you: Props controls generated from your TypeScript prop types, Variants side by side, and a Matrix that renders every combination of two props

来源