Storybook · Schema

Storybook Story (CSF)

Schema for a Storybook Component Story Format (CSF) story definition. Stories describe individual visual states of UI components and are the core unit of Storybook documentation and testing.

Accessibility TestingComponent DocumentationComponent TestingDesign SystemsFrontend DevelopmentOpen SourceReactUI ComponentsVisual Testing

Properties

Name Type Description
name string Display name of the story, shown in the Storybook sidebar
args object Default argument values for the component in this story. Override the component default args.
parameters object Static story metadata used to configure addons and Storybook behavior
decorators array Array of decorator functions wrapping the story render function
play string Async function executing user interactions for interaction testing
tags array Tags for categorizing stories and controlling test inclusion
loaders array Async data loading functions run before the story renders
View JSON Schema on GitHub

JSON Schema

storybook-story-schema.json Raw ↑
{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "$id": "https://api-evangelist.github.io/storybook/json-schema/storybook-story-schema.json",
  "title": "Storybook Story (CSF)",
  "description": "Schema for a Storybook Component Story Format (CSF) story definition. Stories describe individual visual states of UI components and are the core unit of Storybook documentation and testing.",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "Display name of the story, shown in the Storybook sidebar"
    },
    "args": {
      "type": "object",
      "description": "Default argument values for the component in this story. Override the component default args.",
      "additionalProperties": true
    },
    "parameters": {
      "$ref": "#/$defs/Parameters",
      "description": "Static story metadata used to configure addons and Storybook behavior"
    },
    "decorators": {
      "type": "array",
      "description": "Array of decorator functions wrapping the story render function",
      "items": {
        "type": "string",
        "description": "Decorator function reference (as string identifier)"
      }
    },
    "play": {
      "type": "string",
      "description": "Async function executing user interactions for interaction testing"
    },
    "tags": {
      "type": "array",
      "items": { "type": "string" },
      "description": "Tags for categorizing stories and controlling test inclusion"
    },
    "loaders": {
      "type": "array",
      "description": "Async data loading functions run before the story renders"
    }
  },
  "required": ["name"],
  "$defs": {
    "Parameters": {
      "type": "object",
      "description": "Storybook story parameters for configuring addons and behavior",
      "properties": {
        "layout": {
          "type": "string",
          "enum": ["centered", "fullscreen", "padded"],
          "description": "Story layout in the Storybook canvas"
        },
        "backgrounds": {
          "type": "object",
          "description": "Background color options for the story canvas",
          "properties": {
            "default": { "type": "string" },
            "values": {
              "type": "array",
              "items": {
                "type": "object",
                "properties": {
                  "name": { "type": "string" },
                  "value": { "type": "string" }
                }
              }
            }
          }
        },
        "viewport": {
          "type": "object",
          "description": "Viewport dimensions for the story canvas",
          "properties": {
            "defaultViewport": { "type": "string" }
          }
        },
        "a11y": {
          "type": "object",
          "description": "Accessibility testing configuration",
          "properties": {
            "disable": { "type": "boolean" },
            "config": { "type": "object" }
          }
        },
        "docs": {
          "type": "object",
          "description": "Documentation page configuration",
          "properties": {
            "description": {
              "type": "object",
              "properties": {
                "story": { "type": "string" },
                "component": { "type": "string" }
              }
            }
          }
        }
      }
    }
  }
}