Svelte SchemaForm

A simple Svelte component capable of building HTML forms out of 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 /routes/index.svelte file.

Supported Field Types (schema slug)

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

Options

| Parameter | Description | Example | | ------------- | ------------- | -------------- | | schema | The Schema to apply to the formData | {title: {}} | formData | Data Object to be handled | {title: ""} | onSubmit | Callback function to be called when form is submitted. | onSubmit={(data) => doData(data)} | onChange | Callback function to be called when form data changes. | onChange={(data) => handleChange(data)} | layout | Display fields top to bottom (parameter not present) or as a 3 column grid. | undefined|"grid"

Additional Features

• [x] Dark Mode

ToDo

• [ ] Form Validation
• [ ] Custom Styling
• [-] Image Upload via IPFS
• [ ] Custom Styling

Contribution

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