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 "@/lib/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<FromSchema<typeof schema>>({
  ...defaults,
  schema,
})

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 typebox

yarn

yarn add typebox

pnpm

pnpm add typebox

bun

bun add typebox

Usage

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

import * as defaults from "@/lib/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<Static<typeof schema>>({
  ...defaults,
  schema,
  uiSchema,
});