Where is this example's state stored?

The synchronized project configuration stays in the cloud; generated records and CRUD state stay in the local SQLite database.

Complete example

Complete TypeScript Mock API Example

Build a small customer and order API from reusable TypeScript models, related REST resources, realistic local data, and frontend requests.

Start building free View documentation

Define the models

Create two exported interfaces and keep the order foreign key primitive so the relationship can bind it.

TypeScript

export interface Customer {
  id: string;
  name: string;
  email: string;
}

export interface Order {
  id: string;
  customerId: string;
  total: number;
  status: "pending" | "paid";
}

Create the resources

Bind Customer[] to /customers and Order[] to /orders. Enable GET, POST, PATCH, and DELETE, then connect Customer.id to Order.customerId.

HTTP

GET    /customers
POST   /customers
GET    /orders
PATCH  /orders/:id
GET    /customers/:id/orders

Start the runtime

Generate an API token, synchronize the project, and start the local server.

Shell

npx mock-api-studio-cli start customer-orders
# API running at http://localhost:4000

Call it from the frontend

Keep the base URL in development configuration and handle the response and error states your UI needs.

TypeScript

const response = await fetch("http://localhost:4000/customers?page=1&limit=20");
if (!response.ok) throw new Error("Could not load customers");
const { data, meta } = await response.json();

Extend the scenario

Add authentication, latency, errors, pagination boundaries, and mutations as the frontend workflow grows.

Keep exploring

Last updated September 17, 2026. Product behavior described here is verified against the current Mock API Studio runtime.