https://github.com/strixrox/json-form-generator
A responsive Next.js/React.js app that dynamically generates interactive forms according to JSON input. Supports modern form features like tabs, toggle switches, and conditional rendering.
https://github.com/strixrox/json-form-generator
form generator nextjs react tailwindcss
Last synced: about 2 months ago
JSON representation
A responsive Next.js/React.js app that dynamically generates interactive forms according to JSON input. Supports modern form features like tabs, toggle switches, and conditional rendering.
- Host: GitHub
- URL: https://github.com/strixrox/json-form-generator
- Owner: StrixROX
- Created: 2022-12-22T15:14:46.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-01T20:44:39.000Z (over 2 years ago)
- Last Synced: 2025-03-28T21:18:09.917Z (about 1 year ago)
- Topics: form, generator, nextjs, react, tailwindcss
- Language: JavaScript
- Homepage: https://json-form-generator.vercel.app
- Size: 114 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A responsive Next.js app that generates dynamic forms from JSON UI schemas
## How to use
To clone and run this application, you will need the following programs installed on your system:
- [Git](https://git-scm.com/) (v2.25.1 used for this project)
- [Node.js](https://nodejs.org/en/) (v16.15.1 used for this project)
```bash
# clone the repository
$ git clone https://github.com/StrixROX/JSON-Form-Generator.git
# go into the repository
$ cd JSON-Form-Generator
# install dependencies using either
$ npm install # OR yarn install
# start the development server
$ npm run dev # OR yarn run dev
```
The app should now be accessible by opening https://localhost:3000 (unless stated otherwise in the terminal output) in your browser.
NOTE: There is only one route `/` in the app. This is a single page application (SPA).
## Building
```bash
# creates an optimized production build of your application
$ npm run build # OR yarn run build
# run the built app
$ npm run start
```
## Usage
### First Run
On the first run, the app will look like this
### Entering schema
On the left side, you can enter the JSON schema for the form and it will be rendered on the right side as you type
Click on the magic wand `🪄` icon to prettify the input JSON
### Form Preview
Form is rendered on the right as you type the schema.
NOTE: The `Reset` and `Submit` buttons appear automatically and don't need to be specified in the schema.
### Form Buttons
Click on the `Reset` button to reset the form to its default state as specified in the schema.
Clicking on the `Submit` button will display the data collected by the form on the right side.
## Technologies Used
This project was made using
- Next.js v13 ([Docs](https://nextjs.org/docs))
- React.js v18 ([Docs](https://reactjs.org/docs/getting-started.html))
- Tailwind v3 ([Docs](https://tailwindcss.com/docs/))
- Tailwind Scrollbar ([Repo](https://github.com/adoxography/tailwind-scrollbar))
- UI Components inspired by Flowbite v3 ([Docs](https://flowbite.com/docs/))
## More Information
For details on supported form elements and respective schema definitions, check out the [Wiki](https://github.com/StrixROX/Frontend-Assignment/wiki).
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
Please report any bugs in [Issues](https://github.com/StrixROX/Frontend-Assignment/issues)