website·Indexed 33 days ago
https://previewjs.com/docsA component preview tool available as an extension for Visual Studio Code, Cursor, and Windsurf. It provides first-class support for React (16.14+), including integrations with Next.js, Tailwind CSS, and React Router. The tool supports custom aliases, SVGR, static assets, and wrapper components for global styles and providers.
tsconfig.json or jsconfig.json. If your aliases are already defined in these files, you may not need to provide additional manual configuration in Vite.expo packages (e.g., expo-web-browser) to be previewed. Due to these dependencies, the root App component is unlikely to work.<Wrapper /> component is configured to provide the necessary context providers and mocks..scss or .less files directly into your components just as you would with standard CSS./* styles.scss */
$color: blue;
.button {
background: $color;
color: white;
}import "./styles.scss";<Link />, <Image />, or the useRouter() hook may crash. To resolve this, install the @previewjs/config-helper-nextjs package and import it within your __previewjs__/Wrapper.tsx file.// __previewjs__/Wrapper.tsx
import "../styles/global.css";
import "@previewjs/config-helper-nextjs";Wrapper.tsx component to apply global styles across all previews.// Local import in a component
import "./styles.css";
// Global import in the wrapper
// __previewjs__/Wrapper.tsx
import "../src/styles.css";
export function Wrapper({ children }) {
return <div>{children}</div>;
}import statements.import icon from "./icon.svg";postcss.config.js file (or equivalent) exists in your project. If it still fails to load, you may need to configure a wrapper that imports your global CSS.module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};To support importing SVG files as React components (e.g., import { ReactComponent as Logo } from "./logo.svg"), you must install vite-plugin-react-svgr as a dev dependency and add it to the vite.plugins array in your preview.config.js file.
By setting exportAs: "ReactComponent", you enable named imports. If you prefer default imports (e.g., import Logo from "./logo.svg"), set exportAs: "default". If your project uses path aliases for SVG files, you must also provide the alias configuration within the svgr plugin options.
// preview.config.js
import { defineConfig } from "@previewjs/config";
import { svgr } from "vite-plugin-react-svgr";
export default defineConfig({
vite: {
plugins: [
svgr({
exportAs: "ReactComponent",
// Use exportAs: "default" for default imports
// alias: { ... } // Add if using SVG aliases
}),
],
},
});