Skip to content

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

application/json example derived from schema

{
  "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

application/json

{
  "error": {
    "status": 400,
    "message": "Request body required"
  }
}
413413 — body exceeds 64 KB

application/json

{
  "error": {
    "status": 413,
    "message": "Request body too large",
    "details": {
      "maxSize": "64 KB"
    }
  }
}
429429 — rate limit exceeded (120/60s)

application/json

{
  "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

NameTypeDescription
_pagequery · integerPage number (1-based)
_limitquery · integerItems per page
_startquery · integerSlice start index (alternative to page-based)

ReturnsPost

Bearer token required

Response examples

200Paginated array of posts

application/json example derived from schema

[
  {
    "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)

application/json

{
  "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

NameTypeDescription
_fieldsquery · stringSparse fieldset — comma-separated fields to return. Leave blank for the full object.
_expandquery · stringExpand parent relations inline. Applies only when the resource has a matching parent (e.g. `user` on posts).
_embedquery · stringEmbed child collections. Applies only when the resource has a matching child (e.g. `comments` on posts).

ReturnsPost

Bearer token required

Response examples

200The post

application/json example derived from schema

{
  "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

application/json

{
  "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, single 204 response.

DELETE/posts/{id}

Delete post

Permanently remove a post. Returns deleted resource. Triggers `posts.deleted` webhook.

Parameters 1

NameTypeDescription
idrequiredpath · integerResource identifier

ReturnsPost

Bearer token required

Response examples

200Deleted post

application/json example derived from schema

{
  "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

application/json

{
  "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

NameTypeDescription
idrequiredpath · integerResource identifier

ReturnsPost

AcceptsPostInput

Bearer token required

Response examples

200Post replaced

application/json example derived from schema

{
  "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

application/json

{
  "error": {
    "status": 400,
    "message": "Request body required"
  }
}
404404 — resource not found

application/json

{
  "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

application/json example derived from schema

{
  "generatedAt": "2024-01-15T09:30:00Z",
  "scheme": "bearer",
  "totals": {}
}
401401 — missing or expired Bearer token

application/json

{
  "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

application/json example derived from schema

{
  "generatedAt": "2024-01-15T09:30:00Z",
  "scheme": "bearer",
  "totals": {}
}
401401 — missing or expired Bearer token

application/json

{
  "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

application/json example derived from schema

{
  "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

NameTypeDescription
petIdrequiredpath · integerID of pet to return

ReturnsPet

API key required

Response examples

200successful operation

application/json example derived from schema

{
  "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

application/json example derived from schema

{
  "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

application/json example derived from schema

[
  {
    "status": 200,
    "body": {}
  }
]
400400 — invalid input or malformed JSON

application/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

application/json example derived from schema

{
  "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

application/json

{
  "error": {
    "status": 400,
    "message": "Request body required"
  }
}
413413 — body exceeds 64 KB

application/json

{
  "error": {
    "status": 413,
    "message": "Request body too large",
    "details": {
      "maxSize": "64 KB"
    }
  }
}
429429 — rate limit exceeded (120/60s)

application/json

{
  "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
NameTypeDescription
_pagequery · integerPage number (1-based)
_limitquery · integerItems per page
_startquery · integerSlice start index (alternative to page-based)
_endquery · integerSlice end index (exclusive)
_sortquery · stringComma-separated fields to sort by
_orderquery · stringSort direction(s), comma-separated
qquery · stringFull-text search across all string/number/array fields. Leave blank to list everything.
_fieldsquery · stringSparse fieldset — comma-separated fields to return. Leave blank for the full object.
_expandquery · stringExpand parent relations inline. Applies only when the resource has a matching parent (e.g. `user` on posts).
_embedquery · stringEmbed child collections. Applies only when the resource has a matching child (e.g. `comments` on posts).
_delayquery · integerArtificial delay in ms (max 10000) — test loading states
_errorquery · integerForce error response (400–599) — test error handling

ReturnsPost

Response examples
200Paginated array of posts

application/json example derived from schema

[
  {
    "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)

application/json

{
  "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

application/json example derived from schema

{
  "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

application/json

{
  "error": {
    "status": 400,
    "message": "Request body required"
  }
}
413413 — body exceeds 64 KB

application/json

{
  "error": {
    "status": 413,
    "message": "Request body too large",
    "details": {
      "maxSize": "64 KB"
    }
  }
}
429429 — rate limit exceeded (120/60s)

application/json

{
  "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", "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

application/json example derived from schema

{
  "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

application/json

{
  "error": {
    "status": 400,
    "message": "Request body required"
  }
}
413413 — body exceeds 64 KB

application/json

{
  "error": {
    "status": 413,
    "message": "Request body too large",
    "details": {
      "maxSize": "64 KB"
    }
  }
}
429429 — rate limit exceeded (120/60s)

application/json

{
  "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.

Pet object

FieldTypeDescription
idinteger (int64)
namerequiredstring
categoryobject
photoUrlsrequiredstring[]
tagsobject[]
statusstringpet status in the store

Schema with simpler fields

Post object

Blog posts with rich content, tags, and engagement metrics

FieldTypeDescription
idinteger (int32)Unique post identifier
userIdinteger (int32)Author user ID
titlerequiredstringPost title
slugstringURL-friendly slug
bodyrequiredstringFull post content in plain text
excerptstringShort preview text
tagsstring[]Categorization tags
statusstringPublication status
viewsinteger (int32)Total view count
likesinteger (int32)Total like count
featuredbooleanWhether the post is featured
coverImagestring (uri)Cover image URL
readingTimeinteger (int32)Estimated reading time in minutes
createdAtstring (date-time)
updatedAtstring (date-time)

Missing schema (error state)

Shows the role="alert" fallback when a consumer points at a schema that doesn't exist.

Released under the MIT License.