Introduction to Mocking GUI

Mocking GUI is a GUI tool optimized for HTTP-based API mocking.

The library is built on MSW 2.x's http namespace and supports mocking for the following types of HTTP requests/responses:

• HTTP requests generated by fetch, XMLHttpRequest, etc.
• HTTP methods such as GET, POST, PUT, PATCH, DELETE, etc.

Through its control panel, you can manipulate API responses in real-time and easily verify various test scenarios without changing code.

Why Mocking GUI?

MSW is an excellent library, but managing handlers purely through code can be cumbersome. To make a specific API return an error or add delay, you often have to modify code and refresh the page.

Mocking GUI solves these problems:

• GUI-First: Change API states (Success/Error/Loading) instantly from the panel with a single click, without code changes.
• Enhanced Collaboration: Save complex bug reproduction steps as "Scenarios" and share them with your team.
• Easy Setup: Provides an instant mocking environment with minimal configuration and supports mock state synchronization between browser and server.

Key Features

• Powerful Control Panel: Control handler activation, mode (Auto/Manual/Swagger), response variants, and delays instantly from the GUI.
• Server Synchronization: Cookie-based state synchronization ensures consistent mocking behavior across CSR, Next.js (SSR/RSC), Remix, and other server-side rendering environments.
• Swagger/OpenAPI Automation: Load Swagger documents to instantly create a mock server and control responses without writing code.
• Scenario Management: Save complex API state combinations (e.g., No User + Payment Failed) as a single "Scenario" to restore and share with one click.
• Style Isolation: Uses Shadow DOM to provide a safe overlay without conflicting with your application's CSS.

Getting Started

Ready to introduce Mocking GUI to your project?

👉 Installation & Setup Guide - Get started in 3 minutes with detailed installation instructions and framework integration examples.

For advanced usage:

• Swagger Automation - Connect your existing API docs for instant mock generation
• Usage Guides - Learn about handlers, scenarios, and advanced features