SchemaDisplay

Read an API endpoint or a JSON Schema: method badge, path with highlighted parameters, and request and response schemas as an expandable property tree.

CoreData Display@gaudi/design-system/core/SchemaDisplayView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { SchemaDisplay } from '@gaudi/design-system/core/SchemaDisplay';

Usage

import { SchemaDisplay } from '@gaudi/design-system';
<SchemaDisplay  method='GET'  path='/posts/{slug}/comments'  parameters={[{ name: 'slug', in: 'path', type: 'string' }, { name: 'limit', in: 'query', type: 'integer' }]}  responseBody={commentsSchema}/>

Examples

Playground

Storybook

API

10 props

Accessibility

Sections are real headings at headingLevel. Nested objects are disclosure buttons with aria-expanded; required is written out, never colour alone, and parameter highlights keep their braces.

CodeBlockCodeBlock renders syntax-highlighted source with an optional header, copy button, line numbers, highlighted and focused lines, diffs, folding and line selection.10 examples DataTableDataTable is a TanStack table with a compact data anatomy: shared headers that preserve label casing, hairline rows, synced column and row hover, a tinted wash for selected rows, and declarative column alignment, width and pinning. It adds search with a live count, single or multi-column sorting, selection with bulk actions, expandable rows, row action menus, pinned rows, grouped bands, a totals footer, sticky headers, automatic virtualization, pagination or load-more, CSV export, and loading, refreshing, empty and error states. Sorting, selection, expansion and pinning work controlled or uncontrolled.19 examples FilterBarA collection toolbar: search with a live result count, a Filters popover of facets with counts, and removable Field: Value chips. The host owns matching and persistence.6 examples ItemFlexible rows for people, settings, integrations, navigation and activity lists, composed from media, text, actions and optional header and footer rows.11 examples TerminalTerminal renders mac-style shell examples with typed commands and structured output lines.TimelineDisplay dated activity and milestones with readable descriptions and optional actions.6 examples