A React application that dynamically renders forms based on a provided UI schema. Built with React, TypeScript, and Tailwind CSS.
- 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.
.
├── 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
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.
![Screenshot 2023-12-26 110101](https://private-user-images.githubusercontent.com/76674591/292812520-2c3ffe24-6cb4-4ea5-b793-bd9d82207346.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIxMDg3MDQsIm5iZiI6MTcyMjEwODQwNCwicGF0aCI6Ii83NjY3NDU5MS8yOTI4MTI1MjAtMmMzZmZlMjQtNmNiNC00ZWE1LWI3OTMtYmQ5ZDgyMjA3MzQ2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI3VDE5MjY0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWVhMDhhZDkxODg3N2MyNDYyOTZhMDBiMDY3YzA0MWZmMWM2OGE4NTE3OWJhYWRmOGFkY2I5Zjc0OWJiMzUwMDImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.xRsQOlyQRAQJFl9p7clKoIqzlH-_8KT2yJLkWoR6D5s)
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.
![Screenshot 2023-12-26 110149](https://private-user-images.githubusercontent.com/76674591/292812625-d52709f0-00e4-4b30-9fc1-74e6929f0876.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIxMDg3MDQsIm5iZiI6MTcyMjEwODQwNCwicGF0aCI6Ii83NjY3NDU5MS8yOTI4MTI2MjUtZDUyNzA5ZjAtMDBlNC00YjMwLTlmYzEtNzRlNjkyOWYwODc2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI3VDE5MjY0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWVjNzc3MjM1MTg3ZWE0MzA5YWQzMzI0ZGU3NjVhZDMyNTNlNmM5NzIzZWE2YWFmYTQ3ZDQ5M2ZkY2M0MTMwYTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Jc2DKeS0zYB1H9b-FCUpNTaW9JdWmFBa4InJZYxVJ2A)
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.
![Screenshot 2023-12-26 110259](https://private-user-images.githubusercontent.com/76674591/292812634-055a7f85-13e4-408f-be02-749dab084b22.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIxMDg3MDQsIm5iZiI6MTcyMjEwODQwNCwicGF0aCI6Ii83NjY3NDU5MS8yOTI4MTI2MzQtMDU1YTdmODUtMTNlNC00MDhmLWJlMDItNzQ5ZGFiMDg0YjIyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI3VDE5MjY0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWUxNzJiN2JjNTc2ZjE1ZWU5MGZiN2Q5ODA1YWYyYzY4OTk3NzNkMTZjMzMwNDExYzhjNjEzNTVmYTM2OTFmMDImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.qd3aaIGqvO5mi_3IX_qcpcl890lmZ_i1Rq-onlTRvEc)
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.
![Screenshot 2023-12-26 110327](https://private-user-images.githubusercontent.com/76674591/292812642-5728ea79-a8c1-43db-9346-9f95d7be23c5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIxMDg3MDQsIm5iZiI6MTcyMjEwODQwNCwicGF0aCI6Ii83NjY3NDU5MS8yOTI4MTI2NDItNTcyOGVhNzktYThjMS00M2RiLTkzNDYtOWY5NWQ3YmUyM2M1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI3VDE5MjY0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTVkNzMzZGVmZWFiNjg3YjA5YWIyY2JlZDhhMzRmNGE1OTFmYTg1MTQ0MmUzZWY3NGMxMjM1YjhlOGYxYmJiNzUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.-bCHO0Bqc6xbxJ_tkLfFdciDaUkvFd_bMQXCW6p4djU)
For Pasta Form Choose the JSON
![Screenshot 2023-12-26 110419](https://private-user-images.githubusercontent.com/76674591/292812651-f8e46862-8fec-49c0-a00f-010e2dc1c347.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIxMDg3MDQsIm5iZiI6MTcyMjEwODQwNCwicGF0aCI6Ii83NjY3NDU5MS8yOTI4MTI2NTEtZjhlNDY4NjItOGZlYy00OWMwLWEwMGYtMDEwZTJkYzFjMzQ3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI3VDE5MjY0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQwYmE0NTBjYjE0N2JjMDY0YzBkMGZjMTY2ZTFkNjVkYmZiZjllNTlmNWRkZThmOGY5Y2ZhNjI0MTMxZjIwOGYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.fWIdaUUUGrTCGHx95vSUc9nNyedW2LBr7X98RdDQyjE)
![Screenshot 2023-12-26 110441](https://private-user-images.githubusercontent.com/76674591/292812659-a607cc9e-7914-4592-8e30-4e5f5c58799c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIxMDg3MDQsIm5iZiI6MTcyMjEwODQwNCwicGF0aCI6Ii83NjY3NDU5MS8yOTI4MTI2NTktYTYwN2NjOWUtNzkxNC00NTkyLThlMzAtNGU1ZjVjNTg3OTljLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI3VDE5MjY0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTkxMWZkODFiOTMxOGZmMDRhMjA5ZTc4NDQ1NTAzNjRmYzM4ODk1NWJmMWJlMmMwYWRlZTgzYWNiZDEyYmY3NmUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.x2dmRLpJxKqpcsdpkwvLYZp9wR6lHSWPIjdTPxDQt7c)