Standard Schema

You can use any entity that implements Standard Schema or Standard JSON Schema as a source for the JSON Schema and for performing full form validation.

Example

Basic None Actions

+page.sveltedemo-schema.ts

<script lang="ts">
  import { BasicForm, createForm, getValueSnapshot } from "@sjsf/form";
  import { adapt } from "@sjsf/form/validators/standard-schema";
  import { type } from "arktype";

  import * as defaults from "$lib/sjsf/defaults";

  import { initialValue, uiSchema } from "../demo-schema";

  const schema = type({
    "id?": "string>=8&/^\\d+$/",
    "active?": "boolean",
    "skills?": "(string>=5)[]>=4",
    "multipleChoicesList?": "('foo'|'bar'|'fuzz')[]<=2",
  });

  const form = createForm({
    ...defaults,
    ...adapt(schema),
    uiSchema,
    initialValue: {
      ...initialValue,
      id: "123",
    },
  });
</script>

<BasicForm {form} novalidate />

<pre>{JSON.stringify(getValueSnapshot(form), null, 2)}</pre>

Limitations

You can use adapt as long as the generated schema does not contain the following keywords: oneOf, anyOf, and if/then/else.

In such cases, you will need a real Validator interface implementation (You can take it from another validator or write it yourself).

Async validation

This validator supports async validation.

import { adaptAsync } from "@sjsf/form/validators/standard-schema";

const { schema, validator } = adaptAsync(standardSchema);

Using with non-JSON Schema libraries

Some Standard Schema libraries only implement StandardSchemaV1 for validation, but not StandardJSONSchemaV1 for schema generation.

In this case, you can use the library’s own JSON Schema generation alongside createFormValidator:

Basic None Actions

<script lang="ts">
  import { BasicForm, createForm, getValueSnapshot } from "@sjsf/form";
  import { createFormValidator } from "@sjsf/form/validators/standard-schema";
  import { JSONSchema, Schema } from "effect";

  import * as defaults from "$lib/sjsf/defaults";

  const Person = Schema.Struct({
    name: Schema.propertySignature(Schema.String).annotations({
      title: "Name",
    }),
    email: Schema.propertySignature(
      Schema.String.pipe(Schema.pattern(/^[\w.-]+@[\w.-]+\.\w+$/))
    ).annotations({ title: "Email" }),
    age: Schema.propertySignature(
      Schema.Number.pipe(Schema.greaterThan(18))
    ).annotations({ title: "Age" }),
  }).annotations({ title: "Person" });

  const form = createForm({
    ...defaults,
    schema: JSONSchema.make(Person),
    validator: createFormValidator(Schema.standardSchemaV1(Person)),
  });
</script>

<BasicForm {form} novalidate />

<pre>{JSON.stringify(getValueSnapshot(form), null, 2)}</pre>