Playground API
DocsStatsBlogStudio
Documentation Tree
Technical BlogFeature Deep Dives
  • Introduction
  • Quickstart
    5 min
  • How It Works
  • Recipes & Cookbooks
  • Platform Comparisons
  • Real-World Showcase
  • Interactive Studio
    Studio
  • GraphiQL IDE
    IDE
  • Session Quotas & Activity
  • Network Chaos Simulator
  • Atomic Sandbox Reset
  • Overview & Models
    Hub
  • Users Resource
  • Posts Resource
  • Comments Resource
  • Todos Resource
  • Custom Collections
    Custom
  • Multipart File Uploads
    Upload
  • Dynamic SVG Avatars
    SVG
  • Image Thumbnails
    CDN
  • Relational Filtering
  • Full-Text Search
  • Dynamic Sorting
  • Offset Pagination
  • Cursor Pagination
    Scroll
  • CSV & Excel Export & Import
    IO
  • Custom Collections
    CRUD
  • Overview & Architecture
    Hub
  • JWT Auth Flow
  • Refresh Token Rotation
    Mutex
  • RBAC Permission Matrix
    Roles
  • Expiry Simulation
  • Clock Skew Drift
  • Password Recovery Loop
  • Dual-Mode Sandboxing
  • GraphiQL IDE
    IDE
  • Relational Queries
  • Stateful Mutations
  • Realtime Subscriptions
  • Overview & Flowcharts
    Hub
  • Hosted Checkout
    Stripe
  • Payment Intents API
  • 3DS Challenge Modal
    Modal
  • Customers Vault
  • Charges & Refunds
  • Test Cards Catalog
  • Overview & Channels
    Hub
  • Virtual Email Mailbox
    Mailtrap
  • Virtual SMS Terminal
    Phone
  • In-App Notifications
  • Message Dispatcher
  • Realtime Studio
    Studio
  • Native WebSocket (/ws)
  • Socket.io Gateway
  • Presence & Echo Bot
  • Server-Sent Events (SSE)
    SSE
  • Analytics Telemetry
  • Webhook Subscriptions
  • HMAC SHA-256 Signatures
  • Delivery Logs
  • Manual Retry Simulator
  • Network Latency Delay
  • HTTP Status Codes
  • Rate-Limit Simulator
    429
  • Flaky Network & Jitter
    Chaos
  • Session Quotas & Activity
  • JSON Snapshots
    JSON
  • Headless CI/CD Testing
    CI
  • Mobile QR Code Sync
  • System Metrics & Health
  • Atomic Sandbox Reset
  • Official TypeScript SDK
  • Multi-Language Generators
  • DevTools Extension
  • OpenAPI 3.1 Spec
    JSON
  • Postman Collection v2.1
  • Bruno Collection
  • Insomnia Workspace
  • TypeScript .d.ts
    .d.ts
  • AI Prompt Rules
    Rules
  • Context Index (llms.txt)
  • Full Schema (llms-full.txt)
  • Manifest (product.json)
  • All Feature Articles
    Blog
  • React CRUD Without Backend
    Deep Dive
  • Why Static APIs Fail
  • Mocking Stateful Auth
  • WebSockets & SSE Guide
Technical Blog
Articles

In-depth articles explaining stateful mock APIs, WebSockets, payments, and frontend resilience.

Read Articles
PreviousAnalytics Telemetry
NextHMAC SHA-256 Signatures
Outgoing Webhooks

Webhook Subscriptions & Event Routing

Register HTTP callback URLs to receive real-time JSON webhooks whenever resources change in your session. Filter by specific entity events (posts.created, payment_intent.succeeded) or category-level wildcards (posts.*).

Webhook Dispatcher & Exponential Backoff Retry Engine
Webhook Lifecycle
Playground API Webhook Dispatcher and Exponential Backoff Retry Engine Workflow Diagram
Click to expand full architecture
Event-driven delivery loop: HMAC-SHA256 signature signing, asynchronous queuing, and exponential jitter retries.Interactive High-Resolution Flowchart
1HMAC SHA-256

Event Trigger & Signing

Sandbox mutations generate event payloads signed with HMAC-SHA256 secrets.

2HTTP POST

Asynchronous Queue Delivery

Dispatches HTTP POST to destination URLs with X-Playground-Signature headers.

3Fault Tolerant

Exponential Backoff Retry

5xx errors and timeouts trigger automated retries (attempts 1-3 with jitter).

Interactive Webhook Workbench

Select a preset subscription configuration or query existing session webhooks:

Order & Payment Sync

Subscribes to posts.* and payment_intent.succeeded with custom secret.

POST
response.json
1
{
2
// Click "Send" above to execute this request against the live server.
3
}

Supported Event Catalog

The Playground API publishes standardized events across all core domain entities. Subscriptions can target exact event strings or category-level wildcard prefixes:

Content & Post Events

  • posts.createdTriggered on POST /posts
  • posts.updatedTriggered on PUT/PATCH /posts/:id
  • posts.deletedTriggered on DELETE /posts/:id

Payments & Financial Events

  • payment_intent.createdIntent initialized
  • payment_intent.succeededPayment captured
  • payment_intent.payment_failedPayment declined

User & Auth Events

  • auth.loginJWT issued for user
  • auth.registeredNew user account created
  • users.updatedProfile attribute mutation

Wildcards & Synthetic Events

  • *Catches every event
  • posts.*All post mutations
  • test.pingAd-hoc synthetic ping

Standard Webhook Envelope & Handler

Dispatched requests carry a standard JSON body and diagnostic HTTP headers (X-Playground-Signature, X-Playground-Event, X-Playground-Delivery):

Outgoing JSON Envelope
1
{
2
"id": "del_7f8c9b10-21a4-4a5e-88c9-9430e527d2c1",
3
"event": "posts.created",
4
"timestamp": "2026-09-29T12:00:00.000Z",
5
"data": {
6
"id": 101,
7
"title": "Real-time Webhook Architectures",
8
"body": "Demonstration of zero-infrastructure webhook dispatching...",
9
"userId": 1
10
}
11
}
TypeScript Receiver Route
1
// Next.js App Router / Express Webhook Receiver
2
export async function POST(request: Request) {
3
const signature = request.headers.get('X-Playground-Signature');
4
const event = request.headers.get('X-Playground-Event');
5
const deliveryId = request.headers.get('X-Playground-Delivery');
6
7
const rawBody = await request.text();
8
const payload = JSON.parse(rawBody);
9
10
console.log([Webhook ${deliveryId}] Received ${event}:, payload.data);
11
12
// Return standard 200 OK to acknowledge receipt
13
return new Response(JSON.stringify({ received: true }), {
14
status: 200,
15
headers: { 'Content-Type': 'application/json' },
16
});
17
}