Schema Viewer

Component 4

About

A collapsible tree viewer for JSON Schema objects that shows type badges, required-field indicators, descriptions, and value constraints for each property.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Schema Viewer to your project and fits it to your theme.

Code

How Schema Viewer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}