Quickstart

Minimal setup

Let’s explore the most basic setup:

<script lang="ts">
  import { Form2 } from "@sjsf/form";
  import { theme } from '@sjsf/form/basic-theme'
  import { createValidator } from '@sjsf/form/fake-validator'
  import { translation } from '@sjsf/form/translations/en'
</script>

<Form2
  {...theme}
  {translation}
  schema={{
    type: "object",
    properties: {
      text: {
        type: "string",
        title: "Simple text input",
      },
    },
    required: ["text"],
  }}
  validator={createValidator()}
  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.

JSON Schema API reference

Handlers API reference

UI Schema

With the uiSchema parameter, you can customize the user interface of the form.

Note

We’ll talk about CustomForm component in the Custom form guide.

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

  import CustomForm from "@/components/custom-form.svelte";

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

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

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

UI Schema API reference

Form state

To access the state of the form you can use properties such as value and errors

Tip

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

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

  import { createCustomForm } from "@/components/custom-form";

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

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

<RawForm {form} novalidate />

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