When building frontend applications, testing mobile apps, or writing automated QA suites, developers constantly face a frustrating dilemma:
-
Traditional mock APIs (like JSONPlaceholder) are easy to use, but they instantly discard your
POST,PUT, andDELETErequests. The moment you refresh your React/Vue app, your newly created items disappear into thin air. - Spinning up your own backend (Express/Nest/Prisma) takes time, requires database migrations, environment variables, and maintenance just to test a prototype or write UI tests.
That’s why I built Playground API—a free, open-source mock REST & GraphQL API service with zero-login per-session state persistence. Your mutations persist across requests for your session identity while global seed datasets remain read-only for other visitors.
Following our previous releases (which introduced GraphQL Gateway, Fake JWT Auth, and Dynamic Custom Collections), today I’m thrilled to announce Playground API v4.0! ⚡
v4.0 transforms Playground API into a world-class interactive developer platform and testing playground, featuring a brand-new Next.js 15 App Router portal, an in-browser live Try-It runner, 10-language code snippet generators, an active "On this page" TOC navigation, and native LLM / AI agent endpoints! 🚀
🌟 What’s New in Playground API v4.0?
┌─────────────────────────────────────────────────────────────────────────────┐
│ PLAYGROUND API v4.0 │
│ │
│ [ Next.js 15 Portal ] ◄─► [ Live Try-It Studio ] ◄─► [ AI Agent Ready ] │
│ • React 19 + Tailwind v4 • Latency Simulation • /llms.txt spec │
│ • Glassmorphic Design • Status Code Injection • /llms-full.txt │
│ • 3-Column Navigation • Response Inspector (ms) • TypeScript SDK │
└─────────────────────────────────────────────────────────────────────────────┘
⚡ 1. Brand New Modern Frontend Portal (Next.js 15 + React 19)
The frontend has been completely rebuilt from the ground up as a standalone Next.js 15 App Router web application (playground_api_fe) styled with Tailwind CSS v4 and React 19:
- 🎨 Glassmorphic Design System: Polished dark and light themes with harmonious palettes, custom slim scrollbars, and fluid micro-animations.
- 📐 Symmetric 3-Column Documentation Layout:
- Left: Collapsible nested sidebar grouping Overview, Sandbox, REST Collections, GraphQL Schemas, and Client Downloads.
- Center: Interactive documentation with live sample responses, parameter tables, and request builders.
- Right: Sticky "On this page" Table of Contents with active ScrollSpy tracking.
- ⚡ Blazing Fast Static Generation (SSG): 26+ documentation pages pre-rendered for instant page loads and optimal SEO.
🧪 2. In-Browser Live "Try-It" Runner on Every Endpoint
You no longer need to open a separate HTTP client or terminal just to see what an endpoint returns!
Every documentation card now includes an integrated Try-It Runner (TryItRunner.tsx):
- 🎛️ Interactive Parameters: Fill in path parameters (
:id,:userId) and query parameters (limit,page,q,_sort,_order) directly in the UI. - 📝 Payload Editor: Pre-filled JSON payload templates for
POST,PUT, andPATCHrequests with syntax highlighting and formatting. - ⏱️ Middleware Simulation Controls:
-
X-Simulate-Delay: Test UI loading spinners (0ms, 500ms, 1500ms, 3000ms, 5000ms). -
X-Simulate-Status: Test UI error toasts with simulated HTTP status codes (200 OK, 400 Bad Request, 401 Unauthorized, 404 Not Found, 500 Server Error).
-
- 🔍 Real-Time Response Inspector:
- Exact HTTP status badge (e.g.
200 OK,201 Created,500 Internal Server Error). - Execution latency in milliseconds (e.g.
⚡ 24 ms). - Response headers viewer.
- Copyable formatted JSON or dynamic SVG preview.
- Exact HTTP status badge (e.g.
💻 3. Multi-Language Code Generators (10+ Languages)
Need to quickly integrate an endpoint into your preferred language or framework? Every endpoint card provides copy-and-paste code snippets in:
| Language / Tool | Client Library | Snippet Format |
|---|---|---|
| 🌐 cURL | Shell CLI | curl -X GET "https://playground-api-xi.vercel.app/api/v1/posts?limit=5" |
| 🟨 JavaScript | Native Fetch | await fetch('https://playground-api-xi.vercel.app/api/v1/posts') |
| 🟦 JavaScript | Axios | await axios.get('https://playground-api-xi.vercel.app/api/v1/posts') |
| 🔷 TypeScript | Strongly Typed Fetch | const res = await fetch<Post[]>(...) |
| 🐍 Python | Requests | requests.get('https://playground-api-xi.vercel.app/api/v1/posts') |
| 🐹 Go | net/http |
http.Get("https://playground-api-xi.vercel.app/api/v1/posts") |
| 🍏 Swift | URLSession |
URLSession.shared.dataTask(with: url) |
| 📱 Kotlin | OkHttpClient |
client.newCall(request).execute() |
| 🦀 Rust | reqwest |
reqwest::get("https://playground-api-xi.vercel.app/...").await |
| 🐘 PHP |
cURL / file_get_contents
|
curl_exec($ch) |
🧭 4. "On This Page" Table of Contents Navigation
Navigating long documentation pages (like /docs/posts or /docs/graphql/posts) is now effortless:
- 📌 Sticky Right-Hand Sidebar: Symmetrically matches the left navigation sidebar.
- 🎯 Automatic DOM Heading Discovery: Scans for operations, schemas, and parameter tables on route change.
- 📍 Active ScrollSpy: Dynamically highlights your current reading position with high-contrast active styling (
text-accent-primary font-bold). - 🔗 Smooth Anchor Navigation: Clicking any link smoothly scrolls to the target anchor with proper navbar offset (
scroll-mt-20) and updates the URL hash cleanly.
📊 5. Session Sandbox Quota & Activity Dashboard (/docs/stats)
Gain complete transparency into your anonymous session sandbox:
- 🆔 Live Session UUID & HMAC Signed Token: 1-click copy for
pg_identitycookies orX-Playground-Identityheaders. - 📈 Mutation Summary Counters: Live counts of created, updated, and deleted records in your sandbox.
- 📊 Per-Resource Quota Progress Bars: Visual indicators tracking your quota (up to 30 sandbox records per collection).
- 🕒 10-Day Retention Indicator: Shows exact creation timestamp and last-seen activity timestamp.
- 🗑️ 1-Click Sandbox Reset: Wipe your session overlay instantly via
DELETE /session/resetto restore a clean slate.
🤖 6. AI Agent & LLM Endpoints (/llms.txt & /llms-full.txt)
With AI coding assistants (like Claude, Cursor, Antigravity, ChatGPT, and GitHub Copilot) becoming standard development tools, Playground API now provides native LLM text specifications:
- 📄
/llms.txt: Compact, structured summary of all available REST endpoints, GraphQL gateway rules, authentication endpoints, and middleware simulation headers. - 📚
/llms-full.txt: Comprehensive, full-length API documentation specification designed for AI context injection.
Your AI assistants can now read the spec directly and generate fully functional, accurate frontend components interacting with Playground API!
📦 7. Complete Multi-Format Workspace Downloads
Take Playground API anywhere in 1 click:
- 📑 OpenAPI 3.0 Specification (
/downloads/openapi.json): Import into Swagger UI, Redoc, or Stoplight. - 🚀 Postman Collection v2.1 (
/downloads/postman.json): Pre-configured environment variables and sample requests. - 🐶 Bruno Collection (
/downloads/bruno.json): Git-friendly, offline-first collection. - 🟣 Insomnia Workspace (
/downloads/insomnia.json): Instant workspace export. - 📘 TypeScript Type Declarations (
/downloads/playground-api.d.ts//types/ts): Full TypeScript interfaces forUser,Post,Comment,Todo,AuthPayload, and response wrappers.
🛠️ Quick Practical Demo: Testing Network Delay & Errors in Next.js / React
Here’s how you can use Playground API v4.0 to test a full CRUD component with loading skeletons and error toasts:
import React, { useState, useEffect } from 'react';
interface Post {
id: string | number;
title: string;
body: string;
user_id: number;
}
const API_URL = 'https://playground-api-xi.vercel.app/api/v1';
export default function PostTester() {
const [posts, setPosts] = useState<Post[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
// 1. Fetch posts with simulated 1200ms latency to test loading UI
const loadPosts = async () => {
setLoading(true);
setError(null);
try {
const res = await fetch(`${API_URL}/posts?limit=3`, {
headers: { 'X-Simulate-Delay': '1200' }, // ⏱️ Artificial delay
credentials: 'include', // 🍪 Preserves sandbox session
});
if (!res.ok) throw new Error(`HTTP Error: ${res.status}`);
const json = await res.json();
setPosts(json.data);
} catch (err: any) {
setError(err.message);
} finally {
setLoading(false);
}
};
// 2. Create a persistent post in your personal session sandbox
const createPost = async () => {
const res = await fetch(`${API_URL}/posts`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
body: JSON.stringify({
title: 'Persistent Sandboxed Article v4',
body: 'This post persists across page refreshes for your session identity!',
user_id: 1,
}),
});
const newPost = await res.json();
setPosts((prev) => [newPost, ...prev]);
};
useEffect(() => {
loadPosts();
}, []);
return (
<div className="max-w-xl mx-auto p-6 bg-slate-900 text-white rounded-2xl space-y-4">
<h2 className="text-xl font-bold">🚀 Playground API v4 Testing Rig</h2>
<div className="flex gap-2">
<button
onClick={createPost}
className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-xl text-sm font-semibold transition-all"
>
➕ Create Sandboxed Post
</button>
<button
onClick={loadPosts}
className="px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-xl text-sm font-semibold transition-all"
>
🔄 Refresh (with 1.2s Delay)
</button>
</div>
{loading && <p className="text-amber-400 animate-pulse text-sm">⏳ Loading posts from virtual overlay...</p>}
{error && <p className="text-rose-400 text-sm">⚠️ {error}</p>}
<div className="space-y-2">
{posts.map((post) => (
<div key={post.id} className="p-3 bg-slate-800 rounded-xl border border-slate-700">
<h4 className="font-bold text-sm text-indigo-400">{post.title}</h4>
<p className="text-xs text-slate-300 mt-1">{post.body}</p>
</div>
))}
</div>
</div>
);
}
📊 Complete Feature Matrix (v1 ➔ v4)
| Feature | v1.0 | v2.0 | v3.0 | 🚀 v4.0 Modern Ecosystem |
|---|---|---|---|---|
| Per-Session Virtual Sandbox | ✅ | ✅ | ✅ | ✅ |
REST Collections (users, posts, comments, todos) |
✅ | ✅ | ✅ | ✅ |
Network Delay & Error Simulation (_delay, _status) |
❌ | ✅ | ✅ | ✅ |
| OpenAPI / Postman / Bruno Downloads | ❌ | ✅ | ✅ | ✅ |
GraphQL Sandbox Gateway (/graphql) |
❌ | ❌ | ✅ | ✅ |
Fake JWT Auth (/auth/login, /auth/register) |
❌ | ❌ | ✅ | ✅ |
Dynamic Custom Collections (/custom/*) |
❌ | ❌ | ✅ | ✅ |
Dynamic SVG Avatars (/public/avatars/*) |
❌ | ❌ | ✅ | ✅ |
TypeScript Type Declarations (.d.ts) |
❌ | ❌ | ✅ | ✅ |
| Next.js 15 App Router Portal | ❌ | ❌ | ❌ | ✅ |
| Interactive Live Try-It Runner | ❌ | ❌ | ❌ | ✅ |
| Multi-Language Code Generators (10 Languages) | ❌ | ❌ | ❌ | ✅ |
| "On this page" TOC Navigation | ❌ | ❌ | ❌ | ✅ |
AI Agent Endpoints (/llms.txt) |
❌ | ❌ | ❌ | ✅ |
| Session Quota & Activity Dashboard | ❌ | ❌ | ❌ | ✅ |
🔗 Try Playground API v4 Today!
Playground API is 100% free, zero-config, open-source, and requires no account creation:
- 🌐 Live Portal & Interactive Studio: https://playground-api-xi.vercel.app/
- 📖 Interactive API Documentation: https://playground-api-xi.vercel.app/docs
- 🕸️ GraphQL Gateway Explorer: https://playground-api-xi.vercel.app/docs/graphql
- 📊 Session Quota Dashboard: https://playground-api-xi.vercel.app/docs/stats
- 🤖 AI Context Specification: https://playground-api-xi.vercel.app/llms.txt
- ⭐ GitHub Repository: github.com/nileshcodehub/playground_api
If you find Playground API helpful for your projects, demos, or testing suites, please give it a ⭐ on GitHub!
What new feature are you looking forward to using most in your development workflow? Drop your thoughts and feedback in the comments below! 👇
Top comments (0)