@sjsf/form

Svelte 5 library for creating forms based on JSON schema. Unofficial port of react-jsonschema-form.

• Documentation
• Playground

Installation

Install the library, basic theme and ajv for validation.

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

Usage

1<script lang="ts">
2  import { createForm, BasicForm, type Schema } from '@sjsf/form';
3  import { resolver } from '@sjsf/form/resolvers/basic';
4  import { translation } from '@sjsf/form/translations/en';
5  import { theme } from '@sjsf/basic-theme';
6  import { createFormValidator } from "@sjsf/ajv8-validator";
7
8  const validator = createFormValidator();
9
10  const schema: Schema = {
11    title: 'Tasks',
12    type: 'array',
13    items: {
14      type: 'object',
15      properties: {
16        name: {
17          type: 'string',
18          title: 'Name',
19        },
20        description: {
21          type: 'string',
22          title: 'Description',
23        },
24      },
25      required: ["name"]
26    },
27  }
28
29  const form = createForm({
30    theme,
31    schema,
32    resolver
33    validator,
34    translation,
35    onSubmit: console.log
36  })
37</script>
38
39<BasicForm {form} />

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.

See LICENSE-MIT and LICENSE-APACHE for details.

See also

• Other JSON Schema to Web UI tools
• Converting JSON to table
• Simple build automation tool - mk