Implementation:ArroyoSystems Arroyo Json Form

Knowledge Sources	ArroyoSystems_Arroyo
Domains	WebUI, React, Forms, JSONSchema
Last Updated	2026-02-08 08:00 GMT

Overview

A dynamic form renderer that generates Chakra UI form controls from JSON Schema 7 definitions, used throughout the Arroyo WebUI for connector configuration forms.

Description

JsonForm renders a complete form from a JSONSchema7 definition using Formik for state management and AJV for validation. The module contains several specialized widget components:

StringWidget -- Text input with optional password mode, textarea for long maxLength, environment variable substitution hints for var-str format fields, and optional field reset on empty value.
NumberWidget -- Numeric input with min/max constraints and integer step support.
BooleanWidget -- Switch toggle with automatic false-initialization.
AutocompleteWidget -- Text input with dropdown autocomplete suggestions using the Downshift useCombobox hook. Filters suggestions as the user types.
SelectWidget -- Dropdown select with default value initialization and field reset on change.
ArrayWidget -- Dynamic list of items with add/remove capabilities, wrapped in a fieldset.
MapWidget -- Key-value pair editor with uniqueness validation, add/remove capabilities.
FormInner -- Recursive schema traversal that renders appropriate widgets based on property type. Handles nested objects, oneOf discriminated unions (rendered as select + sub-form), and deprecated field filtering.
JsonForm -- Top-level form wrapper with optional name field, AJV-based validation (with custom keyword sensitive and custom formats var-str, autocomplete, uint64), error display, configurable submit button, and read-only mode.

The form also supports autocomplete data from connection profile endpoints and renders Markdown descriptions for form fields via a custom Markdown component.

Usage

Used in connection profile creation/editing, connection table configuration, and connector setup forms.

Code Reference

Source Location

Repository: ArroyoSystems_Arroyo
File: webui/src/routes/connections/JsonForm.tsx

Signature

export function JsonForm(props: {
  schema: JSONSchema7;
  onSubmit: (values: any) => Promise<void>;
  onChange?: (e: any) => void;
  initial?: any;
  hasName?: boolean;
  error: string | null;
  readonly?: boolean;
  button?: string;
  buttonColor?: string;
  inProgress?: boolean;
  autocompleteData?: { values: { [key: string]: string[] | undefined } };
  autocompleteError?: string;
}): JSX.Element;

export function FormInner(props: {
  schema: JSONSchema7;
  onChange: (e: React.ChangeEvent<any>) => void;
  path?: string;
  values: any;
  errors: any;
  resetField: (field: string) => void;
  readonly?: boolean;
  autocompleteData?: { values: { [key: string]: string[] | undefined } };
  autocompleteError?: string;
}): JSX.Element;

export function ArrayWidget(props: { ... }): JSX.Element;
export function MapWidget(props: { ... }): JSX.Element;

Import

import { JsonForm } from './JsonForm';

I/O Contract

Inputs

Name	Type	Required	Description
schema	JSONSchema7	Yes	JSON Schema definition driving form structure
onSubmit	(values: any) => Promise<void>	Yes	Async callback receiving form values on submit
initial	any	No	Initial form values (default: {})
hasName	boolean	No	Whether to show a name input field
error	string or null	Yes	Error message to display
readonly	boolean	No	Disable all inputs (default: false)
autocompleteData	object	No	Autocomplete suggestions keyed by field path

Outputs

Name	Type	Description
Form element	JSX.Element	Rendered form with inputs, validation, and submit button

Usage Examples

<JsonForm
  schema={JSON.parse(connector.connection_config!)}
  hasName={true}
  error={error}
  initial={{}}
  button="Create"
  onSubmit={async (values) => {
    await post('/v1/connection_profiles', { body: values });
  }}
/>

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment