KNIME JSONForms integration

@knime/jsonforms is the KNIME JSONForms integration, built on top of @jsonforms/vue. It renders a settings dialog from a JSON schema + uischema + data triple. It powers node dialogs and other schema-driven forms across our apps.

The package ships a comprehensive set of default renderers built on KNIME Design System components (text, number, dropdown, combo box, radio, value switch, twinlist, date/time, rich text, and more, plus the standard layouts). For many forms these defaults are all you need. Consumers can also extend the set with their own custom renderers — this is how knime-core-ui adds node-dialog widgets (array layouts, file choosers, credentials, flow variables, …).

Usage

For installation, usage examples, and how to extend the package with custom renderers, see the Product Features/JSONForms page in the design-system Storybook (source: stories/JSONForms.mdx).

Development in Storybook

The JSONForms mocks are showcased as Storybook stories under Product Features/JSONForms (one story per mock, in stories/). Run the design-system Storybook to browse and develop them:

pnpm dev

Testing

Run unit- and integration-tests individually by

pnpm test:unit
pnpm test:integration

You can generate a coverage report with

pnpm coverage:unit
pnpm coverage:integration

The output can be found in the coverage folder. It contains a browseable html report as well as raw coverage data in LCOV and Clover format, which can be used in analysis software (SonarQube, Jenkins, …).

Note: noisy Vue warnings are suppressed if you set the environment flag SUPPRESS_WARNINGS=true, and they are also suppressed when running with CI=true which is set by default in most pipeline environments.