svelte-jsonschema-form

Svelte 5 library for creating forms based on JSON schema.

Installation

Install as a community add-on using the Svelte CLI.

npx sv add @sjsf

pnpx sv add @sjsf

yarn dlx sv add @sjsf

bunx sv add @sjsf

deno x sv add @sjsf

Demo

<script lang="ts">
  import { BasicForm, createForm, getValueSnapshot } from "@sjsf/form";

  import * as defaults from "$lib/sjsf/defaults";

  import * as createUser from "../create-user";

  const form = createForm<createUser.Model>({
    ...defaults,
    ...createUser,
    onSubmit: ({ name }) => window.alert(`Hello, ${name}`),
  });
</script>

<BasicForm {form} />

<pre>{JSON.stringify(getValueSnapshot(form), createUser.withFile, 2)}</pre>

Supported Themes

Basic
- Pico CSS
daisyUI v5
Flowbite Svelte
Skeleton v4
shadcn-svelte
- shadcn-svelte-extras (experimental)
SVAR (experimental)
Beer CSS (experimental)

Supported Validators

Ajv v8
- Precompiled
Zod v4
Valibot
@cfworker/json-schema
@exodus/schemasafe
- Precompiled
Standard Schema
ata-validator (experimental)
- Precompiled (experimental)
@hyperjump/json-schema (experimental)

Integrations

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.