svelte-jsonschema-form

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

• Documentation
• Playground

Installation

Install the library and ajv for validation.

npm install @sjsf/form @sjsf/ajv8-validator ajv@8

Usage

<script lang="ts">
  import { useForm2, SimpleForm, type Schema } from '@sjsf/form';
  import { translation } from '@sjsf/form/translations/en';
  import { theme } from '@sjsf/form/basic-theme';
  import { createValidator } from "@sjsf/ajv8-validator";

  const validator = createValidator();

  const schema: Schema = {
    type: 'object',
    properties: {
      name: {
        type: 'string',
        title: 'Name',
      },
      description: {
        type: 'string',
        title: 'Description',
      },
    },
    required: ["name"]
  }

  const form = useForm2({
    ...theme,
    schema,
    validator,
    translation,
    onSubmit: console.log,
  })
</script>

<SimpleForm {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