Form value type inference

json-schema-to-ts

You can use json-schema-to-ts to infer types from JSON schema.

Installation

npm

npm i -D json-schema-to-ts

yarn

yarn add -D json-schema-to-ts

pnpm

pnpm add -D json-schema-to-ts

bun

bun add -d json-schema-to-ts

Usage

import { createForm, type Schema } from "@sjsf/form";
import type { FromSchema } from "json-schema-to-ts";

import * as defaults from "@/components/form-defaults";

const schema = {
  type: "object",
  title: "Form title",
  properties: {
    text: {
      type: "string",
      title: "Text input",
    },
  },
  required: ["text"],
  additionalProperties: false
} as const satisfies Schema;

const form = createForm({
  ...defaults,
  schema,
  onSubmit: (value: FromSchema<typeof schema>) => {
    console.log(value)
  }
})

// { text: string } | undefined
form.value

TypeBox

TypeBox offers a unified type that can be statically checked by TypeScript and runtime asserted using standard Json Schema validation.

Installation

npm

npm i @sinclair/typebox

yarn

yarn add @sinclair/typebox

pnpm

pnpm add @sinclair/typebox

bun

bun add @sinclair/typebox

Usage

import { Type, type Static } from "@sinclair/typebox";
import { createForm, type UiSchema } from "@sjsf/form";

import * as defaults from "@/components/form-defaults";

const schema = Type.Object({
  text: Type.String(),
});

const uiSchema: UiSchema = {
  "ui:options": {
    title: "Form title",
  },
  text: {
    "ui:options": {
      title: "Text input",
    },
  },
};

const form = createForm({
  ...defaults,
  schema,
  uiSchema,
  onSubmit: (value: Static<typeof schema>) => {
    console.log(value);
  },
});

// { text: string } | undefined
form.value;