svelte-jsonschema-form with Flowbite

Installation

Choose your favorite theme:

Basic DaisyUI Flowbite Skeleton

npm

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

yarn

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

pnpm

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

bun

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

Flowbite theme setup

Usage

Form.svelte

<script lang="ts">
  import { FormBase, getDefaultFormState } from "@sjsf/form";
  import { translation } from "@sjsf/form/translations/en";
  import { theme } from "@sjsf/flowbite-theme";

  import { astroTheme } from "@/theme.svelte";

  import { schema, uiSchema, initialData } from "./_schema";
  import { validator } from "./_validator";

  let value = $state(getDefaultFormState(validator, schema, initialData));

  const astro = astroTheme();
</script>

<FormBase
  class="flex flex-col gap-4 mb-4 {astro.darkOrLight}"
  bind:value
  {...theme}
  {schema}
  {uiSchema}
  {validator}
  {translation}
  onSubmit={console.log}
/>

<pre>{JSON.stringify(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",
      const: true,
    },
  },
};

export const uiSchema: UiSchemaRoot = {
  firstName: {
    "ui:options": {
      input: {
        autocomplete: "family-name",
      },
    },
  },
  lastName: {
    "ui:options": {
      input: {
        autocomplete: "given-name",
      },
    },
  },
  age: {
    "ui:options": {
      title: "Age of person",
      description: "(earthian year)",
    },
  },
  bio: {
    "ui:widget": "textarea",
  },
  password: {
    "ui:options": {
      help: "Hint: Make it strong!",
      input: {
        type: "password",
      },
    },
  },
  telephone: {
    "ui:options": {
      input: {
        type: "tel",
      },
    },
  },
  star: {
    "ui:options": {
      title: "Does this library deserve a star?",
    },
  },
};

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

_validator.ts

import Ajv, { type ErrorObject } from "ajv";
import {
  AjvValidator,
  addFormComponents,
  DEFAULT_AJV_CONFIG,
} from "@sjsf/ajv8-validator";
import type { Schema, SchemaValue, ValidationError } from "@sjsf/form";

class StarValidator extends AjvValidator {
  validateFormData(
    schema: Schema,
    formData: SchemaValue | undefined
  ): ValidationError<ErrorObject>[] {
    return super.validateFormData(schema, formData).map((error) =>
      error.instanceId !== "root_star"
        ? error
        : {
            ...error,
            message: "I will try my best!",
          }
    );
  }
}

export const validator = new StarValidator(
  addFormComponents(new Ajv(DEFAULT_AJV_CONFIG))
);

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.