G. Novetti.IT

Personal project

JSON Schema Graph Builder.

A visual JSON Schema editor that keeps source code, an interactive graph, validation, and live form previews in sync.

← All projects
Try the live demo ↗View on GitHub ↗
Two JSON Schema dialects · Source and graph editing · Live form previews

The context.

Large JSON Schemas become difficult to navigate as definitions, references, and conditional rules accumulate. I created an editor that makes those relationships explorable while preserving standard JSON Schema output.

My contribution.

  • Built a framework-independent SchemaGraph model for parsing, serialization, reference resolution, and schema operations; React Flow projects that model into an interactive graph.
  • Synchronized Monaco source editing, the graph inspector, and validation diagnostics with Zustand. Invalid source stays editable without replacing the last valid graph.
  • Added a visual JSON Forms UI Schema builder and live preview, keeping UI metadata separate from exported schemas.
  • Supported Draft 2020-12 and Draft-07, with dialect conversion and reference rewriting when targets change.

Technology.

TypeScriptReactJSON Schema

Based on the project README. The editor supports Draft 2020-12 and Draft-07; external schemas must be registered explicitly. Validation covers the features modeled by the editor.