Using Component Previews

Using the Bit component preview you can test and preview component documentation and exectuion locally prior

During development you can preview your components in the Bit Workspace UI. Run the following command to preview your components:

bit start
Copied

After successful compilation of your preview, you will see which servers are up. Since Bit allows

ENVIRONMENT NAME                    URL                                  STATUS
teambit.harmony/aspect on behalf    http://localhost:3300                RUNNING
of teambit.harmony/aspect,
company.scope/envs/my-react


You can now view 'my-workspace' components in the browser.
Bit server is running on http://localhost:3000
Copied

You can now head the browser and navigate to the url provided by the above output, and head to the "Preview" tab the component you are looking to preview:

You can preview components in preview files called "compositions". To add previews to your component add a file named *.compositions.tsx to your component and export every usage preview of your component in its own identifer. Below is an example in React:

export const Basic = () => {
  return <Heading>Heading 1</Heading>;
}

export const H1 = () => {
  return <Heading size="h1"></Heading>;
}
Copied

If needed, you can control the mounting of your component's preview using the Preview mounter.

You can preview the component directly from the component docs file from preview purposes and demonstrate how to use the component interactively using the playground.

To render a component in your documentation, head to the .docs.mdx of your component and add an import statement.

---
description: 'A Header component'
labels: ['header']
---

import { Header } from './header';

Header for the Acme developer website.

<Header />
Copied

If you used a mounter for your previews, make sure to also include this in your template.

• Setup preview in dev environments
• Customize docs template