Renderer Types - JSON Forms

Renderers are React components that display form controls and layouts. JSON Forms uses a tester-based system to automatically select the appropriate renderer for each UI schema element.

Renderer registration

JsonFormsRendererRegistryEntry

Registry entry that pairs a tester with a renderer component.

tester

RankedTester

required

Function that returns a numeric rank indicating how well the renderer matches a UI schema element. Higher ranks take precedence.

renderer

any

required

The renderer component (React, Angular, or Vue component).

Example

import { rankWith, isStringControl } from '@jsonforms/core';
import { TextFieldRenderer } from './renderers';

const rendererEntry: JsonFormsRendererRegistryEntry = {
  tester: rankWith(3, isStringControl),
  renderer: TextFieldRenderer
};

Cell renderer registration

JsonFormsCellRendererRegistryEntry

Registry entry for cell renderers used within table controls.

tester

RankedTester

required

Function that returns a rank for cell renderer selection.

cell

any

required

The cell renderer component.

Tester functions

RankedTester

Function type for ranked testers.

uischema

UISchemaElement

required

The UI schema element to test.

schema

JsonSchema

required

The JSON schema.

context

TesterContext

required

Additional context including root schema and config.

returns

number

required

Numeric rank. Returns -1 (NOT_APPLICABLE) if the renderer cannot handle the element.

TesterContext

rootSchema

JsonSchema

required

The root JSON Schema of the form. Used to resolve $ref references.

config

any

required

Form-wide configuration object.

Common testers

JSON Forms provides built-in testers:

isStringControl - Tests for string controls
isBooleanControl - Tests for boolean controls
isIntegerControl - Tests for integer controls
isNumberControl - Tests for number controls
isDateControl - Tests for date controls
isTimeControl - Tests for time controls
isDateTimeControl - Tests for datetime controls
isEnumControl - Tests for enum controls
isOneOfEnumControl - Tests for oneOf enum controls
isObjectArrayControl - Tests for object array controls
isPrimitiveArrayControl - Tests for primitive array controls

Tester utilities

rankWith

(rank: number, tester: Tester) => RankedTester

Creates a ranked tester with the specified rank.

and

(...testers: Tester[]) => Tester

Combines testers with AND logic.

(...testers: Tester[]) => Tester

Combines testers with OR logic.

not

(tester: Tester) => Tester

Negates a tester.

Renderer props

OwnPropsOfRenderer

Props passed directly to a renderer component.

uischema

UISchemaElement

The UI schema element to render.

schema

JsonSchema

The JSON schema that describes the data.

enabled

boolean

Whether the element should be enabled.

visible

boolean

Whether the element should be visible.

path

string

Instance path. Required when the data path cannot be inferred from the UI schema (e.g., nested controls).

renderers

JsonFormsRendererRegistryEntry[]

Available renderers for child elements.

cells

JsonFormsCellRendererRegistryEntry[]

Available cell renderers.

uischemas

JsonFormsUISchemaRegistryEntry[]

Available UI schema registry entries.

StatePropsOfRenderer

Props derived from the JSON Forms state.

config

any

Form configuration options.

uischema

UISchemaElement

required

The UI schema element to render.

schema

JsonSchema

required

The JSON schema.

data

any

The data to render.

enabled

boolean

required

Whether the element is enabled.

visible

boolean

required

Whether the element is visible.

path

string

required

Instance path where data is written.

renderers

JsonFormsRendererRegistryEntry[]

Available renderers.

cells

JsonFormsCellRendererRegistryEntry[]

Available cell renderers.

Control renderer props

OwnPropsOfControl

Own props specific to control renderers.

string

Unique identifier for the control.

uischema

ControlElement

The control element from UI schema.

Inherits all properties from OwnPropsOfRenderer.

StatePropsOfControl

State props for control renderers.

data

any

required

The current value of the control.

label

string

required

Computed label text (includes internationalization and schema title).

description

string

Control description from schema.

errors

string

required

Combined error message string from validation.

required

boolean

Whether the field is required.

string

required

Unique identifier for the control.

rootSchema

JsonSchema

required

The root schema.

i18nKeyPrefix

string

Base key for internationalization.

uischema

ControlElement

required

The control element.

Inherits all properties from StatePropsOfRenderer.

DispatchPropsOfControl

Dispatch props for control renderers to update data.

handleChange

(path: string, value: any) => void

required

Function to update data at the specified path.

Example usage

import { ControlProps } from '@jsonforms/core';

const MyControl = (props: ControlProps) => {
  const { data, label, handleChange, path, errors, enabled } = props;
  
  return (
    <div>
      <label>{label}</label>
      <input
        value={data || ''}
        onChange={(e) => handleChange(path, e.target.value)}
        disabled={!enabled}
      />
      {errors && <div className="error">{errors}</div>}
    </div>
  );
};

Layout renderer props

StatePropsOfLayout

State props for layout renderers.

direction

'row' | 'column'

required

Layout direction (horizontal or vertical).

label

string

Optional label for the layout (e.g., for groups).

Inherits all properties from StatePropsOfRenderer.

Array control props

StatePropsOfArrayControl

State props for array control renderers.

arraySchema

JsonSchema

required

The schema of the array itself.

schema

JsonSchema

required

The schema of array items (resolved from arraySchema.items).

childErrors

ErrorObject[]

Validation errors for array items.

Inherits all properties from StatePropsOfControl.

DispatchPropsOfArrayControl

Dispatch props for array control renderers.

addItem

(path: string, value: any) => () => void

required

Function that returns a handler to add an item to the array.

removeItems

(path: string, toDelete: number[]) => () => void

Function that returns a handler to remove items from the array.

moveUp

(path: string, toMove: number) => () => void

Function that returns a handler to move an item up.

moveDown

(path: string, toMove: number) => () => void

Function that returns a handler to move an item down.

Combinator renderer props

CombinatorRendererProps

Props for combinator renderers (oneOf, anyOf, allOf).

schema

JsonSchema

required

The combinator schema.

path

string

required

Data path.

uischema

ControlElement

required

The UI schema element.

rootSchema

JsonSchema

required

Root schema for resolving references.

data

any

Current data value.

indexOfFittingSchema

number

Index of the schema that best matches the current data.

State management

JsonFormsCore

Core JSON Forms state.

data

any

required

The form data.

schema

JsonSchema

required

The JSON schema.

uischema

UISchemaElement

required

The UI schema.

errors

ErrorObject[]

Validation errors from Ajv.

additionalErrors

ErrorObject[]

Additional custom validation errors.

validator

ValidateFunction

Ajv validation function.

ajv

Ajv

Ajv instance used for validation.

validationMode

ValidationMode

Validation mode: ValidateAndShow, ValidateAndHide, or NoValidation.

Mapper functions

JSON Forms provides mapper functions to connect state to renderer props.

mapStateToControlProps

function mapStateToControlProps(
  state: JsonFormsState,
  ownProps: OwnPropsOfControl
): StatePropsOfControl

Maps JSON Forms state to control renderer props.

mapDispatchToControlProps

function mapDispatchToControlProps(
  dispatch: Dispatch<AnyAction>
): DispatchPropsOfControl

Maps dispatch to control renderer props.

mapStateToArrayControlProps

function mapStateToArrayControlProps(
  state: JsonFormsState,
  ownProps: OwnPropsOfControl
): StatePropsOfArrayControl

Maps state to array control props.

mapDispatchToArrayControlProps

function mapDispatchToArrayControlProps(
  dispatch: Dispatch<CoreActions>
): DispatchPropsOfArrayControl

Maps dispatch to array control props.

Example: Custom renderer

import React from 'react';
import {
  ControlProps,
  rankWith,
  and,
  isStringControl,
  optionIs
} from '@jsonforms/core';
import { withJsonFormsControlProps } from '@jsonforms/react';

const MyCustomRenderer = (props: ControlProps) => {
  const { data, handleChange, path, label, errors, enabled } = props;
  
  return (
    <div className="custom-control">
      <label>{label}</label>
      <input
        value={data || ''}
        onChange={(e) => handleChange(path, e.target.value)}
        disabled={!enabled}
      />
      {errors && <span className="error">{errors}</span>}
    </div>
  );
};

export default withJsonFormsControlProps(MyCustomRenderer);

// Tester: rank 5 for string controls with custom option
export const myCustomRendererTester = rankWith(
  5,
  and(
    isStringControl,
    optionIs('custom', true)
  )
);

UI schema registry

JsonFormsUISchemaRegistryEntry

Registry entry for dynamic UI schema selection.

tester

UISchemaTester

required

Function that returns a rank for UI schema selection based on schema and path.

uischema

UISchemaElement

required

The UI schema to use when the tester matches.

UISchemaTester

type UISchemaTester = (
  schema: JsonSchema,
  schemaPath: string,
  path: string
) => number;

Function that determines which UI schema to use for a given schema element.

Core Package

React Package

Angular Package

Vue Package

Types

​Renderer registration

​JsonFormsRendererRegistryEntry

​Example

​Cell renderer registration

​JsonFormsCellRendererRegistryEntry

​Tester functions

​RankedTester

​TesterContext

​Common testers

​Tester utilities

​Renderer props

​OwnPropsOfRenderer

​StatePropsOfRenderer

​Control renderer props

​OwnPropsOfControl

​StatePropsOfControl

​DispatchPropsOfControl

​Example usage

​Layout renderer props

​StatePropsOfLayout

​Array control props

​StatePropsOfArrayControl

​DispatchPropsOfArrayControl

​Combinator renderer props

​CombinatorRendererProps

​State management

​JsonFormsCore

​Mapper functions

​mapStateToControlProps

​mapDispatchToControlProps

​mapStateToArrayControlProps

​mapDispatchToArrayControlProps

​Example: Custom renderer

​UI schema registry

​JsonFormsUISchemaRegistryEntry

​UISchemaTester

Build docs developers (and LLMs) love

Renderer registration

JsonFormsRendererRegistryEntry

Example

Cell renderer registration

JsonFormsCellRendererRegistryEntry

Tester functions

RankedTester

TesterContext

Common testers

Tester utilities

Renderer props

OwnPropsOfRenderer

StatePropsOfRenderer

Control renderer props

OwnPropsOfControl

StatePropsOfControl

DispatchPropsOfControl

Example usage

Layout renderer props

StatePropsOfLayout

Array control props

StatePropsOfArrayControl

DispatchPropsOfArrayControl

Combinator renderer props

CombinatorRendererProps

State management

JsonFormsCore

Mapper functions

mapStateToControlProps

mapDispatchToControlProps

mapStateToArrayControlProps

mapDispatchToArrayControlProps

Example: Custom renderer

UI schema registry

JsonFormsUISchemaRegistryEntry

UISchemaTester