Wrapping components

By default, each component is rendered in a blank page.

If you rely on your components being rendered in a specific hierarchy such as a padded box or specific React providers, you may want to wrap components instead.

This is done by creating a Wrapper component. You can also use this file to set up any global variables.

// __previewjs__/Wrapper.tsx

import React from 'react';
import "../src/index.css";

export const Wrapper: React.FC = ({ children }) => (
    <MyContext.Provider value={...}>
      <div className="wrapped">

You can customise the wrapper's location in preview.config.js:

// preview.config.js

/** @type {import("@previewjs/config").PreviewConfig} */
module.exports = {
  wrapper: {
    path: "src/PreviewWrapper.jsx",
    componentName: "default",