Quickstart

Installation

npm

npm i @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/basic-theme@next

yarn

yarn add @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/basic-theme@next

pnpm

pnpm add @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/basic-theme@next

bun

bun add @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/basic-theme@next

Svelte ^5.25.0 is required

Usage

Let’s start with the simplest setup:

<script lang="ts">
  import { SimpleForm } from "@sjsf/form";
  import { resolver } from "@sjsf/form/resolvers/basic";
  import { translation } from "@sjsf/form/translations/en";
  import { theme } from "@sjsf/basic-theme";
</script>

<SimpleForm
  {theme}
  {translation}
  {resolver}
  schema={{
    type: "object",
    title: 'Form title',
    properties: {
      text: {
        type: "string",
        title: "Text input",
      },
    },
    required: ["text"],
  }}
  validator={{ isValid: () => true }}
  onSubmit={(v: { text: string }) => window.alert(v.text)}
/>

In the example above, we create a form based on json schema and use HTML5 validation to validate the form.

Although this is an extremely simple example, it turned out to be quite verbose, and here’s why:

• Explicit Configuration: The library favors explicit configuration over “magic” defaults.
• Tree-Shakeable Architecture: Each feature is located in its own submodule so you can import only the functionality you need, keeping your bundle lean and optimized.
• Highly Customizable: We provide extensive customization options so that you can tailor every aspect of the library to your needs.

Schema

Form options

UI Schema

With the uiSchema parameter you can customize the appearance of the form.

Note

We’ll talk about MyForm component in the Reusable defaults guide.

<script lang="ts">
  import type { Schema, UiSchemaRoot } from "@sjsf/form";

  import MyForm from "@/components/my-form.svelte";

  const schema: Schema = {
    type: "string",
    title: "Text input",
  };

  const uiSchema: UiSchemaRoot = {
    "ui:options": {
      title: "Custom title",
      help: "Help text",
      text: {
        placeholder: "placeholder",
      },
    },
  };
</script>

<MyForm {schema} {uiSchema} onSubmit={(v) => window.alert(v)} />

UI Schema

Form state

Use a factory to create a form to access its state.

Tip

Use getters to pass reactive parameters to the createForm (createMyForm) function.

<script lang="ts">
  import { BasicForm, type Schema } from "@sjsf/form";

  import { createMyForm } from "@/components/my-form";

  const schema: Schema = {
    type: "string",
    minLength: 10,
  };

  const form = createMyForm({
    initialValue: "initial",
    schema,
    onSubmit: console.log,
  });
</script>

<BasicForm {form} novalidate />

<pre>{JSON.stringify(
    { value: form.value, errors: Object.fromEntries(form.errors) },
    null,
    2
  )}</pre>

Form state