Schema display

Displays an endpoint’s method, path, parameters and nested request and response schemas.

Preview

POST/reviews
Request body
  • diffstringRequired

In action

Explore a request and response schema

POST/projects/{projectId}/reviews
Create a review for a supplied diff.
Parameters (1)
  • projectIdstringpathRequired

    Project to review.

Request body
  • diffstringRequired
  • optionsobject
    Properties of options
    • includeTestsboolean

      Include test files in the review.

Response body
  • idstringRequired
  • findingsarray
    Items of findings
    • findingobject
      Properties of finding
      • filestringRequired
      • linenumber
      • summarystring

When to use

Use it for

  • Endpoint documentation with parameter locations, required fields, nested objects and array item schemas.
  • Use maxDepth and maxNodes to bound rendering of large schemas; defaults are 6 levels and 200 properties.
  • Adapt an API specification to SchemaProperty records before rendering.

Avoid

  • Treating this view as an OpenAPI validator or request executor.
  • Embedding markup in endpoint paths; strings are deliberately rendered as text.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { SchemaDisplay } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/schema-display.

Copy the source

npx @noorddev/vlak-cli add schema-display

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/schema-display.json

Installs the same source through the shadcn CLI.

React

import { SchemaDisplay } from "@noorddev/vlak-react";

<SchemaDisplay method="POST" path="/projects/{projectId}/reviews" parameters={[{ name: "projectId", type: "string", required: true, location: "path" }]} requestBody={[{ name: "diff", type: "string", required: true }]} responseBody={[{ name: "id", type: "string", required: true }]} />

See the integration example to compose these components with your application's model and data.

Props

SchemaDisplay

Endpoint documentation with bounded, expandable object and array schemas.

PropTypeDefaultDescription
methodrequired"GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "HEAD" | "OPTIONS"
pathrequiredstring
descriptionReactNode
parametersSchemaParameter[]
requestBodySchemaProperty[]
responseBodySchemaProperty[]
maxDepthnumber6Bounds recursive schema rendering. Defaults to 6 levels and 200 properties.
maxNodesnumber200

Also accepts HTMLAttributes<HTMLElement>.

The ref reaches HTMLElement.

Keyboard

KeysDoes
TabTab reaches each native schema summary.
Enter, SpaceEnter or Space toggles parameters, bodies and nested properties.

Accessibility

  • Endpoint method and path name the article, while types, locations and required flags are readable text.
  • Recursive references, depth limits and omitted properties have explicit labels.
  • Paths and descriptions are escaped React text; no markup interpolation is used.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak
import "@noorddev/vlak/css";
<article class="rs-schema-display" aria-label="POST /reviews"><header class="rs-schema-display-header"><span class="rs-badge-muted">POST</span><code class="rs-schema-display-path">/reviews</code></header><div class="rs-schema-display-content"><details class="rs-disclosure" open><summary class="rs-disclosure-summary">Request body</summary><ul class="rs-schema-display-list"><li class="rs-schema-display-property"><div class="rs-schema-display-line"><code>diff</code><span class="rs-badge-muted">string</span><strong class="rs-schema-display-note">Required</strong></div></li></ul></details></div></article>

Classes

.rs-schema-display.rs-schema-display-header.rs-schema-display-path.rs-schema-display-content.rs-schema-display-description.rs-schema-display-list.rs-schema-display-property.rs-schema-display-line.rs-schema-display-note

Depends on

BadgeCollapsible

Use elsewhere

Markdown referenceRegistry JSONSourceAI integration guide
ChatConversationResponseResponse markdownMessage composerResponse actionsResponse branchResponse editorConversation exportAttachmentsSuggestionsModel selectorContext usageCheckpointReasoningThought stepsPlanTaskWork queueTool callConfirmationInline citationSourcesShimmerWidgetGenerated imageOpen in chatWidget patternsHighlighted codeAgentFile treeArtifactSnippetCommitEnvironment variablesPackage infoTest resultsStack traceTerminalSandboxWeb previewJsx previewAudio playerMic selectorSpeech inputTranscriptionVoice selectorPersonaWorkflow canvas