https://github.com/ishan-im/json-ui
JSON Schema to UI
https://github.com/ishan-im/json-ui
json-ui-schema reactjs tailwindcss typescript
Last synced: 10 months ago
JSON representation
JSON Schema to UI
- Host: GitHub
- URL: https://github.com/ishan-im/json-ui
- Owner: ishan-im
- Created: 2023-12-26T05:23:53.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-26T06:28:54.000Z (about 2 years ago)
- Last Synced: 2025-01-28T04:29:00.863Z (12 months ago)
- Topics: json-ui-schema, reactjs, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://json-to-ui.vercel.app/
- Size: 208 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
## Table of Contents
- [Tech Stack](#tech-stack)
- [File and Folder Structure](#file-and-folder-structure)
- [Screenshots](#screenshots)
# [Tech Stack](#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](#file-and-folder-structure)
```plaintext
.
├── 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 ⛓️](https://json-to-ui.vercel.app/)
# [Screenshots 📷 & How to Use 🛠️](#screenshots)
**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](https://gist.github.com/ishan-im/314116a3ea1e08baca1cc4b416909f70)
**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](https://gist.github.com/ishan-im/b7c205d0aaa251f53bd704789d34e76e)
