Dynamic JSON Form Renderer

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

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

What the software offers

• Generates React forms dynamically from JSON Schema
• 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.

Version 2.0.0

Version 2.0.0 introduces a cleaner public API aligned with the standard RJSF v6 callback contracts.

The release provides:

• Standard onChange, onSubmit and onError callbacks
• Dedicated onSubmitError, onSubmitSuccess and onSchemaError
  callbacks
• Improved asynchronous submission-state handling
• Accessible validation summaries above the submit action
• Improved number inputs, popovers and date-picker styling
• More consistent runtime colors in light and dark mode
• Improved unresolved-reference error reporting

Version 2.0.0 removes the legacy onSave, data-only onChange, onFormChange and readOnly compatibility properties.

Installation

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

Package Registry

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