A responsive Next.js app that generates dynamic forms from JSON UI schemas
To clone and run this application, you will need the following programs installed on your system:
# 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 devThe 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).
# creates an optimized production build of your application
$ npm run build # OR yarn run build
# run the built app
$ npm run startOn the first run, the app will look like this
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 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.
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.
This project was made using
- Next.js v13 (Docs)
- React.js v18 (Docs)
- Tailwind v3 (Docs)
- Tailwind Scrollbar (Repo)
- UI Components inspired by Flowbite v3 (Docs)
For details on supported form elements and respective schema definitions, check out the Wiki.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
Please report any bugs in Issues