mockrMock API server for frontend prototyping

Define endpoints, get full CRUD for free. Mock the routes you're building, proxy the rest to a real backend. Record traffic from the Chrome extension and map it to local files.

Start the tutorial

GitHub

🪄

Free CRUD from data

`data: T[]` becomes a list endpoint with GET/POST/PUT/PATCH/DELETE. `data: T` becomes a record endpoint. Mutations persist in memory.

📁

Hot-reloadable JSON files

`dataFile: file('./todos.json')` — edit the file, endpoint reloads. Type-safe handles without static imports.

🔌

Proxy + ctx.forward()

Pass-through unmatched routes. Inside a handler, `ctx.forward()` hits upstream, returns the response so you can mutate before sending.

🎬

Named scenarios

Switch between server states (`empty` / `crowded` / `down`) for demos, e2e tests, and reproducing edge cases.

🛡️

Validate with zod

`handler({ body, query, params, fn })` flows zod schema output into `req.body` / `req.query` / `req.params` — typed, no casts.

🧩

Chrome extension recorder

Capture network traffic, map responses to local JSON files, generate `.d.ts` types. Replay sessions in-memory for offline dev.

🛰️

WebSocket endpoints

`ws({ onConnect, onMessage, onClose })` mocks streaming protocols. Cross-endpoint `WsHandle.broadcast` lets HTTP routes push to clients.

Quick start

bash

npm install @yoyo-org/mockr zod
npx tsx mock.ts

import { mockr } from '@yoyo-org/mockr';

await mockr({
  port: 4000,
  endpoints: [
    { url: '/api/todos', data: [
      { id: 1, title: 'Buy milk', done: false },
    ]},
  ],
});

That's it. GET /api/todos returns the array. POST /api/todos inserts. PATCH /api/todos/1 updates. DELETE /api/todos/1 removes. No glue code.

Continue with the tutorial →