x0k/svelte-jsonschema-form/sjsf-form-setup

# Core package
pnpm add @sjsf/form
 
# Theme (choose one, e.g. shadcn4 or daisyui5 or basic)
pnpm add @sjsf/shadcn4-theme bits-ui clsx tailwind-merge
 
# Validator (Ajv v8 recommended for Draft-07)
pnpm add @sjsf/ajv8-validator ajv ajv-formats

// src/lib/sjsf/defaults.ts
export { resolver } from "@sjsf/form/resolvers/basic";
export { theme } from "@sjsf/shadcn4-theme"; // Or @sjsf/basic-theme, @sjsf/daisyui5-theme, etc.
export { translation } from "@sjsf/form/translations/en";
export { createFormMerger as merger } from "@sjsf/form/mergers/modern";
export { createFormValidator as validator } from "@sjsf/ajv8-validator";
export { createFormIdBuilder as idBuilder } from "@sjsf/form/id-builders/modern";

<script lang="ts">
  import { createForm, BasicForm, type Schema } from "@sjsf/form";
  import * as defaults from "$lib/sjsf/defaults";
 
  const schema = {
    type: "object",
    title: "User Profile",
    properties: {
      username: { type: "string", title: "Username", minLength: 3 },
      email: { type: "string", title: "Email", format: "email" },
      age: { type: "integer", title: "Age", minimum: 18 },
    },
    required: ["username", "email"],
  } as const satisfies Schema;
 
  const form = createForm({
    ...defaults,
    schema,
    onSubmit(data, event) {
      console.log("Validated form submission:", data);
    },
    onSubmitError(result, event, form) {
      console.error("Submission failed validation:", result);
    },
  });
</script>
 
<BasicForm {form} />

<script lang="ts">
  import { SimpleForm } from "@sjsf/form";
  import * as defaults from "$lib/sjsf/defaults";
</script>
 
<SimpleForm {...defaults} {schema} onSubmit={(data) => console.log(data)} />

<script lang="ts">
  import { createForm, BasicForm, type Schema } from "@sjsf/form";
  import * as defaults from "$lib/sjsf/defaults";
 
  const initial = { username: "octocat" };
  let data = $state(initial);
 
  const form = createForm({
    ...defaults,
    schema,
    // Bind tuple: [getter, setter]
    value: [() => data, (v) => (data = v)],
    onSubmit(val) {
      console.log("Submitted:", val);
    },
  });
</script>
 
<BasicForm {form} />