svelte-jsonschema-form

Installation

Choose your favorite theme:

npm

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

yarn

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

pnpm

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

bun

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

basic theme setup

Usage

Form.svelte

<script lang="ts">
  import { createForm, BasicForm } from "@sjsf/form";
  import { resolver } from "@sjsf/form/resolvers/basic";
  import { translation } from "@sjsf/form/translations/en";
  import { theme } from "@sjsf/basic-theme";
  import "@sjsf/basic-theme/extra-widgets/textarea-include";

  import { schema, uiSchema, initialValue } from "./_schema";
  import { createValidator } from "./_validator";
  import { onSubmit } from "./_on-submit";

  const idPrefix = "basic";
  const validator = createValidator(idPrefix);
  const form = createForm({
    idPrefix,
    validator,
    theme,
    resolver,
    initialValue,
    schema,
    uiSchema,
    translation,
    onSubmit,
  });
</script>

<BasicForm {form} />

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

_schema.ts

import type { Schema, UiSchemaRoot } from "@sjsf/form";

export const schema: Schema = {
  title: "A registration form",
  description: "A simple form example.",
  type: "object",
  required: ["firstName", "lastName"],
  properties: {
    firstName: {
      type: "string",
      title: "First name",
      default: "Chuck",
    },
    lastName: {
      type: "string",
      title: "Last name",
    },
    age: {
      type: "integer",
      title: "Age",
    },
    bio: {
      type: "string",
      title: "Bio",
    },
    password: {
      type: "string",
      title: "Password",
      minLength: 3,
    },
    telephone: {
      type: "string",
      title: "Telephone",
      minLength: 10,
    },
    star: {
      type: "boolean",
      title: "Star",
    },
  },
};

export const uiSchema: UiSchemaRoot = {
  firstName: {
    "ui:options": {
      text: {
        autocomplete: "family-name",
      },
      flowbiteText: {
        autocomplete: "family-name",
      },
    },
  },
  lastName: {
    "ui:options": {
      text: {
        autocomplete: "given-name",
      },
      flowbiteText: {
        autocomplete: "given-name",
      },
    },
  },
  age: {
    "ui:options": {
      title: "Age of person",
      description: "(earthian year)",
    },
  },
  bio: {
    "ui:components": {
      textWidget: "textareaWidget",
    },
  },
  password: {
    "ui:options": {
      help: "Hint: Make it strong!",
      text: {
        type: "password",
      },
      flowbiteText: {
        type: "password",
      },
    },
  },
  telephone: {
    "ui:options": {
      text: {
        type: "tel",
      },
      flowbiteText: {
        type: "tel",
      },
    },
  },
  star: {
    "ui:options": {
      title: "Have you starred this project yet?",
    },
  },
};

export const initialValue = {
  lastName: "Norris",
  age: 75,
  bio: "Roundhouse kicking asses since 1940",
  password: "noneed",
  telephone: "1-800-KICKASS",
};

_validator.ts

import type { ErrorObject } from "ajv";
import { createFormValidator } from "@sjsf/ajv8-validator";
import { isSchemaObjectValue } from "@sjsf/form/core";
import { pathToId, type FormValueValidator } from "@sjsf/form";

class StarError {}

export function createValidator(idPrefix: string) {
  const validator = createFormValidator({ idPrefix });
  return {
    ...validator,
    validateFormValue(rootSchema, formValue) {
      const errors = validator.validateFormValue(rootSchema, formValue);
      return isSchemaObjectValue(formValue) && !formValue["star"]
        ? [
            ...errors,
            {
              instanceId: pathToId(["star"], { idPrefix }),
              propertyTitle: "Star",
              message: "That's okay, but I would appreciate your support!",
              error: new StarError(),
            },
          ]
        : errors;
    },
  } satisfies FormValueValidator<ErrorObject | StarError>;
}

This theme is not affiliated with, endorsed by, or sponsored by " daisyUI" brand.

npm

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

yarn

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

pnpm

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

bun

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

daisyUI v5 theme setup

Usage

Form.svelte

<script lang="ts">
  import { BasicForm, createForm } from "@sjsf/form";
  import { resolver } from "@sjsf/form/resolvers/basic";
  import { translation } from "@sjsf/form/translations/en";
  import { theme } from "@sjsf/daisyui5-theme";
  import "@sjsf/daisyui5-theme/extra-widgets/textarea-include";

  import { createAstro } from "@/astro.svelte";

  import { schema, uiSchema, initialValue } from "./_schema";
  import { createValidator } from "./_validator";
  import { onSubmit } from "./_on-submit";

  const idPrefix = "daisyui5";
  const validator = createValidator(idPrefix);
  const form = createForm({
    idPrefix,
    validator,
    resolver,
    theme,
    initialValue,
    schema,
    uiSchema,
    translation,
    onSubmit,
  });
  const astro = createAstro();
</script>

<BasicForm
  {form}
  style="background-color: transparent; margin-bottom: 1rem;"
  data-theme={astro.darkOrLight}
/>

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

_schema.ts

import type { Schema, UiSchemaRoot } from "@sjsf/form";

export const schema: Schema = {
  title: "A registration form",
  description: "A simple form example.",
  type: "object",
  required: ["firstName", "lastName"],
  properties: {
    firstName: {
      type: "string",
      title: "First name",
      default: "Chuck",
    },
    lastName: {
      type: "string",
      title: "Last name",
    },
    age: {
      type: "integer",
      title: "Age",
    },
    bio: {
      type: "string",
      title: "Bio",
    },
    password: {
      type: "string",
      title: "Password",
      minLength: 3,
    },
    telephone: {
      type: "string",
      title: "Telephone",
      minLength: 10,
    },
    star: {
      type: "boolean",
      title: "Star",
    },
  },
};

export const uiSchema: UiSchemaRoot = {
  firstName: {
    "ui:options": {
      text: {
        autocomplete: "family-name",
      },
      flowbiteText: {
        autocomplete: "family-name",
      },
    },
  },
  lastName: {
    "ui:options": {
      text: {
        autocomplete: "given-name",
      },
      flowbiteText: {
        autocomplete: "given-name",
      },
    },
  },
  age: {
    "ui:options": {
      title: "Age of person",
      description: "(earthian year)",
    },
  },
  bio: {
    "ui:components": {
      textWidget: "textareaWidget",
    },
  },
  password: {
    "ui:options": {
      help: "Hint: Make it strong!",
      text: {
        type: "password",
      },
      flowbiteText: {
        type: "password",
      },
    },
  },
  telephone: {
    "ui:options": {
      text: {
        type: "tel",
      },
      flowbiteText: {
        type: "tel",
      },
    },
  },
  star: {
    "ui:options": {
      title: "Have you starred this project yet?",
    },
  },
};

export const initialValue = {
  lastName: "Norris",
  age: 75,
  bio: "Roundhouse kicking asses since 1940",
  password: "noneed",
  telephone: "1-800-KICKASS",
};

_validator.ts

import type { ErrorObject } from "ajv";
import { createFormValidator } from "@sjsf/ajv8-validator";
import { isSchemaObjectValue } from "@sjsf/form/core";
import { pathToId, type FormValueValidator } from "@sjsf/form";

class StarError {}

export function createValidator(idPrefix: string) {
  const validator = createFormValidator({ idPrefix });
  return {
    ...validator,
    validateFormValue(rootSchema, formValue) {
      const errors = validator.validateFormValue(rootSchema, formValue);
      return isSchemaObjectValue(formValue) && !formValue["star"]
        ? [
            ...errors,
            {
              instanceId: pathToId(["star"], { idPrefix }),
              propertyTitle: "Star",
              message: "That's okay, but I would appreciate your support!",
              error: new StarError(),
            },
          ]
        : errors;
    },
  } satisfies FormValueValidator<ErrorObject | StarError>;
}

This theme is not affiliated with, endorsed by, or sponsored by " Flowbite" brand.

npm

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

yarn

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

pnpm

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

bun

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

Flowbite v3 theme setup

Usage

Form.svelte

<script lang="ts">
  import { BasicForm, createForm } from "@sjsf/form";
  import { resolver } from "@sjsf/form/resolvers/basic";
  import { translation } from "@sjsf/form/translations/en";
  import { theme } from "@sjsf/flowbite3-theme";
  import "@sjsf/flowbite3-theme/extra-widgets/textarea-include";

  import { createAstro } from "@/astro.svelte";

  import { schema, uiSchema, initialValue } from "./_schema";
  import { createValidator } from "./_validator";
  import { onSubmit } from "./_on-submit";

  const idPrefix = "flowbite3";
  const validator = createValidator(idPrefix);
  const form = createForm({
    idPrefix,
    validator,
    resolver,
    theme,
    initialValue,
    schema,
    uiSchema,
    translation,
    onSubmit,
  });
  const astro = createAstro();
</script>

<BasicForm {form} class="flex flex-col gap-4 mb-4 {astro.darkOrLight}" />

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

_schema.ts

import type { Schema, UiSchemaRoot } from "@sjsf/form";

export const schema: Schema = {
  title: "A registration form",
  description: "A simple form example.",
  type: "object",
  required: ["firstName", "lastName"],
  properties: {
    firstName: {
      type: "string",
      title: "First name",
      default: "Chuck",
    },
    lastName: {
      type: "string",
      title: "Last name",
    },
    age: {
      type: "integer",
      title: "Age",
    },
    bio: {
      type: "string",
      title: "Bio",
    },
    password: {
      type: "string",
      title: "Password",
      minLength: 3,
    },
    telephone: {
      type: "string",
      title: "Telephone",
      minLength: 10,
    },
    star: {
      type: "boolean",
      title: "Star",
    },
  },
};

export const uiSchema: UiSchemaRoot = {
  firstName: {
    "ui:options": {
      text: {
        autocomplete: "family-name",
      },
      flowbiteText: {
        autocomplete: "family-name",
      },
    },
  },
  lastName: {
    "ui:options": {
      text: {
        autocomplete: "given-name",
      },
      flowbiteText: {
        autocomplete: "given-name",
      },
    },
  },
  age: {
    "ui:options": {
      title: "Age of person",
      description: "(earthian year)",
    },
  },
  bio: {
    "ui:components": {
      textWidget: "textareaWidget",
    },
  },
  password: {
    "ui:options": {
      help: "Hint: Make it strong!",
      text: {
        type: "password",
      },
      flowbiteText: {
        type: "password",
      },
    },
  },
  telephone: {
    "ui:options": {
      text: {
        type: "tel",
      },
      flowbiteText: {
        type: "tel",
      },
    },
  },
  star: {
    "ui:options": {
      title: "Have you starred this project yet?",
    },
  },
};

export const initialValue = {
  lastName: "Norris",
  age: 75,
  bio: "Roundhouse kicking asses since 1940",
  password: "noneed",
  telephone: "1-800-KICKASS",
};

_validator.ts

import type { ErrorObject } from "ajv";
import { createFormValidator } from "@sjsf/ajv8-validator";
import { isSchemaObjectValue } from "@sjsf/form/core";
import { pathToId, type FormValueValidator } from "@sjsf/form";

class StarError {}

export function createValidator(idPrefix: string) {
  const validator = createFormValidator({ idPrefix });
  return {
    ...validator,
    validateFormValue(rootSchema, formValue) {
      const errors = validator.validateFormValue(rootSchema, formValue);
      return isSchemaObjectValue(formValue) && !formValue["star"]
        ? [
            ...errors,
            {
              instanceId: pathToId(["star"], { idPrefix }),
              propertyTitle: "Star",
              message: "That's okay, but I would appreciate your support!",
              error: new StarError(),
            },
          ]
        : errors;
    },
  } satisfies FormValueValidator<ErrorObject | StarError>;
}

This theme is not affiliated with, endorsed by, or sponsored by " Skeleton" brand.

npm

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

yarn

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

pnpm

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

bun

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

Skeleton v3 theme setup

Usage

Form.svelte

<script lang="ts">
  import { BasicForm, createForm } from "@sjsf/form";
  import { resolver } from "@sjsf/form/resolvers/basic";
  import { translation } from "@sjsf/form/translations/en";
  import { theme } from "@sjsf/skeleton3-theme";
  import "@sjsf/skeleton3-theme/extra-widgets/textarea-include";

  import { createAstro } from "@/astro.svelte";

  import { schema, uiSchema, initialValue } from "./_schema";
  import { createValidator } from "./_validator";
  import { onSubmit } from "./_on-submit";

  const idPrefix = "skeleton";
  const validator = createValidator(idPrefix);
  const form = createForm({
    idPrefix,
    validator,
    resolver,
    theme,
    initialValue,
    schema,
    uiSchema,
    translation,
    onSubmit,
  });
  const astro = createAstro();
</script>

<BasicForm
  {form}
  class="flex flex-col gap-4 {astro.darkOrLight}"
  style="margin-bottom: 1rem;"
  data-theme="cerberus"
/>

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

_schema.ts

import type { Schema, UiSchemaRoot } from "@sjsf/form";

export const schema: Schema = {
  title: "A registration form",
  description: "A simple form example.",
  type: "object",
  required: ["firstName", "lastName"],
  properties: {
    firstName: {
      type: "string",
      title: "First name",
      default: "Chuck",
    },
    lastName: {
      type: "string",
      title: "Last name",
    },
    age: {
      type: "integer",
      title: "Age",
    },
    bio: {
      type: "string",
      title: "Bio",
    },
    password: {
      type: "string",
      title: "Password",
      minLength: 3,
    },
    telephone: {
      type: "string",
      title: "Telephone",
      minLength: 10,
    },
    star: {
      type: "boolean",
      title: "Star",
    },
  },
};

export const uiSchema: UiSchemaRoot = {
  firstName: {
    "ui:options": {
      text: {
        autocomplete: "family-name",
      },
      flowbiteText: {
        autocomplete: "family-name",
      },
    },
  },
  lastName: {
    "ui:options": {
      text: {
        autocomplete: "given-name",
      },
      flowbiteText: {
        autocomplete: "given-name",
      },
    },
  },
  age: {
    "ui:options": {
      title: "Age of person",
      description: "(earthian year)",
    },
  },
  bio: {
    "ui:components": {
      textWidget: "textareaWidget",
    },
  },
  password: {
    "ui:options": {
      help: "Hint: Make it strong!",
      text: {
        type: "password",
      },
      flowbiteText: {
        type: "password",
      },
    },
  },
  telephone: {
    "ui:options": {
      text: {
        type: "tel",
      },
      flowbiteText: {
        type: "tel",
      },
    },
  },
  star: {
    "ui:options": {
      title: "Have you starred this project yet?",
    },
  },
};

export const initialValue = {
  lastName: "Norris",
  age: 75,
  bio: "Roundhouse kicking asses since 1940",
  password: "noneed",
  telephone: "1-800-KICKASS",
};

_validator.ts

import type { ErrorObject } from "ajv";
import { createFormValidator } from "@sjsf/ajv8-validator";
import { isSchemaObjectValue } from "@sjsf/form/core";
import { pathToId, type FormValueValidator } from "@sjsf/form";

class StarError {}

export function createValidator(idPrefix: string) {
  const validator = createFormValidator({ idPrefix });
  return {
    ...validator,
    validateFormValue(rootSchema, formValue) {
      const errors = validator.validateFormValue(rootSchema, formValue);
      return isSchemaObjectValue(formValue) && !formValue["star"]
        ? [
            ...errors,
            {
              instanceId: pathToId(["star"], { idPrefix }),
              propertyTitle: "Star",
              message: "That's okay, but I would appreciate your support!",
              error: new StarError(),
            },
          ]
        : errors;
    },
  } satisfies FormValueValidator<ErrorObject | StarError>;
}

This theme is not affiliated with, endorsed by, or sponsored by " shadcn-svelte" brand.

npm

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

yarn

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

pnpm

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

bun

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

shadcn-svelte theme setup

Usage

Form.svelte

<script lang="ts">
  import { BasicForm, createForm } from "@sjsf/form";
  import { resolver } from "@sjsf/form/resolvers/basic";
  import { translation } from "@sjsf/form/translations/en";
  import { theme, setThemeContext } from "@sjsf/shadcn4-theme";
  import * as components from "@sjsf/shadcn4-theme/new-york";
  import "@sjsf/shadcn4-theme/extra-widgets/textarea-include";

  import { createAstro } from "@/astro.svelte";

  import { schema, uiSchema, initialValue } from "./_schema";
  import { createValidator } from "./_validator";
  import { onSubmit } from "./_on-submit";

  const idPrefix = "shadcn";
  const validator = createValidator(idPrefix);
  const form = createForm({
    idPrefix,
    validator,
    resolver,
    theme,
    initialValue,
    schema,
    uiSchema,
    translation,
    onSubmit,
  });
  const astro = createAstro();

  setThemeContext({ components });
</script>

<BasicForm {form} class="flex flex-col gap-4 {astro.darkOrLight}" />

<pre style="padding-top: 1rem;">{JSON.stringify(form.value, null, 2)}</pre>

_schema.ts

import type { Schema, UiSchemaRoot } from "@sjsf/form";

export const schema: Schema = {
  title: "A registration form",
  description: "A simple form example.",
  type: "object",
  required: ["firstName", "lastName"],
  properties: {
    firstName: {
      type: "string",
      title: "First name",
      default: "Chuck",
    },
    lastName: {
      type: "string",
      title: "Last name",
    },
    age: {
      type: "integer",
      title: "Age",
    },
    bio: {
      type: "string",
      title: "Bio",
    },
    password: {
      type: "string",
      title: "Password",
      minLength: 3,
    },
    telephone: {
      type: "string",
      title: "Telephone",
      minLength: 10,
    },
    star: {
      type: "boolean",
      title: "Star",
    },
  },
};

export const uiSchema: UiSchemaRoot = {
  firstName: {
    "ui:options": {
      text: {
        autocomplete: "family-name",
      },
      flowbiteText: {
        autocomplete: "family-name",
      },
    },
  },
  lastName: {
    "ui:options": {
      text: {
        autocomplete: "given-name",
      },
      flowbiteText: {
        autocomplete: "given-name",
      },
    },
  },
  age: {
    "ui:options": {
      title: "Age of person",
      description: "(earthian year)",
    },
  },
  bio: {
    "ui:components": {
      textWidget: "textareaWidget",
    },
  },
  password: {
    "ui:options": {
      help: "Hint: Make it strong!",
      text: {
        type: "password",
      },
      flowbiteText: {
        type: "password",
      },
    },
  },
  telephone: {
    "ui:options": {
      text: {
        type: "tel",
      },
      flowbiteText: {
        type: "tel",
      },
    },
  },
  star: {
    "ui:options": {
      title: "Have you starred this project yet?",
    },
  },
};

export const initialValue = {
  lastName: "Norris",
  age: 75,
  bio: "Roundhouse kicking asses since 1940",
  password: "noneed",
  telephone: "1-800-KICKASS",
};

_validator.ts

import type { ErrorObject } from "ajv";
import { createFormValidator } from "@sjsf/ajv8-validator";
import { isSchemaObjectValue } from "@sjsf/form/core";
import { pathToId, type FormValueValidator } from "@sjsf/form";

class StarError {}

export function createValidator(idPrefix: string) {
  const validator = createFormValidator({ idPrefix });
  return {
    ...validator,
    validateFormValue(rootSchema, formValue) {
      const errors = validator.validateFormValue(rootSchema, formValue);
      return isSchemaObjectValue(formValue) && !formValue["star"]
        ? [
            ...errors,
            {
              instanceId: pathToId(["star"], { idPrefix }),
              propertyTitle: "Star",
              message: "That's okay, but I would appreciate your support!",
              error: new StarError(),
            },
          ]
        : errors;
    },
  } satisfies FormValueValidator<ErrorObject | StarError>;
}

License

This project includes modifications of code from react-jsonschema-form, which is licensed under the Apache License, Version 2.0. The rest of the project is under the MIT license.