Mock Service Worker
Mock API requests in Storybook with Mock Service Worker.
npm install msw-storybook-addon
Downloads per week

MSW Storybook Addon


  • Mock Rest and GraphQL requests right inside your story.
  • Document how a component behaves in various scenarios.
  • Get a11y, snapshot and visual tests using other addons for free.

Full Documentation

Quick Start

Install msw & storybook addon.

npm i -D msw msw-storybook-addon

Enable msw on storybook by adding these lines in ./storybook/preview.js

import { addDecorator } from '@storybook/react'
import { initializeWorker, mswDecorator } from 'msw-storybook-addon'


Generate service worker for msw in your public folder.

npx msw init public/

Refer MSW official guide for framework specific paths.

Start storybook with that public folder.

npx start-storybook -s public -p 6006

Mock API calls in a story.

import { rest } from 'msw'

export const SuccessBehavior = () => <UserProfile />

SuccessBehavior.parameters = {
  msw: [
    rest.get('/user', (req, res, ctx) => {
      return res(
          firstName: 'Neil',
          lastName: 'Maverick',

The msw parameter takes an array of handlers as shown in MSW official guide.