{"id":49447,"library":"storybook-axios","title":"Storybook Axios","description":"A Storybook addon that enables inspection and documentation of Axios network requests within Storybook stories. Current stable version is 2.2.1, with a moderate release cadence of roughly monthly patches. It integrates seamlessly with Storybook 10.x and Axios 1.x. Unlike generic network logging addons, this one is tightly coupled with Axios, providing request/response previews, headers, and timing directly in the Storybook panel. Requires React 18+ and Storybook 10.1.4+. It is ESM-only and does not support CommonJS.","status":"active","version":"2.2.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","storybook","axios","network","documentation","addon","storybook-addons"],"install":[{"cmd":"npm install storybook-axios","lang":"bash","label":"npm"},{"cmd":"yarn add storybook-axios","lang":"bash","label":"yarn"},{"cmd":"pnpm add storybook-axios","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: used for intercepting and displaying Axios requests","package":"axios","optional":false},{"reason":"Peer dependency: required for rendering addon UI components","package":"react","optional":false},{"reason":"Peer dependency: addon requires Storybook framework","package":"storybook","optional":false}],"imports":[{"note":"ESM-only; CJS require will fail in Node ESM context.","wrong":"const withAxios = require('storybook-axios')","symbol":"withAxios","correct":"import { withAxios } from 'storybook-axios'"},{"note":"Named export, not default.","wrong":"import AxiosInspector from 'storybook-axios'","symbol":"AxiosInspector","correct":"import { AxiosInspector } from 'storybook-axios'"},{"note":"Constant export; naming is all caps.","wrong":"import { paramKey } from 'storybook-axios'","symbol":"PARAM_KEY","correct":"import { PARAM_KEY } from 'storybook-axios'"}],"quickstart":{"code":"// .storybook/main.ts\nimport type { StorybookConfig } from '@storybook/nextjs';\nimport { withAxios } from 'storybook-axios';\n\nconst config: StorybookConfig = {\n  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],\n  addons: [\n    '@storybook/addon-essentials',\n    'storybook-axios'\n  ],\n  framework: '@storybook/nextjs',\n};\nexport default config;\n\n// In a story file (e.g., Button.stories.tsx)\nimport { AxiosInspector } from 'storybook-axios';\nimport type { Meta, StoryObj } from '@storybook/react';\nimport axios from 'axios';\n\nexport default {\n  title: 'Example/Button',\n  component: Button,\n  decorators: [AxiosInspector],\n} as Meta;\n\nexport const WithAxiosCall: StoryObj = {\n  render: () => {\n    const handler = async () => {\n      await axios.get('https://api.example.com/data');\n    };\n    return <button onClick={handler}>Fetch Data</button>;\n  },\n};","lang":"typescript","description":"Configure Storybook addon and use decorator to inspect Axios calls in stories."},"warnings":[{"fix":"Upgrade Storybook to v10.1.4 or later.","message":"Requires Storybook 10.1.4+ (not compatible with Storybook 9.x or earlier).","severity":"breaking","affected_versions":"<2.0"},{"fix":"Use import syntax and ensure your project is ESM.","message":"ESM-only package; does not support CommonJS require().","severity":"breaking","affected_versions":">=2.0"},{"fix":"Replace 'AxiosInterceptor' with 'AxiosInspector' in imports.","message":"Older versions used a different decorator name 'AxiosInterceptor' which has been renamed to 'AxiosInspector'.","severity":"deprecated","affected_versions":"<2.0"},{"fix":"Ensure Axios calls are made within the story's render function or decorator context.","message":"Addon will only intercept Axios calls made during the story lifecycle; calls outside (e.g., in global setup) are not captured.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Install axios@1.12.2 in your project.","message":"Axios version must be exactly ^1.12.2 per peer dependency; mismatched versions may cause silent failures.","severity":"gotcha","affected_versions":">=2.0"}],"env_vars":null,"search_vec":"'1':41 '10':37 '10.1.4':71 '18':68 '2.2.1':22 'addon':5,47,87,90 'axio':2,12,40,54,84 'cadenc':27 'commonj':81 'coupl':52 'current':18 'direct':61 'document':10,86 'enabl':7 'esm':75 'esm-on':74 'generic':44 'header':58 'inspect':8 'integr':33 'javascript':82 'log':46 'moder':25 'month':30 'network':13,45,85 'one':49 'panel':65 'patch':31 'preview':57 'provid':55 'react':67 'releas':26 'request':14 'request/response':56 'requir':66 'rough':29 'seamless':34 'stabl':19 'stori':17 'storybook':1,4,16,36,64,70,83,89 'storybook-addon':88 'support':80 'tight':51 'time':60 'unlik':43 'version':20 'within':15 'x':38,42","created_at":"2026-06-07T17:01:49.546405+00:00","updated_at":"2026-06-07T17:01:49.546405+00:00","problems":[{"fix":"Set 'type': 'module' in your package.json or use a dynamic import.","cause":"Package is ESM-only and may not be resolved correctly in a CJS project.","error":"Cannot find module 'storybook-axios' or its corresponding type declarations."},{"fix":"Use import { withAxios } from 'storybook-axios' instead of require.","cause":"Using require() or incorrect import syntax.","error":"TypeError: (0 , storybook_axios.withAxios) is not a function"},{"fix":"Add 'storybook-axios' to the addons array in .storybook/main.(js|ts|cjs|mjs).","cause":"Addon expects to be registered in addons array; missing or misconfigured.","error":"Storybook addon 'storybook-axios' failed to register: Invalid addon configuration."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"storybook-axios","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}