JSON Schema Form Render

A powerful and flexible form builder based on JSON Schema

Installation Usage Examples Live Demo Documentation
View on GitHub

Installation

Add the component to your HTML using a CDN:

<script type="module" src="https://unpkg.com/json-schema-form-render@latest/dist/form-builder.js"></script>

Or install via npm:

npm install json-schema-form-render

Usage Methods

Using Schema Attribute

Define the schema directly in the HTML:

<form-builder
    schema='{
        "fields": [
            {
                "type": "text",
                "name": "username",
                "label": "Username",
                "required": true
            }
        ]
    }'
></form-builder>

Using JavaScript Object

Set the schema using JavaScript:

const schema = {
    fields: [
        {
            type: "text",
            name: "username",
            label: "Username",
            required: true
        }
    ]
};

document.getElementById('form-builder')
    .setAttribute('schema', JSON.stringify(schema));

Using External JSON File

Load the schema from an external file:

<form-builder schema-url="schema.json"></form-builder>

Features & Examples

Multiple Input Types

Support for text, email, password, select, radio, checkbox, date, color, file, and more.

Custom Styling

Customize the appearance with theme styles and colors.

Validation

Built-in validation with customizable error messages.

Responsive Design

Fully responsive forms that work on all devices.

Live Demo

Try out the form builder with different themes and configurations:

Form Submission Data

Documentation

Loading documentation...