Configuration

Preview.js may not work out of the box for your project, but fear not! You could be one line of config away from your goal.

You can configure your project for Preview.js by adding a file named preview.config.js next to your package.json.

Here is an overview of supported options:

// preview.config.js

/** @type {import("@previewjs/config").PreviewConfig} */
module.exports = {
  /**
   * Configure custom aliases (auto-detected if you use TypeScript).
   */
  alias: {
    foo: "src/foo"
  },

  /**
   * Configure a public assets directory.
   */
  publicDir: "public",

  /**
   * Set up a custom component to wrap around previewed components.
   *
   * Useful to set up context providers and global CSS.
   */
  wrapper: {
    path: "__previewjs__/Wrapper.tsx",
    componentName: "Wrapper"
  },

  /**
   * Specify a custom Vite configuration.
   *
   * See https://vitejs.dev/config.
   */
  vite: {
    ...
  }
};

Read on to learn about:

  • configuring module aliases
  • handling static assets
  • setting up CSS rules
  • wrapping components (including providing context)
  • customising SVGR components (React only)