View on Github


NPM version NPM downloads

This is an addon to render your Stories as full-featured markdown documentation with a storybook. Allows to render source template near the live example.

Addon was tested with version 4.0.0 of a storybook.




npm install storybook-any-info --save-dev

Prerequisites = WARNING

  • That addon modifies your story output.
  • Currently only template-stories supported.
  • Addon is not covered with tests yet, use it wisely :)

There are tasks to fix some issues. Soon TODO list will be moved to GitHub issues.


  1. Write markdown file near your story.

  2. Import *.md file to your story, check if build will not fail. (Find Angular workaround in the bottom of the docs)

  3. Add decorator and parameters.

        anyinfo: {
            customStyles: "div {background: #0f0;}",
            markdown: "## Custom markdown header",


Here are options for anyinfo parameter:

name type required
customStyles string No
markdown string No


This is a final example with Angular:

import { withAnyInfo } from "storybook-any-info";
import * as markdown from "./"; // Related docs file
import { Button } from "@storybook/angular/demo"; // Do not forget to replace with your component

storiesOf("Button", module)
    anyinfo: {
      customStyles: "div {background: #0f0;}",
      markdown: "## Custom markdown header"
  .add("with text", () => ({
    moduleMetadata: {
      declarations: [Button]
    template: `<storybook-button-component [text]="text"></storybook-button-component>`,
    props: {
      text: "Hello Button"

CSS styling

You can setup your own styling, or use predefined one from exported variable storyStyles.

Support Markdown docs for Angular

Add types.d.ts with next content to .storybook directory:

declare module "*.md" {
  const value: string;
  export default value;

And add it to your .storybook/tsconfig.json:

  // ...
  "include": [
    // ...