Official SDK v1.0.0Zero DependenciesIsomorphic (Browser + Node)
Official TypeScript SDK (`playground-api`)
Lightweight, zero-dependency, isomorphic client library for Playground API. Enjoy 100% type safety, autocomplete, automatic session isolation, simulation controls, and sub-resources out of the box.
npm install playground-apiInteractive SDK Runner
Test Playground API SDK calls directly in your browser with real live responses.
SDK Code SnippetFetch paginated posts, create a sandboxed post, and fetch post comments.
Live Response Output
Click "Run in Browser" above to execute snippet
Framework Quickstarts
Next.js 15 App Router (Server Component)
Fetch data directly on the server with zero client overhead:
1
import { PlaygroundClient } from 'playground-api';
2
3
const api = new PlaygroundClient({
4
apiUrl: process.env.PLAYGROUND_API_URL || '/api/v1'
5
});
6
7
export default async function PostsPage() {
8
const { data: posts } = await api.posts.list({ limit: 10 });
9
10
return (
11
<ul>
12
{posts.map(post => (
13
<li key={post.id}>{post.title}</li>
14
))}
15
</ul>
16
);
17
}
React Client Hook (`usePlaygroundApi`)
Use with React state, SWR, or TanStack Query:
1
'use client';
2
import { useEffect, useState } from 'react';
3
import { PlaygroundClient, Post } from 'playground-api';
4
5
const api = new PlaygroundClient({ apiUrl: '/api/v1' });
6
7
export function PostList() {
8
const [posts, setPosts] = useState<Post[]>([]);
9
10
useEffect(() => {
11
api.posts.list({ limit: 5 }).then(res => setPosts(res.data));
12
}, []);
13
14
return <div>Loaded {posts.length} posts</div>;
15
}
Vue 3 (Composition API & Pinia)
Reactive data fetching in Vue 3 script setup:
1
<script setup lang="ts">
2
import { ref, onMounted } from 'vue';
3
import { PlaygroundClient, Post } from 'playground-api';
4
5
const api = new PlaygroundClient({ apiUrl: '/api/v1' });
6
const posts = ref<Post[]>([]);
7
8
onMounted(async () => {
9
const res = await api.posts.list({ limit: 5 });
10
posts.value = res.data;
11
});
12
</script>
Node.js Proxy / Microservice
Forward session identity headers across microservices:
1
import { PlaygroundClient } from 'playground-api';
2
3
const api = new PlaygroundClient({
4
apiUrl: '/api/v1',
5
identityToken: '550e8400-e29b-41d4-a716-446655440000',
6
defaultHeaders: { 'X-Custom-Header': 'Service-A' }
7
});
8
9
const user = await api.users.get(1);
Client Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
| apiUrl | string | 'http://localhost:3000/api/v1' | Base API URL for all REST and GraphQL requests. |
| identityToken | string | undefined | Explicit session UUID (auto-sent as X-Playground-Identity in Node/SSR). |
| delay | number | undefined | Global artificial delay in milliseconds (X-Simulate-Delay). |
| chaos | number | undefined | Simulate random dropouts / 500 errors rate (0.0 to 1.0). |
| defaultHeaders | Record<string, string> | {} | Custom HTTP headers included on every outgoing request. |