Dynamic JSON Form Renderer

@hzb-rdm/dynamic-json-form-renderer is a reusable React and TypeScript component library for generating accessible, configurable web forms and structured read-only data views from JSON Schema.

It provides a standardized rendering foundation for research metadata applications, including Schema Studio, SEPIA, and other FAIR research data management workflows.

What the software offers

• Generates React forms dynamically from JSON Schema
• Presents stored metadata in a schema-aware, read-only table view
• Uses React JSONSchema Form (RJSF) v6 and AJV validation
• Supports nested objects, arrays, and complex metadata schemas
• Provides accessible validation messages and error summaries
• Supports controlled and uncontrolled form state
• Supports synchronous and asynchronous form submission
• Provides configurable runtime color themes
• Supports light and dark application themes
• Includes reusable widgets and templates based on Shadcn UI
• Detects unresolved JSON Schema references before rendering
• Supports custom RJSF validators, widgets, templates, and UI schemas
• Displays terminology and semantic metadata associated with fields

Terminology-aware metadata

The renderer understands Schema Studio extensions such as:

• x-schema-studio-terminology
• x-schema-studio-suggestions
• x-schema-studio-ui-layout
• x-schema-studio-order

These extensions allow applications to associate form fields with controlled vocabularies, terminology services, concept identifiers, definitions, suggestions, layout information, and display ordering.

Terminology information is available in both editable forms and the schema-aware table view.

Version 2.1.0

Version 2.1.0 introduces a schema-aware table view for presenting submitted or stored metadata in a structured, read-only format.

The table view supports ordinary form data and versioned metadata envelopes containing schema_name, schema_version, and data.

The release provides:

• A new showInTable property for DynamicFormRendererGeneric

• A reusable MetadataTableView component

• Recursive rendering of nested objects and arrays

• Full-width sections for nested objects

• Full-width cards for arrays of objects

• Compact and detailed metadata display modes

• Independent expand and collapse controls for:

  • Object sections
  • Structured arrays
  • Individual array entries

• Schema identity information

• Schema-defined field labels and ordering

• Required-field and unit indicators

• Accessible terminology popovers

• Descriptions, types, formats, defaults, and constraints

• Allowed values and Schema Studio suggestions

• Formatting for Boolean values, dates, URLs, empty values, and unknown data

• Accessible labels and ARIA attributes for interactive controls

Compact mode presents the essential field information: icon, field name, value, required status, unit, and terminology.

Detailed mode additionally presents all available schema metadata, including descriptions, types, formats, defaults, constraints, allowed values, and suggestions.

The layout is optimized for deeply nested research metadata. The 25/75 field-to-value column layout is applied only to leaf fields, preventing nested objects and arrays from becoming progressively narrower.

Version 2.1.0 is a backward-compatible minor release. Existing editable form rendering remains unchanged when showInTable is omitted or set to false.

The release also adds contributor documentation, REUSE-compliant licensing metadata, and automated REUSE compliance checking in the GitLab CI pipeline.

Example

<DynamicFormRendererGeneric
  schema={schema}
  initialFormData={storedData}
  showInTable
  color="blue"
/>

The supplied data can be schema-shaped form data directly or a versioned envelope:

{
  "schema_name": "ElectrodeSample",
  "schema_version": "1.0.1",
  "data": {
    "...": "..."
  }
}

Installation

npm install @hzb-rdm/dynamic-json-form-renderer@2.1.0

Package registry

Add the HZB GitLab package registry to your .npmrc:

echo "@hzb-rdm:registry=https://codebase.helmholtz.cloud/api/v4/packages/npm/" >> .npmrc

Project information

Source code: https://codebase.helmholtz.cloud/hzb/research_data_management/dynamic-json-form-renderer

npm package: @hzb-rdm/dynamic-json-form-renderer

License: MIT

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.