JSON Schema Builder

A modern, React-based visual JSON Schema editor for creating and manipulating JSON Schema definitions with an intuitive interface.

Try online: https://json.ophir.dev

Features

• Visual Schema Editor: Design your JSON Schema through an intuitive interface without writing raw JSON
• Real-time JSON Preview: See your schema in JSON format as you build it visually
• Schema Inference: Generate schemas automatically from existing JSON data
• JSON Validation: Test JSON data against your schema with detailed validation feedback
• Responsive Design: Fully responsive interface that works on desktop and mobile devices
• 🆕 JSON Schema Draft 2020-12 Support: Full support for the latest JSON Schema specification
• 🆕 Multi-Draft Support: Switch between Draft-07, 2019-09, and 2020-12
• 🆕 Advanced Keywords: Visual editors for conditional validation, composition, dynamic references, and more
• 🌍 Internationalization: Support for English, Hebrew, German, French, and Russian

JSON Schema Draft 2020-12 Support

This fork includes complete support for JSON Schema Draft 2020-12, the latest specification.

New 2020-12 Features

✨ Tuple Validation with prefixItems

Define schemas for specific array positions:

{
  "type": "array",
  "prefixItems": [
    { "type": "string" },
    { "type": "number" },
    { "type": "boolean" }
  ],
  "items": false
}

✨ Dynamic References ($dynamicRef & $dynamicAnchor)

Create extensible schemas with dynamic composition:

{
  "$dynamicAnchor": "node",
  "type": "object",
  "properties": {
    "children": {
      "type": "array",
      "items": { "$dynamicRef": "#node" }
    }
  }
}

✨ Enhanced unevaluatedProperties

Works correctly with schema composition (allOf/anyOf/oneOf):

{
  "properties": { "name": { "type": "string" } },
  "allOf": [
    { "properties": { "age": { "type": "number" } } }
  ],
  "unevaluatedProperties": false
}

✨ Conditional Validation (if/then/else)

{
  "if": { "properties": { "country": { "const": "USA" } } },
  "then": { "properties": { "postal_code": { "pattern": "^[0-9]{5}$" } } },
  "else": { "properties": { "postal_code": { "minLength": 4 } } }
}

Supported Drafts

• Draft-07 (2018) - Stable baseline with if/then/else
• Draft 2019-09 - Adds dependentSchemas and basic unevaluated support
• Draft 2020-12 (Latest) - Full feature set including prefixItems and dynamic references

Switch between drafts using the selector in the editor header.

Migration Guides

• 📄 English Migration Guide
• 📄 מדריך מעבר בעברית (Hebrew Migration Guide)

Visual Editors for Advanced Keywords

• Conditional Validation - if/then/else editor
• Schema Composition - allOf/anyOf/oneOf/not editor
• Tuple Validation - prefixItems editor (2020-12)
• Dynamic References - $dynamicRef/$dynamicAnchor editor (2020-12)
• Dependent Schemas - Property-dependent validation (2019-09+)
• Unevaluated Properties/Items - Advanced validation control (2019-09+)

All advanced editors support both Visual and JSON editing modes.

Getting Started

Installing

npm install jsonjoy-builder

Also install react if you haven't done so yet.

Then use like this:

import "jsonjoy-builder/styles.css";
import { type JSONSchema, SchemaVisualEditor } from "jsonjoy-builder";
import { useState } from "react";

export function App() {
  const [schema, setSchema] = useState<JSONSchema>({});
  return (
    <div>
      <h1>JSONJoy Builder</h1>
      <SchemaVisualEditor schema={schema} onChange={setSchema}/>
    </div>
  );
}

Styling

To style the component, add custom CSS. For basic styling, there are some CSS custom properties ("variables) you can set:

.jsonjoy {
  --jsonjoy-background: #f8fafc;
  --jsonjoy-foreground: #020817;
  --jsonjoy-card: #fff;
  --jsonjoy-card-foreground: #020817;
  --jsonjoy-popover: #fff;
  --jsonjoy-popover-foreground: #020817;
  --jsonjoy-primary: #0080ff;
  --jsonjoy-primary-foreground: #f8fafc;
  --jsonjoy-secondary: #f1f5f9;
  --jsonjoy-secondary-foreground: #0f172a;
  --jsonjoy-muted: #f1f5f9;
  --jsonjoy-muted-foreground: #64748b;
  --jsonjoy-accent: #f1f5f9;
  --jsonjoy-accent-foreground: #0f172a;
  --jsonjoy-destructive: #ef4444;
  --jsonjoy-destructive-foreground: #f8fafc;
  --jsonjoy-border: #e2e8f0;
  --jsonjoy-input: #e2e8f0;
  --jsonjoy-ring: #020817;
  --jsonjoy-radius: .8rem;
  --jsonjoy-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.jsonjoy.dark {
  /** same, but for dark mode */
}

Localization

By default, the editor uses English. To localize, you need to set a language via the TranslationContext:

import "jsonjoy-builder/styles.css";
import { type JSONSchema, SchemaVisualEditor, TranslationContext, de } from "jsonjoy-builder";
import { useState } from "react";

export function App() {
  const [schema, setSchema] = useState<JSONSchema>({});
  return (
    <TranslationContext value={de}>
      <SchemaVisualEditor schema={schema} onChange={setSchema}/>
    </TranslationContext>
  );
}

Currently we have localizations for English, German, French and Russian. You can define your own translation like this. If you do, consider opening a PR with the translations!

import { type Translation } from "jsonjoy-builder";

const es: Translation = {
	// add translations here (see type Translation for the available keys and default values)
};

See also the English localizations file for the default localizations.

Development

git clone https://github.com/lovasoa/jsonjoy-builder.git
cd jsonjoy-builder
npm install

Start the development server:

npm run dev

The demo application will be available at http://localhost:5173

Building for Production

Build this library for production:

npm run build

The built files will be available in the dist directory.

Project Architecture

Core Components

• JsonSchemaEditor: The main component that provides tabs for switching between visual and JSON views
• SchemaVisualEditor: Handles the visual representation and editing of schemas
• JsonSchemaVisualizer: Provides JSON view with Monaco editor for direct schema editing
• SchemaInferencer: Dialog component for generating schemas from JSON data
• JsonValidator: Dialog component for validating JSON against the current schema

Key Features

Schema Inference

The SchemaInferencer component can automatically generate JSON Schema definitions from existing JSON data. This feature uses a recursion-based inference system to detect:

• Object structures and properties
• Array types and their item schemas
• String formats (dates, emails, URIs)
• Numeric types (integers vs. floats)
• Required fields

JSON Validation

Validate any JSON document against your schema with:

• Real-time feedback
• Detailed error reporting
• Format validation for emails, dates, and other special formats

Technology Stack

• React: UI framework
• TypeScript: Type-safe development
• Rsbuild / Rslib: Build tool and development server
• ShadCN UI: Component library
• Monaco Editor: Code editor for JSON viewing/editing
• Ajv: JSON Schema validation
• Zod: Type-safe json parsing in ts
• Lucide Icons: Icon library
• Node.js Test Runner: Simple built-in testing

Development Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run build:dev	Build with development settings
npm run lint	Run linter
npm run format	Format code
npm run check	Type check the project
npm run fix	Fix linting issues
npm run typecheck	Type check with TypeScript
npm run preview	Preview production build
npm run test	Run tests

Documentation

• 📖 English README (this file)
• 📖 Hebrew README - קרא אותי בעברית
• 📄 Migration Guide (English)
• 📄 מדריך מעבר (Hebrew)
• 📄 Feature Documentation

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Authors

Original Author: @ophir.dev - lovasoa/jsonjoy-builder

JSON Schema 2020-12 Enhanced Fork: @usercourses63 - usercourses63/jsonjoy-builder

Enhanced Fork Features

• ✅ Complete JSON Schema Draft 2020-12 support
• ✅ Multi-draft validation (Draft-07, 2019-09, 2020-12)
• ✅ 7 advanced keyword editors with Visual/JSON toggle
• ✅ Conditional display based on draft version
• ✅ Full internationalization (English, Hebrew, German, French, Russian)
• ✅ Comprehensive migration guides (English + Hebrew)
• ✅ Draft prop inheritance for nested schemas
• ✅ Visual editing mode for all nested schemas

License

This project is licensed under the MIT License - see the LICENSE file for details.