x0k/svelte-jsonschema-form/sjsf-sveltekit

pnpm add @sjsf/sveltekit3

// src/routes/posts/new/+page.server.ts
import type { InitialFormData } from "@sjsf/sveltekit3";
import { createAction } from "@sjsf/sveltekit3/server";
import type { Actions, PageServerLoad } from "./$types";
import * as defaults from "$lib/sjsf/defaults";
const schema = {
  type: "object",
  properties: {
    title: { type: "string", title: "Title", minLength: 3 },
    content: { type: "string", title: "Content" },
  },
  required: ["title"],
} as const;
type PostForm = { title: string; content?: string };
export const load: PageServerLoad = async () => {
  return {
    // Key MUST match action name
    postForm: {
      schema,
      initialValue: { title: "Draft", content: "" },
    } satisfies InitialFormData<PostForm>,
  };
};
export const actions: Actions = {
  default: createAction(
    {
      ...defaults,
      schema,
      name: "postForm",
      sendData: true,
    },
    ({ title, content }: PostForm) => {
      // Custom server-side validation error
      if (title.toLowerCase().includes("spam")) {
        return [{ path: ["title"], message: "Spam words not permitted" }];
      }
      // Business logic
      const id = "post-123";
      return { success: true, postId: id };
    }
  ),
};

<!-- src/routes/posts/new/+page.svelte -->
<script lang="ts">
  import { createMeta, SvelteKitForm } from "@sjsf/sveltekit3/client";
  import * as defaults from "$lib/sjsf/defaults";
  import type { ActionData, PageData } from "./$types";
 
  let { data, form }: { data: PageData; form: ActionData } = $props();
 
  // Extract metadata for action 'postForm'
  const meta = createMeta<ActionData, PageData>().postForm;
</script>
 
<SvelteKitForm
  {...defaults}
  {meta}
  refreshAll
  onSuccess={(result) => {
    // Server responded. result.type: "success" | "failure" | "redirect" | "error".
    // "failure" carries fail(400) validation errors in result.data.
  }}
  onFailure={(failure) => {
    // No usable response: request aborted, timed out, or threw.
  }}
  onSubmitError={(result) => {
    // Client-side submit validation failed. Nothing was sent.
  }}
/>