§@gravity-ui/dynamic-forms ·

English · Русский

A form renderer on top of JSON Schema and react-final-form. A single schema describes both the value and how it is rendered: validation rules are standard Draft-07 keywords, and what a node is drawn with is the nodeParameters extension.

• Entry point: @gravity-ui/dynamic-forms.
• Status: stable API.
• Two layers: core (headless engine) and kit (ready-made entities and layouts on @gravity-ui/uikit).

The previous DynamicField / DynamicView API is available from @gravity-ui/dynamic-forms/deprecated. SchemaRenderer imports from the removed /unstable entry point move to the package root. See the migration guide for the full transition and docs/deprecated for the previous API documentation.

§Install

npm install --save-dev @gravity-ui/dynamic-forms

§Contents

• How to use — quick start, the name prop, modes, what to pick.
• API reference — components, hooks, props, constants, utilities, kit exports, types.
• Schema — nodeParameters, flags, annotations, keywords, stringNumber, $ref.
• Runtime — node lifecycle, value coercion, validation, errors, events, patches.
• Kit — layouts, entity catalog, service components, styles.
• Extension — custom entities, layouts, validators, config, standalone renderer.
• Migration — moving from the previous main API or /unstable, converting Spec, compatibility through /deprecated.
• Caveats and limitations — code-verified discrepancies, limitations and bugs.

§What it is

src/lib is a form engine where both the form and the values overview are built from a single JSON Schema. The core layer has no controls of its own: everything rendered comes from the config. Validation runs through json-schema-library (Draft-07) plus the custom stringNumber keyword. The kit layer provides a ready registry: 30 entity keys across 6 node types, 7 layout keys, service components, the useExpanded hook, error texts and the specToJsonSchema converter from the old Spec format.

§How it works

1. Schema and config. useSchemaRenderer clones schema and stores state in a service field with a validator.
2. Nodes. SchemaRendererNode takes the subschema by pointer, registers a final-form field, picks entity and layout.
3. Change. A value edit, via validateFields, triggers only the service field validator.
4. Errors. The validator spreads errors by name into srState.errors; nodes with a changed message re-render.
5. Imperative. useSchemaRendererTools patches the schema and adds external errors, restarting validation.

§Dependencies

§I18N

Certain components include text tokens (words and phrases) that are available in two languages: en (the default) and ru. To set the language, use the configure function:

// index.js

import {configure, Lang} from '@gravity-ui/dynamic-forms';

configure({lang: Lang.Ru});

§Development

To start the development server with storybook execute the following command:

npm ci
npm run dev