Mocklify

Powerful API Mocking for VS Code

Create, manage, and run mock servers directly from your editor. Perfect for frontend development, API prototyping, and testing.

Features • Installation • Quick Start • Documentation • Shortcuts

✨ Features

🚀 Core Features

• Multiple Mock Servers - Run multiple servers on different ports simultaneously
• Dynamic Responses - Use Handlebars templates with 80+ Faker.js helpers
• Request Matching - Match by headers, query params, and body content
• Response Delays - Simulate network latency with fixed or random delays
• Hot Reload - Changes apply instantly without server restart

🔌 Protocol Support

• HTTP/REST - Full support for all HTTP methods
• GraphQL - Mock queries and mutations with variable substitution
• WebSocket - Real-time event mocking with rooms and broadcast

📥 Import & Export

• OpenAPI/Swagger - Import from OpenAPI 3.0 or Swagger 2.0 specs
• Postman Collections - Import from Postman Collection v2.1
• HAR Export - Export request logs in HTTP Archive format
• cURL Export - Generate cURL commands from logged requests

🎯 Advanced Features

• Proxy Pass-through - Forward requests to real APIs with recording
• Request Recording - Capture real API responses to generate mocks
• Response Sequences - Return different responses based on call count
• Database Integration - Query JSON files or in-memory databases
• Environment Variables - Use variables across routes and servers

🎨 Modern Dashboard

• Beautiful UI - Modern React dashboard with dark/light themes
• Real-time Logs - View request/response logs as they happen
• Search & Filter - Find routes by name, path, method, or tags
• Keyboard Shortcuts - Navigate and control with keyboard

📦 Installation

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions (Cmd+Shift+X / Ctrl+Shift+X)
3. Search for "Mocklify"
4. Click Install

From VSIX File

1. Download the .vsix file
2. Open VS Code
3. Go to Extensions
4. Click ... → "Install from VSIX..."
5. Select the downloaded file

🚀 Quick Start

1. Create Your First Server

1. Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
2. Type "Mocklify: Create Server"
3. Enter a name and port (e.g., "API Server" on port 3000)

2. Add a Route

1. Right-click on your server in the Mocklify sidebar
2. Select "Add Route"
3. Configure your route:
   • Name: Get Users
   • Method: GET
   • Path: /api/users
   • Response:

     {
       "users": [
         { "id": 1, "name": "John Doe" },
         { "id": 2, "name": "Jane Smith" }
       ]
     }
     

3. Start the Server

1. Click the ▶️ play button next to your server
2. Your mock API is now running at http://localhost:3000

4. Test It

curl http://localhost:3000/api/users

📖 Documentation

For full documentation, visit the Mocklify Documentation Site.

Dynamic Responses with Templates

Use Handlebars templates with Faker.js for dynamic data:

{
  "id": "{{faker 'string.uuid'}}",
  "name": "{{faker 'person.fullName'}}",
  "email": "{{faker 'internet.email'}}",
  "createdAt": "{{now}}"
}

Available Template Helpers

Request Matching

Match specific requests with conditions:

{
  "matcher": {
    "headers": {
      "Authorization": "Bearer valid-token"
    },
    "queryParams": {
      "status": "active"
    },
    "body": {
      "type": "jsonPath",
      "jsonPath": "$.user.role",
      "value": "admin"
    }
  }
}

Response Sequences

Return different responses based on call count:

{
  "response": {
    "type": "sequence",
    "sequence": [
      { "statusCode": 200, "body": { "attempt": 1 } },
      { "statusCode": 200, "body": { "attempt": 2 } },
      { "statusCode": 429, "body": { "error": "Rate limited" } }
    ]
  }
}

Proxy & Recording

Forward requests to a real API and record responses:

1. Start your mock server
2. Click "Start Recording"
3. Enter the target URL (e.g., https://api.example.com)
4. Make requests to your mock server
5. Stop recording and generate mock routes from captured responses

GraphQL Support

Create GraphQL mocks with operation matching:

{
  "path": "/graphql",
  "method": "POST",
  "matcher": {
    "body": {
      "type": "jsonPath",
      "jsonPath": "$.operationName",
      "value": "GetUser"
    }
  },
  "response": {
    "body": {
      "data": {
        "user": {
          "id": "{{faker 'string.uuid'}}",
          "name": "{{faker 'person.fullName'}}"
        }
      }
    }
  }
}

WebSocket Support

Create WebSocket event handlers:

{
  "protocol": "websocket",
  "path": "/ws",
  "routes": [
    {
      "name": "chat:message",
      "path": "ws:chat:message",
      "response": {
        "body": {
          "event": "chat:message",
          "data": {
            "id": "{{uuid}}",
            "message": "{{request.body.message}}",
            "timestamp": "{{now}}"
          }
        }
      }
    }
  ]
}

⌨️ Keyboard Shortcuts

Navigation

Actions

🗂️ Project Structure

Mocklify stores configuration in a .mocklify folder in your workspace:

.mocklify/
├── servers.json      # Server configurations
├── recordings/       # Recorded sessions
└── databases/        # JSON database files

🔧 Configuration

Extension Settings

🤝 Contributing

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

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

📄 License

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

🙏 Acknowledgments

• Fastify - Fast and low overhead web framework
• Faker.js - Generate realistic fake data
• Handlebars - Semantic templating
• VS Code Extension API - Extension development

Made with ❤️ by Sitharaj