Mock REST APIs like standard JSONPlaceholder are great for quick hello-world prototypes.
But as soon as your frontend app grows to test GraphQL queries, JWT authentication flows, custom domain entities (like products or orders), or TypeScript auto-completion, standard mock tools quickly hit a brick wall.
A while ago, I launched Playground API—a zero-config, stateful mock API that solved the biggest flaw in mock testing: instant state loss.
Playground API introduced zero-login per-session sandboxing, giving frontend developers real state persistence for , , , and requests without databases or authentication logins.
Following our v2 update (which brought network latency simulation, error injection, and OpenAPI exports), today I’m thrilled to introduce Playground API v3.0! ⚡ v3.0 elevates Playground API from a mock REST API into a complete multi-protocol developer testing ecosystem featuring a GraphQL Sandbox Gateway, Fake JWT Auth Simulation, Dynamic Custom Collections, Dynamic SVG Avatars, and Full TypeScript SDK Definitions. 🆕 What’s New in Playground API v3.0? 🕸️
1.
GraphQL Sandbox Gateway () You no longer need to spin up a mock GraphQL server or setup Apollo Server locally just to test GraphQL queries and mutations.
Playground API now includes a native GraphQL Gateway at .
Crucially, all GraphQL mutations (, , ) interact directly with your session sandbox overlay—giving you stateful GraphQL testing out-of-the-box!
GraphQL Query Example: GraphQL Stateful Mutation Example: 🔑
2.
Fake JWT Authentication Simulation () Testing login screens, token storage (localStorage / HTTP-only cookies), token refresh cycles, and protected profile views is historically tedious with fake APIs.
Playground API v3 introduces a dedicated JWT Auth Simulation: 🚪 : Authenticate using mock credentials and receive signed JWT access and refresh tokens. 📝 : Register a new sandboxed user profile with instant JWT credential generation. 🔄 : Test access token expiration and token rotation. 👤 & : Fetch and edit the logged-in user profile passing . 📦
3.
Dynamic Custom Resource Collections () Why limit mock testing to , , , and ?
What if you're building an e-commerce dashboard (, ), a CRM (, ), or a note-taking app ()?
With Dynamic Custom Collections, you can hit any custom endpoint name on the fly: ➔ Creates a new product entity in your session overlay ➔ Fetches your sandboxed product collection ➔ Updates the custom entity ➔ Deletes the custom entity You can also seed entire mock domains in 1 click via ! 🖼️
4.
Built-in Dynamic SVG Avatars & Image Placeholders () Say goodbye to broken external image placeholder URLs or slow Unsplash requests in your UI components!
Playground API now serves crisp, ultra-fast dynamic SVG avatar and thumbnail placeholders directly: 👤 Avatar: 🖼️ Thumbnail: 📘
5.
Full TypeScript Definitions & SDK Types () Stop manually writing TypeScript interfaces for your mock data!
Playground API now exposes native definitions: Download directly at or view live at .
Easily import , , , , , , and endpoint response wrappers straight into your TypeScript codebase. 💾
6.
Session Snapshot Export & Import (JSON) Want to share a specific mock bug state with a teammate or seed your Playwright/Cypress test runner with pre-configured data? 📤 : Export your entire session sandbox overlay as a clean, shareable snapshot file. 📥 : Import a saved JSON snapshot to instantly restore pre-set data states. 🏗️
7.
Decoupled Architecture ( & ) Under the hood, Playground API has been re-architected into a fully decoupled architecture: 🎨 Frontend Portal (): EJS template design system, interactive Try-It API Studio, GraphQL Explorer, and documentation UI. ⚙️ Backend API (): Lightweight, high-performance Node.js / Express 5 & Prisma ORM service powering session virtual merging. ⚛️ Updated React Example: Combining GraphQL, JWT Auth & Latency Simulation Here’s a full React example demonstrating how easily you can test JWT Login, GraphQL Queries, and Stateful Muta