DEV Community

Cover image for Introducing the All-New Playground API: Stateful Mocking, Stripe Parity & 70+ Interactive Guides
Nilesh Kumar
Nilesh Kumar

Posted on

Introducing the All-New Playground API: Stateful Mocking, Stripe Parity & 70+ Interactive Guides

#typescript #api #webdev #testing

We have all been there. You are building a frontend feature in React, Next.js, Vue, or Flutter. The backend API is not ready yet, or you are running an automated Playwright test in CI.

You plug in a traditional fake API like JSONPlaceholder or DummyJSON. Everything looks fine until you need to test actual CRUD mutations:

// 1. You create a new post
await fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({ title: 'New Article', body: 'Content', userId: 1 })
});

// 2. You re-fetch your list...
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await res.json();
// āŒ Your created post is nowhere to be found!
Enter fullscreen mode Exit fullscreen mode

Static mocks return a fake id: 101, but they do not persist state. When you refresh the page or trigger an optimistic UI update, your data disappears.

Today, we are thrilled to announce a complete, ground-up redesign of Playground API ā€” the free, stateful mock REST & GraphQL sandbox built with per-session virtual mutation overlays.

šŸŒŸ What's New in the Reimagined UI?

1. Interactive "Try-It" Live Playground

You no longer have to open Postman or write boilerplate code just to test an endpoint. The new landing page features an embedded, full-featured interactive API playground. Execute queries, mutate resources, and observe real-time persistence with a single click.

# Test it right now in your terminal:
curl -X POST "https://playground.nileslabs.com/api/v1/posts" \
  -H "Content-Type: application/json" \
  -H "X-Playground-Identity: devto-test-session" \
  -d '{"title": "Dev.to Launch Post", "body": "Persists in your sandbox!", "user_id": 1}'
Enter fullscreen mode Exit fullscreen mode

Query with the same X-Playground-Identity header, and your post is right there waiting for you!

2. 70+ Dedicated Guides Across 15 Modular Categories

The documentation has been completely restructured into 15 focused categories with visual sequence diagrams, live execution consoles, and multi-language snippets (Fetch, Axios, cURL, Python, SDK):

  • Mock Commerce & Billing: Stripe-compatible Payment Intents, 3DS challenge modals, and deterministic test cards (simulate insufficient funds, expired cards, and card declines).
  • Virtual Communications: In-browser virtual email mailbox and SMS terminal to inspect transactional OTP codes and magic links in real time.
  • Real-Time WebSockets & SSE: Interactive echo bots, chat broadcasting, and real-time GraphQL subscriptions.
  • Chaos Engineering & Fault Injection: Dial in network latency from 1ms to 5000ms, simulate rate limits (429 Too Many Requests), or inject random chaos jitter.
  • JWT Auth & Refresh Loops: Simulated authentication loops with concurrency mutex locks and clock skew drift.

3. Official TypeScript SDK

Install our zero-dependency isomorphic SDK:

npm install playground-api
Enter fullscreen mode Exit fullscreen mode 
import { PlaygroundClient } from 'playground-api';

const client = new PlaygroundClient({
  baseUrl: 'https://playground.nileslabs.com/api/v1',
  credentials: 'include' // Automatic session cookie persistence
});

// Full type safety across all resources
const posts = await client.posts.list({ page: 1, limit: 10 });
const newPost = await client.posts.create({ title: 'Built with SDK', body: 'Awesome!', userId: 1 });
Enter fullscreen mode Exit fullscreen mode

4. Machine-Readable by Design (AI & Agent Ready)

Whether you are using Cursor, Windsurf, Copilot, ChatGPT, or Claude to build user interfaces, Playground API provides machine-readable specifications:

  • https://playground.nileslabs.com/llms.txt (llmstxt.org standard)
  • https://playground.nileslabs.com/openapi.json (OpenAPI 3.0 inline schema)
  • https://playground.nileslabs.com/.well-known/ai-plugin.json (Agent discovery manifest)

Check It Out Now!

The new UI is live, open, and requires no registration or API keys:

šŸ‘‰ Explore the new UI: https://playground.nileslabs.com

šŸ‘‰ Browse the Documentation: https://playground.nileslabs.com/docs

šŸ‘‰ GitHub Repo: https://github.com/nileslabs/playground_api

Give it a spin and drop your feedback in the comments below! What features would you like to see next?

Top comments (0)