/json-form

Primary LanguageJavaScript

JSON Schema Form Generator

Overview

This project is a React application that generates dynamic forms based on provided JSON Schemas. It allows users to create forms that others can fill out without needing to understand the underlying schema or code. After filling out the form, users can easily export their responses as JSON data, which can be sent back to the form creator or used elsewhere.

DEMO here.

Features

  • Dynamic Form Creation: Generate interactive forms from any valid JSON Schema.
  • Easy Sharing: Send the form link to anyone; no installation or setup required on the user's end.
  • User-Friendly Interface: Simplified form filling experience with validation and error handling.
  • JSON Data Export: Users can export their filled form data as JSON for easy sharing or processing.
  • Data Restoration: Ability to restore form data from a JSON input, allowing users to resume or edit previous entries.

Getting Started

Prerequisites

  • Node.js and npm: Ensure you have Node.js and npm installed. You can download them from nodejs.org.

Installation

  1. Clone the Repository:

    git clone https://github.com/KevinWang15/json-form.git
    cd json-form
  2. Install Dependencies:

    npm install

Running the Application

Start the development server:

npm start

Open your browser and navigate to http://localhost:5173 to view the application.

Usage

Generating and Sharing a Form

  1. Prepare a JSON Schema:

    • Create or obtain a valid JSON Schema that defines the structure of the form you want to generate.
  2. Encode the Schema:

    • Run the following script

      node generateFormUrl.mjs ./your-json-schema.json
  3. Share the Form URL:

    • Send the generated formUrl to anyone who needs to fill out the form.

License

This project is licensed under the MIT License.