Svelte Schemaform

xpluscal
9

A simple Svelte component that automatically builds a Form UI from a JSON schema.

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

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` or `grid`

Additional Features

Dark Mode

ToDo

Form Validation
Custom Styling
Image Upload via IPFS

Contribution

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

Top categories