Svelte SchemaForm

A simple Svelte component that automatically builds a Form UI from a JSON schema. Rewrite / Svelte port of react-jsonschema-form

• Why
• Demo
• Installation
• Basic Usage
• Advanced Usage
• Supported Field Types (schema slug)
• Options
• Additional Features
• ToDo
• Contribution

Why

Building and maintaining tons of forms is a mess and error-prone. Having a schema/json based approach to generating forms speeds up that process tremendously.

Sponsor Svelte SchemaForm

If you rely on Svelte SchemaForm, please consider supporting it.

Demo

Visit Demo

Installation

npm add svelte-schemaform

Basic Usage

<script>
  import {SchemaForm} from 'svelte-schemaform'

  let schema = {
    "title": {
      "label" : "Title",
      "type": "text"
    },
    "description": {
      "label" : "Description",
      "type": "textarea"
    }
  }

  let formData = {
    title: "",
    description: ""
  }

  const handleSubmit = (data) => {
    // Handle Submit here.
  }

  const handleChange = (data) => {
    // Handle Change here.
  }
</script>

<SchemaForm
  {schema}
  {formData}
  onSubmit={handleSubmit}
  onChange={handleChange}
/>

Advanced Usage

SchemaForm supports segmenting and a few other non-documented features. For more complex examples check the src/routes/index.svelte file.

Supported Field Types (schema slug)

• Text (text)
• TextArea (textarea)
• Number (number)
• Array (array)
• Object (object)
• ObjectArray (object_array)

Options

Additional Features

• Dark Mode

ToDo

• Form Validation
• Custom Styling
• Image Upload via IPFS

Contribution

Feel free to suggest / PR. This grows best together.