Schema Viewer

JSON Schema as a tree. Required fields are marked on the field itself rather than left in the parent's `required` array — cross-referencing that list is the one job a renderer should do for you.

src/components/ui/schema-viewer.tsx

About

From the component's own source, where it was written.

A JSON Schema rendered as a navigable tree.

Required fields are marked on the field, not listed separately at the parent. JSON Schema puts required on the object as an array of names, which means reading a schema involves cross-referencing a list against the properties below it — the one job a renderer should do for you.

Constraints are shown inline: minLength, enum, pattern, format. A type of "string" is rarely the interesting part; that it must match a UUID pattern is.

oneOf and anyOf render as labelled alternatives rather than being flattened. A flattened union looks like an object with contradictory fields.

Install

npx astralyx-ui add schema-viewer

Usage

import { SchemaViewer } from '@/components/ui/schema-viewer'

<SchemaViewer schema={schema} name="User" />

Composer

Change the props and the source below follows.

Server-assigned.

Use id.

Props

open to depth

root name

tsx

<SchemaViewer schema={schema} name="User" defaultOpenDepth={2} />

Examples

A nested response schema

tsx

<SchemaViewer schema={schema} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`SchemaViewer`

Extends Omit<ComponentProps<'div'>, 'children'>.

Prop	Type	Default	Description
schema	JsonSchema	required	A plain JSON Schema object. No `$ref` resolution — dereference before passing it in.
name	string	'root'	—
defaultOpenDepth	number	2	—
requiredLabel	ReactNode	'required'	—
deprecatedLabel	ReactNode	'deprecated'	—

Functions

Function	Signature	Description
schemaConstraints	(schema: JsonSchema) => string[]	The short constraint list shown beside a field's type.

Types

`JsonSchema`

A JSON Schema rendered as a navigable tree.

Field	Type	Description
type?	string \| string[]	—
title?	string	—
description?	string	—
properties?	Record<string, JsonSchema>	—
items?	JsonSchema	—
required?	string[]	—
enum?	unknown[]	—
format?	string	—
pattern?	string	—
minLength?	number	—
maxLength?	number	—
minimum?	number	—
maximum?	number	—
default?	unknown	—
oneOf?	JsonSchema[]	Rendered as branches, never flattened — a flattened union looks like an object with contradictory fields.
anyOf?	JsonSchema[]	Rendered as branches, never flattened — a flattened union looks like an object with contradictory fields.
deprecated?	boolean	Struck through and badged.

Behaviour

Topic	Detail	Description
constraints	inline	`format`, `enum`, `pattern`, length and range shown beside the type. That a string must match a UUID pattern is the interesting part; "string" is not.