⚡ Stop Mocking Backends: Test Stateful REST & GraphQL APIs Live in Your Browser (Playground API v4.0)

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 , andDELETE requests. 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 , andPATCH requests 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 (...) | | 🐍 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_identity cookies orX-Playground-Identity headers. - 📈 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/reset to 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 ([]); const [loading, setLoading] = useState(false); const [error, setError] = useState (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 ( 🚀 Playground API v4 Testing Rig ➕ Create Sandboxed Post 🔄 Refresh (with 1.2s Delay) {loading && ⏳ Loading posts from virtual overlay... } {error && ⚠️ {error} } {posts.map((post) => ( {post.title} {post.body} ))} ); } 📊 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 Lang