SchemaViewer

Domain

Interactive JSON Schema tree viewer with type coloring, constraint display, and collapsible nodes.

Object schema

Preview
User
objectA user account object
id*string(uuid)read-onlyUnique identifier
email*string(email)Email address
name*string
minLength: 1maxLength: 100
roleenumUser role
"admin""editor""viewer"
createdAtstring(date-time)read-only
activebooleandefault: true
Code
const userSchema = {
  type: 'object',
  required: ['id', 'email', 'name'],
  properties: {
    id: { type: 'string', format: 'uuid', readOnly: true },
    email: { type: 'string', format: 'email' },
    name: { type: 'string', minLength: 1, maxLength: 100 },
    role: { type: 'string', enum: ['admin', 'editor', 'viewer'] },
    active: { type: 'boolean', default: true },
  },
};

<SchemaViewer schema={userSchema} title="User" />

Nested / array schema

Preview
PaginatedUsers
object
dataarray[object]
totalintegerTotal items
pageinteger
pageSizeinteger
Code
const listSchema = {
  type: 'object',
  properties: {
    data: { type: 'array', items: userSchema },
    total: { type: 'integer', description: 'Total items' },
    page: { type: 'integer' },
    pageSize: { type: 'integer' },
  },
};

<SchemaViewer schema={listSchema} title="PaginatedUsers" />
Sourcemodules/domains/api-doc/SchemaViewer.tsx