184 Components
JSON Schema Form Validator
CardsVSCode Problems tab and Monaco inspired split editor with real-time JSON syntax parsing, schema constraint validation diagnostics, one-click formatting/prettify, and clipboard payload copying.
JSON Schema Validator
Validating against schema UserConfigSchema.json
Raw JSON Input
Diagnostics (0) Schema Valid
All properties conform to schema.Ready for network dispatch or storage.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/json-schema-form-validator.json"
Props
TypeScript props supported by <JsonSchemaFormValidator />.
| Prop | Type | Default | Description |
|---|---|---|---|
| initialJson | string | — | Default starting JSON document text. |
| schemaName | string | "UserConfigSchema.json" | JSON Schema reference file name. |
Key Features
- Live JSON parsing with error boundary catching.
- Diagnostics panel with line number and property violation markers.
- Prettify and format button for instant JSON indentation.
- One-click payload copying.
Keyboard & Accessibility
- High-contrast error callout boxes with clear semantic icons.
- Full keyboard operable textarea and action buttons.