Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
npm install storybook-any-info
Downloads per week
Readme 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": [
    // ...
Join the community
6,501 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI