Mockoon CLI UI

A modern web-based UI for managing Mockoon mock API environments. Built with Next.js 16, React 19, and Tailwind CSS.

Features • Installation • Usage • Development • API Reference

Features

🎨 Modern UI - Clean, dark-themed interface with real-time log streaming
🚀 Mockoon Powered - Built on top of Mockoon for reliable API mocking
📝 Environment Management - Create, edit, and manage multiple mock API environments
🔀 Route Configuration - Full support for HTTP methods, headers, responses, and callbacks
📊 Data Buckets - Create and manage reusable data buckets for your mocks
📋 OpenAPI Import - Import OpenAPI/Swagger specifications to auto-generate mock environments
🔄 Real-time Logs - Server-Sent Events (SSE) powered live log streaming
🐳 Docker Ready - Includes Dockerfile and docker-compose for containerized deployment
🌙 Dark Mode - Built-in theme support with dark mode by default

Screenshots

Dashboard - Route Editor

Create New Environment

Data Buckets Management

Environment Settings

Prerequisites

Bun >= 1.0.0 (recommended) or Node.js >= 18
PM2 (installed as dependency)

Installation

Clone the repository

git clone https://github.com/yourusername/mockoon-cli-ui.git
cd mockoon-cli-ui

Install dependencies

bun install

Start the development server

bun run dev

Open http://localhost:3000 with your browser to access the UI.

Usage

Creating an Environment

Click the "+" button in the sidebar to create a new environment
Configure the environment name, hostname, and port
Add routes, responses, and data buckets as needed

Importing OpenAPI Specifications

Click the import button in the sidebar
Paste your OpenAPI/Swagger JSON specification
The environment will be automatically created with all routes

Managing Mock Servers

Use the play/stop buttons to start and stop individual mock servers
View real-time logs in the log panel at the bottom
Monitor server status in the sidebar

Development

Available Scripts

Command	Description
`bun run dev`	Start development server
`bun run build`	Build for production
`bun run start`	Start production server
`bun run lint`	Run ESLint
`bun run test`	Run tests
`bun run test:watch`	Run tests in watch mode
`bun run test:coverage`	Run tests with coverage report

Project Structure

mockoon-cli-ui/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   │   ├── action/        # PM2 process control
│   │   ├── environments/  # CRUD operations
│   │   └── logs/          # Log streaming (SSE)
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # React components
│   ├── Dashboard.tsx      # Main application component
│   ├── RouteEditor.tsx    # Route configuration editor
│   ├── RouteList.tsx      # Route listing component
│   ├── Sidebar.tsx        # Environment sidebar
│   ├── LogPanel.tsx       # Real-time log viewer
│   └── ...
├── data/                  # Environment JSON files
├── lib/                   # Utility libraries
├── scripts/               # Server scripts
├── types/                 # TypeScript definitions
└── images/                # Static images

Key Technologies

Next.js 16 - React framework with App Router
React 19 - UI library
Tailwind CSS 4 - Utility-first CSS
Monaco Editor - Code editor for responses
Mockoon - API mocking engine
PM2 - Process manager for mock servers

API Reference

Environment Endpoints

Method	Endpoint	Description
`GET`	`/api/environments`	List all environments
`POST`	`/api/environments/create`	Create new environment
`POST`	`/api/environments/import`	Import environment from JSON
`POST`	`/api/environments/import-openapi`	Import from OpenAPI spec
`PUT`	`/api/environments/update`	Update environment settings
`DELETE`	`/api/environments?filename=`	Delete environment

Route Endpoints

Method	Endpoint	Description
`GET`	`/api/environments/routes`	Get routes for environment
`POST`	`/api/environments/routes`	Add new route
`PUT`	`/api/environments/routes`	Update route
`DELETE`	`/api/environments/routes`	Delete route

Action Endpoints

Method	Endpoint	Description
`GET`	`/api/action`	Get server status
`POST`	`/api/action`	Start/stop servers

Logs Endpoint

Method	Endpoint	Description
`GET`	`/api/logs/stream`	SSE stream for real-time logs

Docker Deployment

Using Docker Compose

docker-compose up -d

Using Dockerfile

docker build -t mockoon-cli-ui .
docker run -p 3000:3000 mockoon-cli-ui

Environment Variables

Variable	Description	Default
`NODE_ENV`	Environment mode	`development`

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

Mockoon - The amazing API mocking tool this project is built upon
Next.js - The React framework for production
Tailwind CSS - For the beautiful styling

Made with ❤️ by the Mockoon CLI UI contributors

oniharnantyo/mockoon-ui