@storybook/addon-mdx-gfm

A migration assistant addon that provides GitHub Flavored Markdown (GFM) support for Storybook documentation by automatically configuring the MDX compiler to include the remark-gfm plugin.

Package Information

• Package Name: @storybook/addon-mdx-gfm
• Package Type: npm (Storybook addon)
• Language: TypeScript
• Installation: npm install @storybook/addon-mdx-gfm

Core Imports

import { mdxLoaderOptions } from "@storybook/addon-mdx-gfm";

For CommonJS:

const { mdxLoaderOptions } = require("@storybook/addon-mdx-gfm");

Preset import (for Storybook configuration):

// .storybook/main.js
module.exports = {
  addons: ["@storybook/addon-mdx-gfm"]
};

Note: The addon uses a preset.js file that re-exports the main distribution file, enabling Storybook's addon system to automatically discover and integrate the MDX loader configuration.

Basic Usage

This addon is designed to be used automatically by Storybook when added to the addons list. It integrates with Storybook's MDX compilation pipeline through the preset system, requiring no manual configuration or function calls.

// .storybook/main.js
module.exports = {
  addons: [
    "@storybook/addon-docs",
    "@storybook/addon-mdx-gfm"  // Add this addon
  ]
};

When registered, Storybook automatically calls the addon's mdxLoaderOptions function during MDX compilation to configure the remark-gfm plugin. This enables GitHub Flavored Markdown features in your Storybook documentation, including:

• Tables
• Strikethrough text
• Task lists
• Autolinks
• And other GFM features

Capabilities

MDX Loader Configuration

Configures MDX loader options to include the remark-gfm plugin for GitHub Flavored Markdown support. This function is called internally by Storybook's build system when processing MDX files.

/**
 * Configures MDX loader options to include remark-gfm plugin
 * @param config - The existing MDX configuration object passed by Storybook's build system
 * @returns Promise resolving to the modified configuration with remark-gfm plugin added
 */
function mdxLoaderOptions(config: MdxLoaderConfig): Promise<MdxLoaderConfig>;

interface MdxLoaderConfig {
  mdxCompileOptions: {
    remarkPlugins?: any[];
    [key: string]: any;
  };
  [key: string]: any;
}

Implementation Details:

• Called automatically by Storybook during MDX compilation process
• Initializes config.mdxCompileOptions.remarkPlugins as empty array if not already set
• Adds the remark-gfm plugin to the remarkPlugins array
• Returns the modified configuration object
• Executes deprecation warning on module import

Note: This function is not intended for direct use - it's automatically invoked by Storybook's addon system when the addon is registered in your Storybook configuration.

Types

// Configuration interface for MDX loader
interface MdxLoaderConfig {
  mdxCompileOptions: {
    remarkPlugins?: any[];
    [key: string]: any;
  };
  [key: string]: any;
}

Important Notes

Deprecation Warning: This addon is intended as a migration assistant for Storybook 8.0 and will likely be removed in a future version. Upon import, it displays a deprecation warning directing users to configure their MDX setup properly.

Migration Path: Users should follow the documentation at https://storybook.js.org/docs/writing-docs/mdx#markdown-tables-arent-rendering-correctly to properly configure MDX with remark-gfm instead of relying on this addon.

Dependencies:

• remark-gfm (^4.0.0): The actual GitHub Flavored Markdown plugin
• ts-dedent (^2.0.0): Used for formatting the deprecation warning message

Error Handling

This addon does not throw errors under normal operation. If the MDX configuration object is malformed, standard JavaScript property access errors may occur.