Storybook · Writing and testing · all subjects

autodocs

19 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Autodocs generates documentation from stories with autodocs tag

Storybook Autodocs automatically generates comprehensive documentation pages for UI components. If a CSF file contains at least one story tagged with `autodocs`, a documentation page will be generated for that component. The documentation infers metadata from args, argTypes, and parameters, and positions the documentation page at the root-level of the component tree in the sidebar.

Enable autodocs globally via tags in preview file

To enable automatic documentation for all stories in a project, add the `autodocs` tag to the `tags` configuration in `.storybook/preview.jsx|tsx` file.

Enable autodocs at component or story level

You can enable autodocs at the component (or story) level by adding the `autodocs` tag in the meta object of a CSF file, rather than globally in the preview file.

Disable autodocs for specific component or story

You can disable autodocs for a particular component by removing the `autodocs` tag from the component level. Similarly, you can exclude a particular story from the autodocs page by removing the tag from that story.

Autodocs configuration options in main.js|ts

The following options are available to configure autodocs in `.storybook/main.js|ts|cjs`: `defaultName` (renames the auto-generated documentation page, default: 'Docs') and `docsMode` (toggles documentation mode which only shows documentation pages in the sidebar, default: false).

Custom autodocs template using docs parameter with page function

To replace the default documentation template, extend `.storybook/preview.jsx|tsx` and introduce a `docs` parameter that accepts a `page` function returning a React component. This allows you to generate a custom template for the auto-generated documentation.

Default autodocs template components

The default autodocs template includes: (1) a header with component metadata via Title, Subtitle, and Description Doc Blocks, (2) the first story via Primary Doc Block with zoom controls, (3) an interactive Controls Doc Block table with all args and argTypes, and (4) an overview of remaining stories via Stories Doc Block.

MDX template for autodocs with isTemplate property

You can create an MDX file as a documentation template by supplying the `isTemplate` property to its Meta Doc Block. This is useful in non-React projects where JSX-handling is not configured. The template can be used in `.storybook/preview.jsx|tsx` or an individual story file by importing it.

Enable table of contents in autodocs

To enable the table of contents feature on auto-generated documentation pages, extend `.storybook/preview.jsx|tsx` and provide a `docs` parameter with a `toc` property. This helps navigate long documentation pages.

Document multiple components with subcomponents

Autodocs allows you to document your main component defined by the `component` property, as well as one or more `subcomponents` related to it. The main component and subcomponents will show up in a tabbed version of the ArgTypes doc block, with tab titles corresponding to the keys of the `subcomponents` object.

Customize Docs Container component

You can customize the Docs Container (the component that wraps the documentation page) by creating your own component and updating `.storybook/preview.jsx|tsx` to reference it. The Docs Container is responsible for rendering the documentation page in Storybook's UI.

Override default Storybook theme for documentation

Storybook provides two default themes: `light` and `dark`. You can customize the theme used by the documentation by updating `.storybook/preview.jsx|tsx` and applying your custom theme.

Override MDXProvider for custom documentation components

You can override the `MDXProvider` component from `@mdx-js/react` with your own to add custom components to documentation pages. However, component replacement only applies to Markdown syntax (e.g., `#` for headings), not native HTML elements like `<h1>`.

Docs addon options in main.js|ts

The docs addon accepts options in `.storybook/main.js|ts`: `csfPluginOptions` (provides additional configuration for Storybook's CSF plugin, can be disabled with null) and `mdxPluginOptions` (provides additional configuration options and plugin configuration for MDX documentation).

Autodocs not generating in monorepo setups

In monorepo setups (e.g., Yarn Workspaces, pnpm Workspaces), autodocs may not generate documentation. Solutions include updating import statements to reference components directly instead of from the package root, and potentially updating `.storybook/main.js|ts` configuration if using TypeScript.

Controls not updating with inline rendering disabled

If you disable inline rendering for stories via the `inline` configuration option on the Story doc block, controls will not update the story within the auto-generated documentation page. This is a known limitation that will be addressed in a future release.

Autodocs generates baseline component documentation automatically

When you include Storybook in your project for the first time, Storybook provides a documentation page called Autodocs that is automatically generated. Autodocs serves as a baseline template positioned near your stories and lists existing stories and relevant metadata.

autodocs tag required for docs page generation

If a CSF file does not contain at least one story tagged with autodocs, that component will not generate a docs page.

Autodocs configuration using tags

Instead of using parameters.docs.autodocs in main.js, use the tags property in .storybook/preview.js or in individual stories. Set tags: ['autodocs'] to generate autodocs for all stories.

Give your agent this brain