React Dynamic Form Renderer from JSON 🚀

A React application that dynamically renders forms based on a provided UI schema. Built with React, TypeScript, and Tailwind CSS.

Tech Stack

React: A JavaScript library for building user interfaces.
TypeScript: A superset of JavaScript that adds static typing to the language.
Tailwind CSS: A utility-first CSS framework for building modern designs.

File and Folder Structure

.
├── public
├── src
│   ├── components
│   │   ├── elements
│   │   │   ├── Input.tsx
│   │   │   ├── Radio.tsx
│   │   │   ├── Select.tsx
│   │   │   ├── Switch.tsx
│   │   │   └── Toggle.tsx
│   │   ├── ElementRenderer.tsx
│   │   ├── ToolTip.tsx
│   │   └── UiComponents.tsx
│   ├── context
│   │   └── Provider.tsx  
│   ├── types
│   │   ├── component.ts
│   │   └── form.ts
│   ├── utils
│   │   └── parse-label.ts
│   ├── App.css
│   ├── App.tsx
│   └── index.tsx 
│  
│   
├── .gitignore
├── tailwind.config.js
├── package.json
└── README.md

Deployed Link 🌐

Link to Project ⛓️

Screenshots 📷 & How to Use 🛠️

Provide JSON Schema:

Upon accessing the application, you'll see a screen with a text bar on the left side.
In the text bar, paste or provide your JSON schema for the form.

JSON Link

Generate Form:

After providing the JSON schema, press the "Generate Form" button.
On the right side, a form will be dynamically rendered based on the provided schema.

Complete the Form:

The rendered form will contain fields based on the JSON schema.
Fill in the required details using your preferences, for example, choose between Naples Style Pizza and New York Style Pizza.

Submit the Form:

Once you have provided the necessary details, click the "Submit" button.
After submission, a modal will appear displaying the JSON details of your order.

For Pasta Form Choose the JSON

Pasta JSON

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!