Mocking GUIThe Mocking GUI for MSW

Manage your API mocks with an intuitive GUI panel.

Get Started

View Examples

Visual Management

Manage MSW handlers intuitively with GUI panel. Quickly find APIs with search and filtering capabilities.

Real-time Control

Toggle mocks, switch response variants, and inject network delays instantly without code changes.

Universal State Sync

Share mock states between Browser and Server (SSR/RSC) seamlessly via cookie propagation.

Swagger Integration

Generate a complete mock server instantly from your OpenAPI/Swagger documents. No manual handler setup needed.

Scenario Management

Capture complex bug reproduction steps as "Scenarios". Save, restore, and share them with your team.

Flexible Interface

Customize the panel's size and position. Shadow DOM ensures zero style conflicts with your application.

What is Mocking GUI?

Mocking GUI is a GUI library based on MSW (Mock Service Worker). It provides an intuitive interface to easily mock and test APIs during development.

Key Features

Zero Config: Seamless integration with MSW.
Intuitive Interface: Manage handlers without complex code.
Swagger Automation: Generate mocks instantly from OpenAPI/Swagger.
Type Safe: Full TypeScript support.

Quick Start

Start by installing the package in your project.

bash

pnpm add @kakaocloud/mocking-gui

Initialize MSW configuration:

bash

npx msw init <PUBLIC_DIR> [options]

Wrap your application with MockingGUIBoundary:

tsx

import { MockingGUIBoundary } from '@kakaocloud/mocking-gui/browser';

function App() {
  return (
    <MockingGUIBoundary>
      <YourAppContent />
    </MockingGUIBoundary>
  );
}

Read the Documentation →

Examples

Check out our examples to get started quickly.

Next.js (App Router)

Example using Next.js App Router with Mocking GUI.

View Example →

React (Vite)

Simple React SPA example built with Vite.