A collapsible tree viewer for JSON Schema objects that shows type badges, required-field indicators, descriptions, and value constraints for each property.
import SchemaViewer from "@/components/ui/schema-viewer";
const exampleSchema = {
title: "User",
type: "object",
description: "A user account object",
required: ["id", "email"],
properties: {
id: {
type: "string",
format: "uuid",
description: "Unique identifier for the user",
example: "550e8400-e29b-41d4-a716-446655440000",
},
email: {
type: "string",
format: "email",
description: "The user's email address",
example: "jane@example.com",
},
age: {
type: "integer",
minimum: 0,
maximum: 120,
description: "Age in years",
},
role: {
type: "string",
enum: ["admin", "member", "guest"],
default: "member",
},
tags: {
type: "array",
items: {
type: "string",
},
description: "Labels associated with the user",
},
},
};
export default function SchemaViewerDemo() {
return (
<div className="w-full max-w-lg">
<SchemaViewer schema={exampleSchema} />
</div>
);
}