{"id":26767869,"url":"https://github.com/strixrox/json-form-generator","last_synced_at":"2026-05-06T14:31:20.049Z","repository":{"id":129697484,"uuid":"581212896","full_name":"StrixROX/JSON-Form-Generator","owner":"StrixROX","description":"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.","archived":false,"fork":false,"pushed_at":"2023-10-01T20:44:39.000Z","size":117,"stargazers_count":4,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T21:18:09.917Z","etag":null,"topics":["form","generator","nextjs","react","tailwindcss"],"latest_commit_sha":null,"homepage":"https://json-form-generator.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StrixROX.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-12-22T15:14:46.000Z","updated_at":"2024-11-22T16:17:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"71289ee0-915e-4edb-aef0-1ddb2de5b1de","html_url":"https://github.com/StrixROX/JSON-Form-Generator","commit_stats":null,"previous_names":["strixrox/json-form-generator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/StrixROX/JSON-Form-Generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StrixROX%2FJSON-Form-Generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StrixROX%2FJSON-Form-Generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StrixROX%2FJSON-Form-Generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StrixROX%2FJSON-Form-Generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StrixROX","download_url":"https://codeload.github.com/StrixROX/JSON-Form-Generator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StrixROX%2FJSON-Form-Generator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32698086,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-06T08:33:17.875Z","status":"ssl_error","status_checked_at":"2026-05-06T08:33:17.221Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","generator","nextjs","react","tailwindcss"],"created_at":"2025-03-28T21:18:12.664Z","updated_at":"2026-05-06T14:31:19.997Z","avatar_url":"https://github.com/StrixROX.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![image](https://user-images.githubusercontent.com/40167899/209675751-e51bd43b-1ad0-4e7c-a6b0-2658a6077f18.png)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://frontend-assignment-iota.vercel.app/\"\u003e\u003cimg alt=\"Website\" src=\"https://img.shields.io/website?url=https%3A%2F%2Fjson-form-generator.vercel.app%2F\"\u003e\u003c/a\u003e\n  \u003cimg alt=\"GitHub repo size\" src=\"https://img.shields.io/github/repo-size/strixrox/frontend-assignment\"\u003e\n\u003c/p\u003e\n\u003cpre align=\"center\" style=\"font-weight: bold\"\u003eA responsive Next.js app that generates dynamic forms from JSON UI schemas\u003c/pre\u003e\n\n## How to use\nTo clone and run this application, you will need the following programs installed on your system:\n- [Git](https://git-scm.com/) (v2.25.1 used for this project)\n- [Node.js](https://nodejs.org/en/) (v16.15.1 used for this project)\n```bash\n# clone the repository\n$ git clone https://github.com/StrixROX/JSON-Form-Generator.git\n\n# go into the repository\n$ cd JSON-Form-Generator\n\n# install dependencies using either\n$ npm install # OR yarn install\n\n# start the development server\n$ npm run dev # OR yarn run dev\n```\nThe app should now be accessible by opening https://localhost:3000 (unless stated otherwise in the terminal output) in your browser.\n\nNOTE: There is only one route `/` in the app. This is a single page application (SPA).\n\n## Building\n```bash\n# creates an optimized production build of your application\n$ npm run build # OR yarn run build\n\n# run the built app\n$ npm run start\n```\n\n## Usage\n### First Run\nOn the first run, the app will look like this\n![image](https://user-images.githubusercontent.com/40167899/209680308-2c47d24a-e659-4245-8d93-781f7ba3e48b.png)\n\n### Entering schema\nOn the left side, you can enter the JSON schema for the form and it will be rendered on the right side as you type\n\nClick on the magic wand `🪄` icon to prettify the input JSON\n![image](https://user-images.githubusercontent.com/40167899/209682841-38646c18-d933-4580-a028-40a51e8056af.png)\n\n### Form Preview\nForm is rendered on the right as you type the schema.\n![image](https://user-images.githubusercontent.com/40167899/209682154-2a425e57-8f1a-4b7c-9266-0abc4ec08bb0.png)\nNOTE: The `Reset` and `Submit` buttons appear automatically and don't need to be specified in the schema.\n\n### Form Buttons\nClick on the `Reset` button to reset the form to its default state as specified in the schema.\n![image](https://user-images.githubusercontent.com/40167899/209683371-c8055e5a-8523-46d6-91b2-9a1bb56c6831.png)\n\nClicking on the `Submit` button will display the data collected by the form on the right side.\n![image](https://user-images.githubusercontent.com/40167899/209683797-1d3b6fc6-1184-4b59-a0e9-829e635bbcd4.png)\n\n## Technologies Used\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/40167899/209702524-78f41e74-3f1f-4f7a-a32c-9cdfb79a8905.png\" /\u003e\n\u003c/p\u003e\n\nThis project was made using\n- Next.js v13 ([Docs](https://nextjs.org/docs))\n- React.js v18 ([Docs](https://reactjs.org/docs/getting-started.html))\n- Tailwind v3 ([Docs](https://tailwindcss.com/docs/))\n- Tailwind Scrollbar ([Repo](https://github.com/adoxography/tailwind-scrollbar))\n- UI Components inspired by Flowbite v3 ([Docs](https://flowbite.com/docs/))\n\n## More Information\nFor details on supported form elements and respective schema definitions, check out the [Wiki](https://github.com/StrixROX/Frontend-Assignment/wiki).\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nPlease report any bugs in [Issues](https://github.com/StrixROX/Frontend-Assignment/issues)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstrixrox%2Fjson-form-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstrixrox%2Fjson-form-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstrixrox%2Fjson-form-generator/lists"}