GitHub

JSON Form

PreviousNext

A JSON-Schema-driven form built entirely on shadcn's FormField abstraction.

JsonForm renders a whole JSON Schema as an editable form: nested objects collapse into sections, arrays expand into repeatable rows, and each scalar is typed (text, number, date, enum, checkbox). It's built entirely on shadcn's FormField, so it inherits your theme, and form state is owned by a react-hook-form instance you pass in.

JsonFormField is the unit of composition — render a single schema property by its field path — and JsonForm is the thin convenience wrapper that renders a whole schema and owns the <form>.

Usage

import { useForm } from "react-hook-form";
 
import { JsonForm } from "@/components/json-form/json-form";
 
export function Example() {
  const form = useForm({
    defaultValues: { invoice_number: "INV-1024", total: 1280.5 },
  });
  return (
    <JsonForm
      form={form}
      schema={schema}
      onSubmit={(data) => console.log(data)}
    >
      <button type="submit">Submit</button>
    </JsonForm>
  );
}

Render a single field on its own:

import { JsonFormField } from "@/components/json-form/json-form";
 
export function VendorNameField() {
  return (
    <JsonFormField name="vendor.name" schema={{ type: "string" }} required />
  );
}

API Reference

JsonForm

PropTypeDescription
formUseFormReturnA react-hook-form instance holding the data values.
schemaJSONSchema7The schema describing the form's structure.
onSubmitSubmitHandlerOptional submit handler for the underlying <form>.
textInput"input" | "textarea"Optional override for plain string fields. Omit it to keep the default auto behavior (format: "textarea" or long strings render as textareas).
sourceLinkSourceFieldLink from source-field-linkOpt into field-level source linking — every scalar becomes a hoverable card that reports its path and highlights when active (wire it from useSegmentedSourceFieldLink).
childrenReactNodeRendered after the fields, e.g. a submit button.
classNamestringClass names for the form container.

JsonFormField

PropTypeDescription
namestringThe react-hook-form field path, e.g. vendor.name or items.0.
schemaJSONSchema7The schema for this property.
requiredbooleanMarks the field required.
labelstringOverride the derived label.
textInput"input" | "textarea"Optional override for plain string fields.