Dynamic JSON Form Renderer: A Reusable React JSON Schema Form Renderer with Terminology-Aware Metadata Support

Dynamic JSON Form Renderer is a reusable TypeScript and React component library for generating accessible, metadata-aware web forms and structured read-only data views from JSON Schema. It was extracted from Schema Studio to provide a common rendering engine for SEPIA and other FAIR research data management applications. The package builds on React JSONSchema Form (RJSF) v6 and provides custom Shadcn UI widgets and templates, schema analysis, automatic UI-schema generation, configurable runtime themes, light and dark mode support, terminology-aware metadata presentation, and schema-aware read-only metadata tables. It supports nested objects, arrays, validation, controlled and uncontrolled form state, asynchronous submission, and custom validators, widgets, and templates. Schema Studio extensions such as x-schema-studio-terminology, x-schema-studio-suggestions, x-schema-studio-ui-layout, and x-schema-studio-order allow applications to associate fields with controlled vocabularies, definitions, concept identifiers, suggestions, layout information, and ordering hints. The renderer also detects unresolved JSON Schema references before rendering. Version 2.1 introduced a schema-aware table view for presenting submitted or stored metadata in a structured, read-only format. The table view supports ordinary form data as well as versioned metadata envelopes containing schema_name, schema_version, and data. It supports nested objects, primitive arrays, arrays of objects, required-field indicators, units, terminology information, descriptions, data types, formats, defaults, constraints, allowed values, and Schema Studio suggestions. Version 2.2.0 introduces safe handling of persisted metadata fields that are no longer permitted by the active JSON Schema. When a schema defines additionalProperties: false, previously stored data may contain fields that are no longer valid. The renderer now detects these unsupported fields, identifies their paths in a clear warning, and prevents them from blocking a valid submission or being removed without the user’s awareness. By default, the renderer preserves unsupported persisted values while the user reviews the form. When the user submits, a confirmation dialog lists the affected fields and asks for confirmation before removing them. After confirmation, the unsupported fields are removed before validation and submission. Applications that prefer automatic cleanup can enable the new omitExtraData prop. In this mode, the renderer retains the warning but removes unsupported data automatically before validation and submission. The liveOmit RJSF option is also supported and defaults to false, ensuring that persisted values are not removed while users edit unrelated form fields. The implementation supports nested objects and removes only properties rejected by additionalProperties: false. Fields permitted through additionalProperties: true remain unchanged. Dynamic JSON Form Renderer is developed within the Research Data Management activities at Helmholtz-Zentrum Berlin für Materialien und Energie GmbH (HZB) as part of the SEPIA ecosystem for FAIR research metadata management. Source code: https://codebase.helmholtz.cloud/hzb/research_data_management/dynamic-json-form-renderer npm package: @hzb-rdm/dynamic-json-form-renderer License: MIT