Mock API Builder — Stateful CRUD Endpoints from OpenAPI
Mock APIs give you fully-functional REST APIs in seconds. Define resources on a visual canvas, or import an OpenAPI spec and get auto-generated CRUD endpoints with Faker.js data—no code needed.
// Two Ways to Build a Resource Mock
📋 Visual Table Editor (primary)
The default mode. Add fields row-by-row — name, type, faker generator. No spec file needed. Best for custom APIs you design from scratch.
📄 Import OpenAPI (scaffold shortcut)
Available inside the Import Table screen via the "Import OpenAPI" button. Parses a spec and pre-fills the resource schema and fields — saving you from typing each field manually. After import the API stays in resource mode (editable table), not spec-routing mode.
⚠ Import OpenAPI here ≠ Import YAML (Spec Mocks). Spec Mocks route requests directly through your OpenAPI spec. Resource mocks use the spec only as a schema scaffold — you own the data and edit the table freely. See Import YAML docs for spec-routing mode.
// Quick Start: Scaffold from an OpenAPI Spec
Inside the Import Table screen, click "Import OpenAPI" and paste this YAML. The resource fields will be pre-filled from the spec's schemas — then edit freely in the table editor.
openapi: "3.0.3"
info:
title: E-Commerce Store
version: "1.0"
paths:
/users:
get:
summary: List all users
responses:
"200":
content:
application/json:
schema:
type: array
items:
$ref: "#/components/schemas/User"
post:
summary: Create user
requestBody:
content:
application/json:
schema:
$ref: "#/components/schemas/User"
responses:
"201":
content:
application/json:
schema:
$ref: "#/components/schemas/User"
/users/{id}:
get:
summary: Get user by ID
responses:
"200":
content:
application/json:
schema:
$ref: "#/components/schemas/User"
/products:
get:
summary: List all products
responses:
"200":
content:
application/json:
schema:
type: array
items:
$ref: "#/components/schemas/Product"
post:
summary: Create product
requestBody:
content:
application/json:
schema:
$ref: "#/components/schemas/Product"
responses:
"201":
content:
application/json:
schema:
$ref: "#/components/schemas/Product"
/products/{id}:
get:
summary: Get product by ID
responses:
"200":
content:
application/json:
schema:
$ref: "#/components/schemas/Product"
put:
summary: Update product
responses:
"200":
content:
application/json:
schema:
$ref: "#/components/schemas/Product"
delete:
summary: Delete product
responses:
"204":
description: Deleted
/orders:
get:
summary: List all orders
responses:
"200":
content:
application/json:
schema:
type: array
items:
$ref: "#/components/schemas/Order"
post:
summary: Place order
responses:
"201":
content:
application/json:
schema:
$ref: "#/components/schemas/Order"
/orders/{orderId}/items:
get:
summary: List items in order
responses:
"200":
content:
application/json:
schema:
type: array
items:
$ref: "#/components/schemas/OrderItem"
components:
schemas:
User:
type: object
properties:
name:
type: string
email:
type: string
format: email
phone:
type: string
avatar:
type: string
format: uri
address:
type: string
Product:
type: object
properties:
title:
type: string
description:
type: string
price:
type: number
format: float
category:
type: string
image:
type: string
format: uri
stock:
type: integer
Order:
type: object
properties:
status:
type: string
enum: [pending, shipped, delivered]
total:
type: number
created_at:
type: string
format: date-time
customer:
$ref: "#/components/schemas/User"
OrderItem:
type: object
properties:
quantity:
type: integer
price:
type: number
product:
$ref: "#/components/schemas/Product"After import you'll see all 11 endpoints listed in the import dialog, 4 resources created (users, products, orders, items), and auto-detected relationships (orders → users, items → products, orders → items from nested path).
// Auto-Generated Endpoints
Every resource gets these REST endpoints. Replace :apiId with your mock API ID from the dashboard.
// Full CRUD with curl
# Replace with your project ID and the mock API's base path
API="https://moqapi.dev/api/invoke/{projectId}/products-api"
# List products with pagination and sorting
curl "$API/products?_page=1&_limit=5&_sort=price&_order=desc"
# Search / filter by field
curl "$API/products?category=Electronics"
# Get a single product
curl "$API/products/1"
# Create a product
curl -X POST "$API/products" \
-H "Content-Type: application/json" \
-d '{"title":"Wireless Mouse","price":29.99,"category":"Electronics","stock":150}'
# Update a product
curl -X PUT "$API/products/1" \
-H "Content-Type: application/json" \
-d '{"title":"Wireless Mouse Pro","price":39.99,"stock":120}'
# Delete a product
curl -X DELETE "$API/products/1"
# === Nested routes (from relationships) ===
# Get items in order #2
curl "$API/orders/2/items"
# Create item in order #2
curl -X POST "$API/orders/2/items" \
-H "Content-Type: application/json" \
-d '{"quantity":3,"price":9.99}'
# === Embedding related data ===
# Embed child resources
curl "$API/orders?_embed=items"
# Expand parent resource
curl "$API/items?_expand=orders"// React Integration
// Replace with your project ID and the mock API's base path
const API = 'https://moqapi.dev/api/invoke/{projectId}/products-api';
// Fetch products
async function getProducts(page = 1) {
const res = await fetch(API + '/products?_page=' + page + '&_limit=10');
return res.json(); // { data: [...], pagination: { total, page, limit } }
}
// Create a product
async function createProduct(product) {
const res = await fetch(API + '/products', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(product),
});
return res.json();
}
// React component
function ProductList() {
const [products, setProducts] = useState([]);
useEffect(() => {
getProducts().then(res => setProducts(res.data));
}, []);
const handleCreate = async () => {
const newProduct = await createProduct({
title: 'Test Product',
price: 19.99,
category: 'Demo',
stock: 50
});
setProducts(prev => [...prev, newProduct]);
};
return (
<div>
<button onClick={handleCreate}>Add Product</button>
{products.map(item => (
<div key={item.id}>
<h3>{item.title}</h3>
<span>{'$'}{item.price} — {item.stock} in stock</span>
</div>
))}
</div>
);
}// Faker.js Field Mapping
When you import a spec or create resources manually, fields are mapped to Faker methods by name. Here's the mapping:
{
"name": "person.fullName",
"email": "internet.email",
"phone": "phone.number",
"avatar": "image.avatar",
"username": "internet.userName",
"address": "location.streetAddress",
"city": "location.city",
"country": "location.country",
"title": "lorem.sentence",
"description": "lorem.paragraph",
"price": "commerce.price",
"company": "company.name",
"status": "helpers.arrayElement",
"created_at": "date.recent",
"url": "internet.url",
"category": "commerce.department",
"color": "color.human",
"quantity": "number.int",
"rating": "number.float",
"latitude": "location.latitude",
"longitude": "location.longitude"
}Use the "Generate Data" button in the resource panel to populate 10 records with Faker-generated data.