Auto-Docs

Auto-docs is Storybook's way to present all your stories for one component on one page, including a the controls panel.

Set up

pnpm

pnpm exec storybook add @storybook/addon-docs

npm

npx storybook add @storybook/addon-docs

yarn

yarn storybook add @storybook/addon-docs

bun

bun x storybook add @storybook/addon-docs

The storybook add command handles registration for you. If you prefer doing it by hand, it's one line in main.ts — for CSF Next projects also registered in the preview:

.storybook/main.ts

import type { StorybookConfig } from 'ember-storybook';

export default {
  addons: ['@storybook/addon-docs'],
} satisfies StorybookConfig;

.storybook/preview.ts

import type { Preview } from 'ember-storybook';

export default {
  tags: ['autodocs'],
} satisfies Preview;

The autodocs tag generates a docs page for every component. Drop it to a per-file level if you want pages selectively.

Auto-Docs Layout

• Title, subtitle, description — your meta, plus JSDoc on the component.
• Primary story — rendered inline (the framework sets docs.story.inline for you).
• Element — the HTML tag your component renders, with attributes.
• Component Signature - Your component signature (see below)
• All stories — with the code that produced them.

Component Signature

Component signatures are turned into auto documentation and render these parts (if available):

• Element - the HTML tag your component renders, with attributes
• Args - the Controls table.
• Blocks - your named blocks (eg. <:header>, <:default>), their block params and links to subcomponents they yield
• CSS Custom Properties - to list how you can customize the styling
• Part - to add custom styles to subelements
• Subcomponents - components yielded by block params (same structure as the main component)

The Source Panel

The code shown under each example isn't stringified args — a source decorator reconstructs the actual component invocation from your render (or from the implicit invocation, with args as @named arguments), so what you read is what runs. To keep the panel open for all stories:

.storybook/preview.ts

parameters: {
  docs: {
    codePanel: true,
  },
}

Writing Docs

A *.stories.gts file is the docs page: meta fields for structure, markdown in the file for prose. For full custom pages use the .mdx format — the stories file exports, the MDX file imports and arranges them:

card.stories.mdx

# Card

import { Primary } from './card.stories.gts';
import { Canvas } from '@storybook/addon-docs/blocks';

A surface for grouped content.

<Canvas of={Primary} />

Storybook's docs writing guide covers MDX, Parameters.docs, and custom blocks; all of it applies here.