API Playground
Test your mock REST and GraphQL endpoints directly from the dashboard. Configure requests, inspect responses, and debug your API integration.
Overview
The API Playground is an interactive testing tool built into the MockAPI dashboard. It lets you send requests to your mock endpoints, inspect responses, and debug your API configuration without leaving the browser.
Access the Playground from the Playground link in the dashboard sidebar.
REST Playground
The REST tab lets you test your REST endpoints with full control over the request configuration.
Features
| Feature | Description |
|---|---|
| Endpoint selector | Choose from a dropdown of all your project's REST endpoints |
| HTTP method | Select the HTTP method (GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS) |
| URL path editing | Modify the endpoint path, including filling in template parameters |
| Custom headers | Add, edit, and remove custom request headers |
| Request body | Write JSON request bodies for POST, PUT, and PATCH requests |
| Response viewer | View formatted JSON responses with syntax highlighting |
| Status code badge | See the response status code at a glance |
| Response time | Monitor response times for performance testing |
| Copy response | Copy the response body to your clipboard |
Template parameters
When you select a template endpoint (e.g., /users/{id}), the Playground automatically identifies the template parameters and lets you fill in values. For example, replacing {id} with 42 sends a request to /users/42.
Custom headers
Add custom headers to your request by clicking "Add Header" and entering the header name and value. The API key header is automatically included, so you don't need to add it manually.
GraphQL Playground
Switch to the GraphQL tab to test your GraphQL endpoints. The GraphQL playground provides a query editor where you can write and execute GraphQL queries.
Features
| Feature | Description |
|---|---|
| Endpoint selector | Choose from your project's GraphQL endpoints |
| Query editor | Write GraphQL queries with syntax support |
| Response viewer | View formatted JSON responses |
| Status and timing | See response status codes and execution time |
Authentication in Playground
The Playground automatically authenticates requests using your project's API key. You don't need to manually add authentication headers. They're included behind the scenes. This means you can focus on testing your endpoint logic without worrying about auth.
Interpreting Results
Status codes
The response section shows the HTTP status code with a color-coded badge:
| Color | Status Range | Meaning |
|---|---|---|
| Green | 2xx | Success: the request was handled correctly |
| Yellow | 3xx | Redirect: the request was redirected |
| Red | 4xx | Client error: check your request configuration |
| Red | 5xx | Server error: check your endpoint configuration |
Response body
The response body is displayed as formatted JSON. You can copy the entire response using the copy button. If the response is an array (from a range response), all items are displayed.
Response time
The response time shows how long the request took to complete. This includes network latency and any artificial delay from the latency profile in Project settings. Use this to test how your application handles different response times.
Common Use Cases
- Verify endpoint configuration: After creating or editing an endpoint, use the Playground to verify it returns the expected data.
- Test error responses: If you've configured multiple responses with return rates, send multiple requests to see different responses.
- Preview generated data: Check that your model's property types generate the right kind of data.
- Test GraphQL selection sets: Verify that your GraphQL endpoints correctly filter response data based on the requested fields.
- Demo to stakeholders: Show stakeholders how the API works without needing Postman or cURL.