CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-storybook--addon-docs

Storybook addon that automatically transforms component stories into comprehensive documentation using DocsPage and MDX

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

Storybook Addon Docs

Storybook Addon Docs automatically transforms component stories into comprehensive documentation. It provides two primary approaches: DocsPage for zero-configuration automatic documentation and MDX for full-control long-form documentation, supporting all major frontend frameworks with minimal setup.

Package Information

  • Package Name: @storybook/addon-docs
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @storybook/addon-docs

Core Imports

ESM imports:

// Main addon entry
import { DocsRenderer } from "@storybook/addon-docs";

// Documentation blocks
import { 
  Canvas, Story, ArgsTable, Description, Controls,
  DocsPage, DocsContainer, Primary, Source, Stories
} from "@storybook/addon-docs/blocks";

// Framework-specific imports
import { setCompodocJson } from "@storybook/addon-docs/angular";
import { setJSONDoc } from "@storybook/addon-docs/ember";
import HOC from "@storybook/addon-docs/svelte/HOC.svelte";

// MDX React shim
import { MDXProvider } from "@storybook/addon-docs/mdx-react-shim";

CommonJS:

// Main addon entry
const { DocsRenderer } = require("@storybook/addon-docs");

// Documentation blocks
const { 
  Canvas, Story, ArgsTable, Description, Controls,
  DocsPage, DocsContainer, Primary, Source, Stories
} = require("@storybook/addon-docs/blocks");

// Framework-specific imports
const { setCompodocJson } = require("@storybook/addon-docs/angular");
const { setJSONDoc } = require("@storybook/addon-docs/ember");

Basic Usage

// Configure in .storybook/main.js
export default {
  addons: ["@storybook/addon-docs"],
  docs: {
    defaultName: "Docs",
    autodocs: true
  }
};

// Use in MDX files
import { Canvas, Story, ArgsTable } from "@storybook/addon-docs/blocks";
import * as ButtonStories from "./Button.stories";

<Canvas of={ButtonStories.Primary} />
<ArgsTable of={ButtonStories} />

Architecture

The addon is built around several key systems:

  • Documentation Blocks: 25+ React components for building docs pages (Canvas, Story, ArgsTable, etc.)
  • MDX Integration: Enhanced MDX components with Storybook-specific functionality
  • Framework Support: Dedicated integrations for React, Angular, Vue, Svelte, Web Components
  • Control System: 10+ interactive controls for manipulating story arguments
  • Rendering Engine: DocsRenderer class that handles content generation and display
  • Configuration Presets: Webpack and Vite integration for seamless build setup

Capabilities

Documentation Blocks

Core building blocks for creating comprehensive documentation pages. These components automatically extract and display story metadata, source code, and interactive controls.

// Core documentation blocks
function Canvas(props: CanvasProps): React.ReactElement;
function Story(props: StoryProps): React.ReactElement;
function ArgsTable(props: ArgsTableProps): React.ReactElement;
function Description(props: DescriptionProps): React.ReactElement;

interface CanvasProps {
  of?: ModuleExport;
  meta?: ModuleExports;
  withToolbar?: boolean;
  sourceState?: 'hidden' | 'shown' | 'none';
  additionalActions?: Array<{title: string; onClick: () => void}>;
}

Documentation Blocks

Interactive Controls

Control components that provide interactive interfaces for manipulating story arguments in real-time, supporting all common input types with full type safety.

function Controls(props: ControlsProps): React.ReactElement;
function BooleanControl(props: BooleanProps): React.ReactElement;
function ColorControl(props: ColorProps): React.ReactElement;
function NumberControl(props: NumberProps): React.ReactElement;

interface ControlsProps {
  of?: Renderer['component'] | ModuleExports;
  include?: PropDescriptor;
  exclude?: PropDescriptor;
  sort?: SortType;
}

Interactive Controls

MDX Integration

Enhanced MDX components and utilities for creating long-form documentation with embedded stories and interactive elements.

function CodeOrSourceMdx(props: {children: string}): React.ReactElement;
function AnchorMdx(props: {id: string; children: React.ReactNode}): React.ReactElement;
function HeaderMdx(props: {as: 'h1'|'h2'|'h3'|'h4'|'h5'|'h6'; children: React.ReactNode}): React.ReactElement;

const HeadersMdx: {
  h1: React.FC<{children: React.ReactNode}>;
  h2: React.FC<{children: React.ReactNode}>;
  h3: React.FC<{children: React.ReactNode}>;
  h4: React.FC<{children: React.ReactNode}>;
  h5: React.FC<{children: React.ReactNode}>;
  h6: React.FC<{children: React.ReactNode}>;
};

MDX Integration

Framework Integration

Framework-specific utilities and components for extracting documentation from Angular, Vue, Svelte, and Web Components, with specialized features for each ecosystem.

// Angular integration
function setCompodocJson(compodocJson: any): void;

// Ember integration  
function setJSONDoc(jsonDoc: any): void;

Framework Integration

Configuration and Presets

Build tool integration and configuration options for seamless setup with popular bundlers and frameworks.

interface DocsParameters {
  docs?: {
    autodocs?: boolean;
    defaultName?: string;
    disable?: boolean;
    page?: React.ComponentType;
    container?: React.ComponentType<DocsContainerProps>;
    source?: Partial<SourceBlockParameters>;
    canvas?: Partial<CanvasBlockParameters>;
  };
}

Configuration

Types

interface DocsTypes {
  parameters: DocsParameters;
}

interface ModuleExports {
  default?: any;
  [key: string]: any;
}

type ModuleExport = any;

type PropDescriptor = string | string[] | RegExp;

type SortType = 'alpha' | 'requiredFirst' | 'none';

interface DocsContainerProps {
  context: DocsContextProps;
  children: React.ReactNode;
}

interface DocsContextProps {
  id: string;
  title: string;
  name: string;
  storyById: (id: string) => any;
  componentStories: () => any[];
  getStoryContext: (story: any) => any;
  loadStory: (id: string) => Promise<any>;
}

interface CanvasBlockParameters {
  /** Source code display configuration */
  sourceState?: 'hidden' | 'shown' | 'none';
  /** Story layout in canvas */
  layout?: 'padded' | 'fullscreen' | 'centered';
  /** Disable source snippets */
  disable?: boolean;
  /** Additional actions for toolbar */
  additionalActions?: ActionItem[];
  /** Custom source transformation */
  withSource?: SourceType;
}

interface SourceBlockParameters {
  /** Source code type */
  type?: 'auto' | 'code' | 'dynamic';
  /** Code language */
  language?: SupportedLanguage;
  /** Code formatting */
  format?: boolean | 'dedent';
  /** Exclude from source */
  excludeDecorators?: boolean;
  /** Source transformation function */
  transform?: (code: string, context: any) => string;
}

interface ActionItem {
  /** Action title */
  title: string;
  /** Click handler */
  onClick: () => void;
  /** Disabled state */
  disabled?: boolean;
  /** Icon component */
  icon?: React.ComponentType;
}

type SourceType = 
  | 'auto'
  | 'code' 
  | 'dynamic'
  | 'none';

type SupportedLanguage = 
  | 'javascript' | 'typescript' | 'jsx' | 'tsx'
  | 'html' | 'css' | 'scss' | 'json' 
  | 'markdown' | 'yaml' | 'bash';
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/addon-docs@9.1.x
Publish Source
CLI
Badge
tessl/npm-storybook--addon-docs badge