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.
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