Set Up Preview

Our dev environments include the needed preview. If needed, you can use one of the Bit officially supported preview servers and compose it to your dev environment:

Install the preview:

bit install @teambit/preview.react-preview

Compose it into your dev environment, in the .bit-env.ts file:

import { TemplateList } from '@teambit/generator';
import { ReactPreview } from '@teambit/preview.react-preview';

export class MyEnv {
  preview(): EnvHandler<Preview> {
    return ReactPreview.from({
      docsTemplate: require.resolve('preview/docs.js'),
      mounter: require.resolve('preview/mounter.js'),
      // transformers: [webpackTransformer],

The above examples uses our webpack configuration for React preview. To adjust the configuraiton you can add webpack config mutators, learn how to use them here.

Mount previews

Preview servers provide an API for mounting your components to the DOM. You can use the Preview API to pass your custom mounter to include themes, routing providers or other contextual elements you would like to include for all components using a certain env.

The example below demonstrates a mounter function provided to the ReactPreview component demonstrated above:

import React from 'react';
import { createMounter } from '@teambit/react.mounter';

 * use the mounter to inject and wrap your component previews
 * with common needs like [routing](), [theming]() and [data fetching]().
export function MyReactProvider({ children }: { children: React.ReactNode }) {
  return <>{children}</>;

 * to replace that mounter component for different purposes, just return a function
 * that uses ReactDOM to render a node to a div.
export default createMounter(MyReactProvider);

Mount documentation

You can also mount the component docuemntation templates, or completely replace it using the docsTemplate flag when using the preview server.

import { createDocsTemplate } from '@teambit/';
import { MyReactProvider } from './mounter.js';

 * customize the bit documentation template or
 * replace this with one of your own.
export default createDocsTemplate(MyReactProvider);

You can check find examples in our official React env, or by creating your env by running the following command:

Learn more