Guides

Mock API Examples

Copy realistic JSON examples for common development scenarios. Use them as a starting point, then adjust the fields and values to match your application.

Included: Products, users, login, orders, carts, posts and todosDifficulty: Beginner

Create separate response scenarios

Use different endpoints for successful, empty, unauthorized, validation and server-error responses. This makes it easier to test every state in your frontend.

Products API

Use this example for product listings, ecommerce interfaces, search results and inventory screens.

GET/productsStatus: 200

products.jsonJSON

[
  {
    "id": 1,
    "name": "Polo Shirt",
    "description": "Classic cotton polo shirt",
    "category": "clothing",
    "price": 10,
    "currency": "GBP",
    "size": "M",
    "stock": 24,
    "in_stock": true
  },
  {
    "id": 2,
    "name": "Classic Hoodie",
    "description": "Soft fleece pullover hoodie",
    "category": "clothing",
    "price": 29.99,
    "currency": "GBP",
    "size": "L",
    "stock": 12,
    "in_stock": true
  },
  {
    "id": 3,
    "name": "Slim Fit Jeans",
    "description": "Dark blue slim-fit jeans",
    "category": "clothing",
    "price": 39.99,
    "currency": "GBP",
    "size": "32",
    "stock": 0,
    "in_stock": false
  }
]

Useful for

Product grid and list views
Search and filtering interfaces
Product detail pages
Stock availability states

Users API

Use this response for user management tables, profile selectors and role-based interfaces.

GET/usersStatus: 200

users.jsonJSON

[
  {
    "id": 1,
    "name": "Alex Morgan",
    "email": "alex@example.com",
    "role": "admin",
    "active": true
  },
  {
    "id": 2,
    "name": "Jamie Taylor",
    "email": "jamie@example.com",
    "role": "editor",
    "active": true
  },
  {
    "id": 3,
    "name": "Sam Wilson",
    "email": "sam@example.com",
    "role": "viewer",
    "active": false
  }
]

Useful for

Admin user tables
Account directories
Role and permission displays
Active and inactive user filters

Successful login

Simulate a successful authentication request for login-form development.

POST/loginStatus: 200

{
  "success": true,
  "message": "Login successful",
  "user": {
    "id": 1,
    "name": "Alex Morgan",
    "email": "alex@example.com",
    "role": "admin"
  },
  "token": "mock_access_token_abc123",
  "expires_in": 3600
}

Use mock credentials only

Do not place real passwords, live authentication tokens or private customer data inside mock API responses.

Failed login

Test how your application handles incorrect email addresses or passwords.

POST/login-invalidStatus: 401

{
  "success": false,
  "error": {
    "code": "invalid_credentials",
    "message": "The email address or password is incorrect."
  }
}

Useful for

Invalid-credentials messages
Form error styling
Disabled login buttons
Unauthorized redirects

Orders API

Use this response for order histories, operations dashboards and fulfilment workflows.

GET/ordersStatus: 200

orders.jsonJSON

[
  {
    "id": "ord_1001",
    "customer_id": 1,
    "status": "paid",
    "currency": "GBP",
    "subtotal": 39.99,
    "delivery": 4.99,
    "total": 44.98,
    "created_at": "2026-08-01T10:30:00Z",
    "items": [
      {
        "product_id": 2,
        "name": "Classic Hoodie",
        "quantity": 1,
        "unit_price": 29.99
      },
      {
        "product_id": 1,
        "name": "Polo Shirt",
        "quantity": 1,
        "unit_price": 10
      }
    ]
  },
  {
    "id": "ord_1002",
    "customer_id": 2,
    "status": "processing",
    "currency": "GBP",
    "subtotal": 39.99,
    "delivery": 0,
    "total": 39.99,
    "created_at": "2026-08-01T12:15:00Z",
    "items": [
      {
        "product_id": 3,
        "name": "Slim Fit Jeans",
        "quantity": 1,
        "unit_price": 39.99
      }
    ]
  }
]

Useful for

Customer order history
Admin order management
Payment and fulfilment statuses
Nested order-item rendering

Shopping cart API

Use this example for cart drawers, checkout pages and order summaries.

GET/cartStatus: 200

cart.jsonJSON

{
  "id": "cart_abc123",
  "customer_id": 1,
  "currency": "GBP",
  "items": [
    {
      "product_id": 1,
      "name": "Polo Shirt",
      "quantity": 2,
      "unit_price": 10,
      "line_total": 20
    },
    {
      "product_id": 2,
      "name": "Classic Hoodie",
      "quantity": 1,
      "unit_price": 29.99,
      "line_total": 29.99
    }
  ],
  "subtotal": 49.99,
  "delivery": 4.99,
  "total": 54.98
}

Useful for

Basket totals
Quantity controls
Checkout summaries
Delivery-cost calculations

Blog posts API

Use this response for article lists, publishing dashboards and content-management interfaces.

GET/postsStatus: 200

posts.jsonJSON

[
  {
    "id": 1,
    "title": "Building a frontend before the backend",
    "slug": "frontend-before-backend",
    "excerpt": "Learn how mock APIs remove development blockers.",
    "author": {
      "id": 1,
      "name": "Alex Morgan"
    },
    "published": true,
    "published_at": "2026-07-20T09:00:00Z",
    "tags": [
      "frontend",
      "api",
      "development"
    ]
  },
  {
    "id": 2,
    "title": "Testing loading and error states",
    "slug": "testing-loading-error-states",
    "excerpt": "Use controlled API responses to test every UI state.",
    "author": {
      "id": 2,
      "name": "Jamie Taylor"
    },
    "published": true,
    "published_at": "2026-07-25T14:30:00Z",
    "tags": [
      "testing",
      "ui",
      "mock-api"
    ]
  }
]

Useful for

Blog index pages
Author and tag displays
Published and draft filters
Article cards and search results

Todo API

Use this response for task-management apps, productivity interfaces and learning projects.

GET/todosStatus: 200

todos.jsonJSON

[
  {
    "id": 1,
    "title": "Create product listing page",
    "completed": true,
    "priority": "high",
    "due_date": "2026-08-02"
  },
  {
    "id": 2,
    "title": "Connect checkout form",
    "completed": false,
    "priority": "high",
    "due_date": "2026-08-04"
  },
  {
    "id": 3,
    "title": "Add loading skeletons",
    "completed": false,
    "priority": "medium",
    "due_date": "2026-08-06"
  }
]

Useful for

Task lists
Completed-state toggles
Priority filters
Due-date interfaces

Validation error

Test field-level validation errors and failed form submissions.

POST/signup-invalidStatus: 400

validation-error.jsonJSON

{
  "success": false,
  "error": {
    "code": "validation_failed",
    "message": "One or more fields are invalid.",
    "fields": {
      "email": "A valid email address is required.",
      "password": "The password must contain at least 8 characters."
    }
  }
}

Useful for

Inline form validation
Error summaries
Accessible error messages
Field-specific feedback

Not-found response

Test empty detail pages and requests for resources that do not exist.

GET/products/missingStatus: 404

not-found.jsonJSON

{
  "success": false,
  "error": {
    "code": "resource_not_found",
    "message": "The requested product could not be found."
  }
}

Useful for

Missing product pages
Invalid route handling
Empty states
Return-to-list actions

Server error

Test how your application behaves when an API request fails unexpectedly.

GET/products-errorStatus: 500

server-error.jsonJSON

{
  "success": false,
  "error": {
    "code": "internal_error",
    "message": "Something went wrong while processing the request."
  }
}

Useful for

Retry buttons
Fallback interfaces
Error boundaries
Monitoring and logging flows

Combine errors with response delays

Add a short response delay to an error endpoint to test the complete loading-to-error experience rather than returning the failure immediately.

Empty responses

Empty collections are useful for testing first-use and no-results states.

GET/products-emptyStatus: 200

empty-products.jsonJSON

[]

Your application should normally distinguish between:

A successful response containing items
A successful response containing no items
A failed request
A request that is still loading

Suggested endpoint set

Create a small group of endpoints to test the main states of a product-listing interface.

GET/products200Successful product list

GET/products-empty200No products available

GET/products-missing404Requested resource not found

GET/products-error500Unexpected API failure

GET/products-slow200Loading-state testing

Adapt the examples

These examples are starting points rather than fixed response contracts.

Before using an example, update:

Field names expected by your frontend
Data types such as strings, numbers and booleans
Nested object and array structures
Status codes and error formats
Currency, date and language formats
Required request headers where access is restricted

Never use sensitive data

Do not place real passwords, API keys, payment details, access tokens, private customer records or confidential business information inside mock responses.

Turn these examples into working APIs

Copy an example, create an endpoint and connect your application to a hosted HTTPS URL.

Open API generator Create free account