Playground
One page that exercises every rendering path <OpenApiEndpoint> and <OpenApiSchema> take. Open it while iterating on styles, scroll top to bottom, look for what looks wrong in either light or dark theme. Nothing unique here - it recombines embeds you can already put in any markdown file.
Columns layout - default
The sticky Try-It aside pattern, shipped on every spec page.
Standard POST with body and bearer auth
A dense case: summary, description, multiple params across in values, a JSON request body with several field types, multiple responses, a Try-It panel.
POST/posts
Create post
Create a new post. Fields `id`, `createdAt`, `updatedAt` are auto-generated. Triggers `posts.created` webhook.
ReturnsPost
AcceptsPostInput
Bearer token required
Response examples
201Post created
{
"id": 1,
"userId": 1,
"title": "Performance Optimization Tips",
"slug": "web-security-fundamentals",
"body": "Fusce commodo aliquam arcu. Nam commodo suscipit quam. Quisque id odio.\n\nCurabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra.",
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliq...",
"tags": [
"ux"
],
"status": "published",
"views": 16848,
"likes": 28,
"featured": false,
"coverImage": "https://picsum.photos/seed/1/800/400",
"readingTime": 7,
"createdAt": "2026-01-21T19:36:04.116Z",
"updatedAt": "2026-01-21T19:36:04.116Z"
}400400 — invalid input or malformed JSON
{
"error": {
"status": 400,
"message": "Request body required"
}
}413413 — body exceeds 64 KB
{
"error": {
"status": 413,
"message": "Request body too large",
"details": {
"maxSize": "64 KB"
}
}
}429429 — rate limit exceeded (120/60s)
{
"error": {
"status": 429,
"message": "Too many requests",
"details": {
"retryAfter": 45
}
}
}GET with query parameters
Pagination and filter params - exercises the parameter table and its visibility limit (Show all N parameters toggle when > 3).
GET/posts
List all posts
Paginated list of posts. Supports filtering, range operators (`_gte`, `_lte`, `_gt`, `_lt`, `_ne`, `_like`), full-text search, sorting, field selection, and relation expansion.
Parameters 12
| Name | Type | Description |
|---|---|---|
_page | query · integer | Page number (1-based) |
_limit | query · integer | Items per page |
_start | query · integer | Slice start index (alternative to page-based) |
ReturnsPost
Bearer token required
Response examples
200Paginated array of posts
[
{
"id": 1,
"userId": 1,
"title": "Performance Optimization Tips",
"slug": "web-security-fundamentals",
"body": "Fusce commodo aliquam arcu. Nam commodo suscipit quam. Quisque id odio.\n\nCurabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra.",
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliq...",
"tags": [
"ux"
],
"status": "published",
"views": 16848,
"likes": 28,
"featured": false,
"coverImage": "https://picsum.photos/seed/1/800/400",
"readingTime": 7,
"createdAt": "2026-01-21T19:36:04.116Z",
"updatedAt": "2026-01-21T19:36:04.116Z"
}
]429429 — rate limit exceeded (120/60s)
{
"error": {
"status": 429,
"message": "Too many requests",
"details": {
"retryAfter": 45
}
}
}GET with path parameter
Minimal GET, one required path param, cross-link Returns to the component schema.
GET/posts/{id}
Get post by ID
Retrieve a single post. Supports ETag conditional requests via `If-None-Match`.
Parameters 4
| Name | Type | Description |
|---|---|---|
_fields | query · string | Sparse fieldset — comma-separated fields to return. Leave blank for the full object. |
_expand | query · string | Expand parent relations inline. Applies only when the resource has a matching parent (e.g. `user` on posts). |
_embed | query · string | Embed child collections. Applies only when the resource has a matching child (e.g. `comments` on posts). |
ReturnsPost
Bearer token required
Response examples
200The post
{
"id": 1,
"userId": 1,
"title": "Performance Optimization Tips",
"slug": "web-security-fundamentals",
"body": "Fusce commodo aliquam arcu. Nam commodo suscipit quam. Quisque id odio.\n\nCurabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra.",
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliq...",
"tags": [
"ux"
],
"status": "published",
"views": 16848,
"likes": 28,
"featured": false,
"coverImage": "https://picsum.photos/seed/1/800/400",
"readingTime": 7,
"createdAt": "2026-01-21T19:36:04.116Z",
"updatedAt": "2026-01-21T19:36:04.116Z"
}404404 — resource not found
{
"error": {
"status": 404,
"message": "users #999 not found"
}
}DELETE minimal
Destructive method - method-pill colour must read as red-family. Single path param, no body, 200 and 404 responses.
DELETE/posts/{id}
Delete post
Permanently remove a post. Returns deleted resource. Triggers `posts.deleted` webhook.
Parameters 1
| Name | Type | Description |
|---|---|---|
idrequired | path · integer | Resource identifier |
ReturnsPost
Bearer token required
Response examples
200Deleted post
{
"id": 1,
"userId": 1,
"title": "Performance Optimization Tips",
"slug": "web-security-fundamentals",
"body": "Fusce commodo aliquam arcu. Nam commodo suscipit quam. Quisque id odio.\n\nCurabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra.",
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliq...",
"tags": [
"ux"
],
"status": "published",
"views": 16848,
"likes": 28,
"featured": false,
"coverImage": "https://picsum.photos/seed/1/800/400",
"readingTime": 7,
"createdAt": "2026-01-21T19:36:04.116Z",
"updatedAt": "2026-01-21T19:36:04.116Z"
}404404 — resource not found
{
"error": {
"status": 404,
"message": "users #999 not found"
}
}Deprecated operation
Method pill + the deprecated badge should both render. replacePost is marked deprecated: true in the spec in favour of the PATCH variant.
PUT/posts/{id}deprecated
Replace post
Full replacement. All mutable fields overwritten. Triggers `posts.updated` webhook.
Parameters 1
| Name | Type | Description |
|---|---|---|
idrequired | path · integer | Resource identifier |
ReturnsPost
AcceptsPostInput
Bearer token required
Response examples
200Post replaced
{
"id": 1,
"userId": 1,
"title": "Performance Optimization Tips",
"slug": "web-security-fundamentals",
"body": "Fusce commodo aliquam arcu. Nam commodo suscipit quam. Quisque id odio.\n\nCurabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra.",
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliq...",
"tags": [
"ux"
],
"status": "published",
"views": 16848,
"likes": 28,
"featured": false,
"coverImage": "https://picsum.photos/seed/1/800/400",
"readingTime": 7,
"createdAt": "2026-01-21T19:36:04.116Z",
"updatedAt": "2026-01-21T19:36:04.116Z"
}400400 — invalid input or malformed JSON
{
"error": {
"status": 400,
"message": "Request body required"
}
}404404 — resource not found
{
"error": {
"status": 404,
"message": "users #999 not found"
}
}HTTP Basic auth (multi-requirement OR)
/admin/report accepts either bearerAuth OR basicAuth. Today the plugin renders the first requirement - this is where a future Slice 5 (multi-security picker) will plug in. For now it exercises the basic auth input path in the Try-It panel if the consumer overrides auth="basic".
GET/admin/report
Admin aggregate report
Read-only snapshot of record counts, active webhooks, and token count. Accepts either Bearer or Basic — the auth block in docs should show both alternatives.
ReturnsAdminReport
Bearer token required
Response examples
200Report payload
{
"generatedAt": "2024-01-15T09:30:00Z",
"scheme": "bearer",
"totals": {}
}401401 — missing or expired Bearer token
{
"error": {
"status": 401,
"message": "Authentication required"
}
}Basic auth forced by prop
Same endpoint, auth override → proves the Basic username:password input renders.
GET/admin/report
Admin aggregate report
Read-only snapshot of record counts, active webhooks, and token count. Accepts either Bearer or Basic — the auth block in docs should show both alternatives.
ReturnsAdminReport
Basic auth required
Response examples
200Report payload
{
"generatedAt": "2024-01-15T09:30:00Z",
"scheme": "bearer",
"totals": {}
}401401 — missing or expired Bearer token
{
"error": {
"status": 401,
"message": "Authentication required"
}
}OAuth2 (from Petstore)
Auth scheme selection across specs. Petstore uses petstore_auth (OAuth2 with scopes) - the auth panel must render the flow URLs and scope list.
POST/pet
Add a new pet to the store
Add a new pet to the store.
ReturnsPet
AcceptsPet
Bearer token required
Response examples
200Successful operation
{
"name": "doggie",
"photoUrls": [
"string"
]
}API key in header (from Petstore)
The same spec also ships api_key as an apiKey scheme in header. getPetById uses it alongside OAuth2 - the plugin picks the first requirement.
GET/pet/{petId}
Find pet by ID
Returns a single pet.
Parameters 1
| Name | Type | Description |
|---|---|---|
petIdrequired | path · integer | ID of pet to return |
ReturnsPet
API key required
Response examples
200successful operation
{
"name": "doggie",
"photoUrls": [
"string"
]
}Webhook (incoming)
OpenAPI 3.1 top-level webhook. Today it renders with the generic method pill + the webhook badge; design doc plans for an INCOMING WEBHOOK kicker in a later iteration.
POSTposts.createdwebhook
Post created
Fired when a post is created.
AcceptsWebhookPayload
Bearer token required
No parameters, no body
Proves the plugin hides the Parameters / Request body sections entirely when absent (no empty "None" rows).
GET/health
Health check
ReturnsHealthCheck
Response examples
200Healthy
{
"status": "ok",
"uptime": 0,
"timestamp": "2024-01-15T09:30:00Z"
}Long path + many params
Stress test for title wrap and params limit. The batchOperations endpoint is the widest one in the mock.
POST/batch
Batch operations
Up to 20 operations in one request, executed sequentially.
ReturnsBatchResult
AcceptsBatchOperation
Response examples
200Results
[
{
"status": 200,
"body": {}
}
]400400 — invalid input or malformed JSON
{
"error": {
"status": 400,
"message": "Request body required"
}
}Stacked layout
layout="stacked" keeps everything inside one vertical card - the embedding-in-prose shape. Two matching examples below mirror the columns section above for A/B comparison.
Stacked - standard POST
POST/posts
Create post
Create a new post. Fields `id`, `createdAt`, `updatedAt` are auto-generated. Triggers `posts.created` webhook.
ReturnsPost
AcceptsPostInput
Response examples
201Post created
{
"id": 1,
"userId": 1,
"title": "Performance Optimization Tips",
"slug": "web-security-fundamentals",
"body": "Fusce commodo aliquam arcu. Nam commodo suscipit quam. Quisque id odio.\n\nCurabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra.",
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliq...",
"tags": [
"ux"
],
"status": "published",
"views": 16848,
"likes": 28,
"featured": false,
"coverImage": "https://picsum.photos/seed/1/800/400",
"readingTime": 7,
"createdAt": "2026-01-21T19:36:04.116Z",
"updatedAt": "2026-01-21T19:36:04.116Z"
}400400 — invalid input or malformed JSON
{
"error": {
"status": 400,
"message": "Request body required"
}
}413413 — body exceeds 64 KB
{
"error": {
"status": 413,
"message": "Request body too large",
"details": {
"maxSize": "64 KB"
}
}
}429429 — rate limit exceeded (120/60s)
{
"error": {
"status": 429,
"message": "Too many requests",
"details": {
"retryAfter": 45
}
}
}Stacked - GET with query parameters
GET/posts
List all posts
Paginated list of posts. Supports filtering, range operators (`_gte`, `_lte`, `_gt`, `_lt`, `_ne`, `_like`), full-text search, sorting, field selection, and relation expansion.
Parameters 12
| Name | Type | Description |
|---|---|---|
_page | query · integer | Page number (1-based) |
_limit | query · integer | Items per page |
_start | query · integer | Slice start index (alternative to page-based) |
_end | query · integer | Slice end index (exclusive) |
_sort | query · string | Comma-separated fields to sort by |
_order | query · string | Sort direction(s), comma-separated |
q | query · string | Full-text search across all string/number/array fields. Leave blank to list everything. |
_fields | query · string | Sparse fieldset — comma-separated fields to return. Leave blank for the full object. |
_expand | query · string | Expand parent relations inline. Applies only when the resource has a matching parent (e.g. `user` on posts). |
_embed | query · string | Embed child collections. Applies only when the resource has a matching child (e.g. `comments` on posts). |
_delay | query · integer | Artificial delay in ms (max 10000) — test loading states |
_error | query · integer | Force error response (400–599) — test error handling |
ReturnsPost
Response examples
200Paginated array of posts
[
{
"id": 1,
"userId": 1,
"title": "Performance Optimization Tips",
"slug": "web-security-fundamentals",
"body": "Fusce commodo aliquam arcu. Nam commodo suscipit quam. Quisque id odio.\n\nCurabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra.",
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliq...",
"tags": [
"ux"
],
"status": "published",
"views": 16848,
"likes": 28,
"featured": false,
"coverImage": "https://picsum.photos/seed/1/800/400",
"readingTime": 7,
"createdAt": "2026-01-21T19:36:04.116Z",
"updatedAt": "2026-01-21T19:36:04.116Z"
}
]429429 — rate limit exceeded (120/60s)
{
"error": {
"status": 429,
"message": "Too many requests",
"details": {
"retryAfter": 45
}
}
}Stacked with body inputs
bodyInputs decomposes the JSON body schema into one input per top-level property (required first). Exercises the jsonFields path and the params toggle.
POST/posts
Create post
Create a new post. Fields `id`, `createdAt`, `updatedAt` are auto-generated. Triggers `posts.created` webhook.
ReturnsPost
AcceptsPostInput
Response examples
201Post created
{
"id": 1,
"userId": 1,
"title": "Performance Optimization Tips",
"slug": "web-security-fundamentals",
"body": "Fusce commodo aliquam arcu. Nam commodo suscipit quam. Quisque id odio.\n\nCurabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra.",
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliq...",
"tags": [
"ux"
],
"status": "published",
"views": 16848,
"likes": 28,
"featured": false,
"coverImage": "https://picsum.photos/seed/1/800/400",
"readingTime": 7,
"createdAt": "2026-01-21T19:36:04.116Z",
"updatedAt": "2026-01-21T19:36:04.116Z"
}400400 — invalid input or malformed JSON
{
"error": {
"status": 400,
"message": "Request body required"
}
}413413 — body exceeds 64 KB
{
"error": {
"status": 413,
"message": "Request body too large",
"details": {
"maxSize": "64 KB"
}
}
}429429 — rate limit exceeded (120/60s)
{
"error": {
"status": 429,
"message": "Too many requests",
"details": {
"retryAfter": 45
}
}
}Show / hide matrix
Explicit show arrays - the short shapes authors typically use inside prose.
show=["summary"] - tiniest shape
Method pill, path, and summary only. No try, no snippets, no schema. For landing-page callouts.
GET/pet/{petId}
Find pet by ID
show=["summary", "try"] - demo shape
What the landing page's "See it live" uses - pill + path + Send button, nothing else.
GET/pet/{petId}
Find pet by ID
show=["summary", "description", "params", "request", "response"] - docs-only shape
Documentation without the interactive panel - use when the surrounding markdown already explains how to call the API.
POST/posts
Create post
Create a new post. Fields `id`, `createdAt`, `updatedAt` are auto-generated. Triggers `posts.created` webhook.
ReturnsPost
AcceptsPostInput
Response examples
201Post created
{
"id": 1,
"userId": 1,
"title": "Performance Optimization Tips",
"slug": "web-security-fundamentals",
"body": "Fusce commodo aliquam arcu. Nam commodo suscipit quam. Quisque id odio.\n\nCurabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra.",
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliq...",
"tags": [
"ux"
],
"status": "published",
"views": 16848,
"likes": 28,
"featured": false,
"coverImage": "https://picsum.photos/seed/1/800/400",
"readingTime": 7,
"createdAt": "2026-01-21T19:36:04.116Z",
"updatedAt": "2026-01-21T19:36:04.116Z"
}400400 — invalid input or malformed JSON
{
"error": {
"status": 400,
"message": "Request body required"
}
}413413 — body exceeds 64 KB
{
"error": {
"status": 413,
"message": "Request body too large",
"details": {
"maxSize": "64 KB"
}
}
}429429 — rate limit exceeded (120/60s)
{
"error": {
"status": 429,
"message": "Too many requests",
"details": {
"retryAfter": 45
}
}
}Schemas
Standalone <OpenApiSchema> embeds - the component-schema page content, usable inline.
Schema with nested $refs
Petstore Pet references Category and Tag - the type column should link to each.
Schema with simpler fields
Post object
Blog posts with rich content, tags, and engagement metrics
| Field | Type | Description |
|---|---|---|
id | integer (int32) | Unique post identifier |
userId | integer (int32) | Author user ID |
titlerequired | string | Post title |
slug | string | URL-friendly slug |
bodyrequired | string | Full post content in plain text |
excerpt | string | Short preview text |
tags | string[] | Categorization tags |
status | string | Publication status |
views | integer (int32) | Total view count |
likes | integer (int32) | Total like count |
featured | boolean | Whether the post is featured |
coverImage | string (uri) | Cover image URL |
readingTime | integer (int32) | Estimated reading time in minutes |
createdAt | string (date-time) | |
updatedAt | string (date-time) |
Missing schema (error state)
Shows the role="alert" fallback when a consumer points at a schema that doesn't exist.
Unknown schema: SchemaThatDoesNotExist is not registered on spec mock.