REST API BuilderMock routes · Test requests · Export Express.js
5 routes
GET/users200
GET/users/:id200
POST/users201
PUT/users/:id200
DELETE/users/:id204
HTTP Method
Path
Description
Status Code
Mock Response (JSON)
Response Headers (JSON object)

Related Tools

See all ->
Express.js PlaygroundLearn Express — 32 lessons · API simulatorNode.js PlaygroundVisual event loop simulatorAPI Request Generator & TesterGenerate · Test · 12 langsAPI Mock GeneratorFake REST API with JSON schemaGraphQL PlaygroundIn-browser executor · 12 lessonsMongoDB PlaygroundLearn MongoDB — 32 lessons · Query simulatorJSON FormatterFormat & validateNext.js PlaygroundApp Router sandbox

REST API Builder Playground — Build, Test & Export Mock API Routes Visually

Updated May 20, 2026
Share & Support

What's included

Features

Visual route builder — define method, path, status code, response body, and headers through a clean form interface; graduate to real route code in the Express playground
Five CRUD templates — Users, Posts, Products, Blog API, and Auth API with pre-built realistic routes; generate richer fake payloads with the API mock generator
Built-in HTTP Client — test GET/POST/PUT/PATCH/DELETE requests against your mock routes with one click — or use the standalone API request tester against live APIs
Route parameter matching —: id and :slug wildcards work exactly like Express.js, matching any value in that path position
Auth simulation — mark routes as auth-required; HTTP client returns 401 when no token is provided
Authorization token input — add a Bearer token to test protected routes without setting up a real auth system
Color-coded status badges — 2xx green, 4xx orange, 5xx red for instant response readability
Response timing display — see simulated response time including configured delays
Simulated response delay — configure 0–2000ms delay per route to test loading states and async UI
Format JSON button — automatically formats and indents your response body JSON with one click
Export to Express.js — generates complete, runnable Express.js server code for all routes
Export to JSON Config — save and download your full route configuration for backup or sharing
localStorage persistence — your routes are saved automatically and restored on every visit
No backend required — everything runs in your browser, no Node.js or server setup needed

About this tool

REST API Builder Playground — Design Routes Visually, Test Requests Instantly, Export Express.js Code

REST APIs are the backbone of modern web development. Every frontend app — whether built with React, Vue, or plain JavaScript — needs an API to fetch data, submit forms, authenticate users, and manage resources. But building a backend API from scratch takes time, and using a real backend for frontend prototyping means waiting for it to be ready, dealing with CORS issues, and managing server state during development. The REST API Builder solves all of this.

This tool lets you create a complete collection of mock API routes using a visual interface — no code required. Define each route's HTTP method, URL path, response status code, JSON response body, headers, auth requirements, and simulated delay. Then test every route using the built-in HTTP client. When your API design is finalized, export working Express.js code with a single click.

How routes work: Each route is a combination of an HTTP method and a URL path. GET /users returns a list of users. POST /users creates one. GET /users/:id retrieves a specific user by their ID — the :id portion is a route parameter that matches any value, so /users/1, /users/42, and /users/alice all match. You can define as many routes as your API needs, with full control over what each one returns.

The built-in HTTP client lets you test your routes without leaving the tool. Select the method, type the path (replacing :id with a real value like 1), add an Authorization token if the route requires authentication, and click Send. The tool matches your request against all defined routes, applies the auth check if needed, simulates the configured delay, and returns the mock response — with a color-coded status badge, response timing, matched route indicator, response headers, and syntax-highlighted JSON body.

Auth simulation is built in. Mark any route as auth-required, and the HTTP client will return a 401 Unauthorized response if you try to test it without providing an Authorization token. This lets you design and test protected endpoints — login flows, profile endpoints, admin-only routes — exactly as they would behave in a real API.

CRUD templates give you a complete starting API in one click. Load Users CRUD for a five-route user management API, Posts CRUD for a blog-style API, Products CRUD for e-commerce, Blog API for a full content platform with categories and tags, or Auth API for a complete authentication system with login, register, logout, profile, and token refresh endpoints.

Export to Express.js generates production-ready server code. The output includes all your routes with proper middleware, a requireAuth function for protected routes, response delay handling, and an app.listen() call. Save the file, run npm install express && node server.js, and your mock API becomes a real running server — ready to swap in for production code.

All data is saved automatically to your browser's localStorage. Return to the tool anytime and your routes are exactly where you left them. No account, no sign-up, no data ever leaves your browser.

Step by step

How to Use

  1. 1
    Start with a template or add your first routeClick "Load Template" to instantly load a complete CRUD API — choose from Users, Posts, Products, Blog API, or Auth API. Or click "+ Add Route" to start from scratch with a blank GET route. The sidebar shows all your routes with method badges, paths, and status codes at a glance.
  2. 2
    Configure the route in the editorClick any route in the sidebar to open it in the editor. Select the HTTP method (GET, POST, PUT, PATCH, DELETE) using the colored pill buttons. Type the path — use :id or :slug for route parameters that match any value. Set the status code using the number input or click a quick-select chip (200, 201, 400, 401, 404, 422, 500). Paste or type your mock JSON response in the Response Body textarea and click Format JSON to clean it up.
  3. 3
    Set auth and delay optionsToggle "Auth Required" if this route should reject requests without an Authorization header. Drag the Delay slider to add a simulated response delay of up to 2000ms — useful for testing loading spinners and async UI states. Click Save Route to commit your changes.
  4. 4
    Test routes with the HTTP ClientSwitch to the HTTP Client tab. The method and path auto-fill from your selected route. Replace any :id parameters with real values like /users/1. Add an Authorization token if testing a protected route. Click Send — the response panel shows the status code, timing, matched route, response headers, and syntax-highlighted JSON body. A "no matching route" warning appears if your request path does not match any route.
  5. 5
    Export your Express.js server codeSwitch to the Export Code tab. Choose Express.js to see the complete, runnable server code with all your routes, auth middleware, and delays configured. Click Copy All Code and paste it into a server.js file. Run npm install express && node server.js to turn your mock API into a real running Express server. Or choose JSON Config to download your route configuration as a backup.

Real-world uses

Common Use Cases

▶
Frontend developers prototyping without a backend
When the backend is not ready or you are building a demo, the REST API Builder gives you a complete mock API to develop against. Define the endpoints your frontend needs, set realistic response shapes, and test the full data flow — all without spinning up a server or waiting for a backend team.
{}
Designing and documenting API structures
Before writing backend code, use the builder to sketch out your API design. Define routes, decide on status codes, shape the response JSON, and test the URL structure. The exported Express.js code and JSON config serve as living documentation that the whole team can review and iterate on.
◉
Learning REST API design patterns
The CRUD templates demonstrate the standard REST resource patterns — plural nouns as paths, HTTP verbs as actions, :id parameters for specific resources, 201 for creation, 204 for deletion. Load a template and explore how a complete REST API is structured before building one from scratch.
⊞
Testing frontend error handling and loading states
Set a route to return 400, 404, or 500 to test how your frontend handles errors. Add a 1500ms delay to test loading spinners and skeleton screens. Mark a route as auth-required to test your 401 handling logic. The REST API Builder gives you full control over mock responses that are difficult to reproduce with a real backend.
∑
Generating Express.js server boilerplate
Use the builder as an Express.js code generator. Design your API visually, then click Export to get complete, working server code with all routes, middleware, and auth handling. It is faster than writing the boilerplate by hand and produces code that is immediately runnable with Node.js.
⚡
API demos and presentations
The builder loads with a complete Users CRUD API pre-configured, making it impressive on first view for demos and presentations. Show stakeholders what an API looks like, test requests live in the HTTP client, and export the code to prove it works. The tool requires no setup, so demos always work.

Got questions?

Frequently Asked Questions

No. Everything runs in your browser. Create and test mock routes without any Node.js or server setup. The HTTP client simulates requests in-browser and matches them against your defined routes. Export the Express.js code when you want a real running server.

Any REST API structure — user management, blog APIs, e-commerce products, authentication flows, and more. Use the five CRUD templates (Users, Posts, Products, Blog API, Auth API) as starting points, or build from scratch with full control over methods, paths, status codes, and response bodies.

Use the HTTP Client tab. Select the method, type the path (replacing :id with a real value), add an auth token if needed, and click Send. The response panel shows the status code, timing, matched route, headers, and JSON body. Color-coded: 2xx green, 4xx orange, 5xx red.

:id is a wildcard segment that matches any value in that URL position. /users/:id matches /users/1, /users/42, or /users/alice. The same :param syntax as Express.js. Replace :id with a real value when testing in the HTTP client.

Yes. Export Code generates complete Express.js server code for all your routes, including auth middleware and delay handling. Copy it, paste into server.js, run npm install express && node server.js. You also get a JSON Config export for backup and import.

Pre-built route sets covering Create, Read, Update, and Delete operations. Five templates: Users CRUD (5 routes), Posts CRUD (5 routes), Products CRUD (5 routes), Blog API (posts, categories, tags), and Auth API (login, register, logout, profile, token refresh). Loading a template replaces your current routes after confirmation.

Yes. Routes are auto-saved to localStorage every time you make a change. Return anytime and find your routes exactly as you left them. No account required. Your data never leaves your browser.

The REST API Builder Playground is a visual utility for prototyping and building API structures without writing code. The Express.js Playground is a lesson-based learning environment with 32 guided lessons for learning Express.js by writing code. Use this playground to prototype; use the Express.js Playground to learn.