{"id":28619683,"url":"https://github.com/jokarz/react-json-form-builder-boilerplate","last_synced_at":"2026-04-15T19:31:39.602Z","repository":{"id":43497978,"uuid":"222058235","full_name":"jokarz/react-json-form-builder-boilerplate","owner":"jokarz","description":"Create simple interdependent form inputs using JSON schema ","archived":false,"fork":false,"pushed_at":"2023-01-04T18:25:29.000Z","size":4130,"stargazers_count":1,"open_issues_count":23,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-02T11:53:53.470Z","etag":null,"topics":["boilerplate","builder","form","javascript","json","react","redux","simple"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jokarz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-16T06:38:12.000Z","updated_at":"2019-12-21T07:11:34.000Z","dependencies_parsed_at":"2023-02-02T19:46:49.362Z","dependency_job_id":null,"html_url":"https://github.com/jokarz/react-json-form-builder-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/jokarz/react-json-form-builder-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jokarz%2Freact-json-form-builder-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jokarz%2Freact-json-form-builder-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jokarz%2Freact-json-form-builder-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jokarz%2Freact-json-form-builder-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jokarz","download_url":"https://codeload.github.com/jokarz/react-json-form-builder-boilerplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jokarz%2Freact-json-form-builder-boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31856897,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"ssl_error","status_checked_at":"2026-04-15T15:24:39.138Z","response_time":63,"last_error":"SSL_read: 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":["boilerplate","builder","form","javascript","json","react","redux","simple"],"created_at":"2025-06-12T04:40:56.834Z","updated_at":"2026-04-15T19:31:39.583Z","avatar_url":"https://github.com/jokarz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple React/Redux/Bootstrap JSON Schema Form Builder Boilerplate\n\nA simple React based boilerplate using Redux for state management of the forms' data, JSON schema for creation of forms and Bootstrap for appearance. Allows for dynamic fields that depend on input of other fields\n\n# Content\n\n1. Getting Started\n2. Schema Structure\n    1. Form\n    2. Fields\n    3. Output\n    4. Parsed JSON\n3. Inputs\n    1. Common properties\n    2. Default values\n    3. Types\n4. State Management\n    1. Structure\n5. Limitations\n\n\n## Getting Started\n\nWith node and npm installed, head on to the command line (at this root directory) and type ``` npm i \u0026\u0026 npm start ``` \nRead on further to understand how the form is populated\n\n## Schema Structure\n\nThe main schema file is located at ``` src/schema/outline.json```.\nIn general this is how the schema looks like:\n```js\n{\n    form:{\n        displayname: \"First Form\"\n        fields:{\n            ...\n        }\n        output:{\n\n        }\n    },\n    anotherForm:{\n        ...\n    }\n}\n```\n### Form\n\nWithin the form,  **displayName** key is required to specify the name of the form in the navbar\n\n### Fields\n\nWithin the fields contains the specification of the different inputs. More about the inputs at the Input Types section\n\n### Output\n\nThis is an optional key that outputs the results of the inputs in the format desired. Alternatively, one can access the data from the inputs via Redux. More on it at the State Management section\n\n### Parsed JSON\n\nThe ```outline.json``` will be parsed and stored at ```src/data/processed/overall.json```. The location and the file name can be changed by editing the path inside the files: ```prep.js```, ```src/App.js``` and ```src/redux/reducers/reducerInput.js```.\n\n## Inputs\n\n### Common properties\n\nRegardless of input types, all of the fields contains\n```\ndisplayName, width, type, dependent, placeholder\n```\n\n**displayName** - Appears on the label of the field (default value is '...')\n\n**width** - The sizing of the field. Grid is based Bootstrap sizing (default value is 12)\n\n**type** -  The types of the input. More on that in the Input Type section (Required)\n\n**dependent** - Whether the input is dependent on another input (default value is null)\n\n**placeholder** - Value to display inside the input when the input is empty (default is '' )\n\n**show** - Determines whether the input should be shown but disabled or hidden when dependent is not null (default value is true)\n\n### Default values\n\nBy default the field values are as such\n```js\n\"displayName\": \"Default\",\n\"width\": 12,\n\"placeholder\": \"...\",\n\"dependent\": null,\n\"show\": true,\n\"type\": \"manual\",\n\"case\": {},\n\"data\": {},\n\"prefix\": \"\",\n\"suffix\": \"\",\n\"regex\": \".*\"\n```\n\n### Types\n\nCurrently there are only 4 input types:\n\n1. Manual\n2. Dropdown\n3. Case\n4. Lookup\n\n#### Manual Input\n\nManual input is a basic input that allows for prefix and suffix. Regex can also be added for input matching. Example \n```js\n\"displayName\": \"Basic Input\",\n\"dependent\": null,\n\"placeholder\": \"Basic Input\",\n\"type\": \"manual\",\n\"regex\": \".*\",\n\"prefix\": \"\",\n\"suffix\": \"\",\n\"width\": 6\n```\n\n\n#### Dropdown Input\n\nDropdown input is a basic input that allows for dropdown with autocomplete functionality \n```js\n\"displayName\": \"Basic Dropdown\",\n\"dependent\": null,\n\"placeholder\": \"Basic Dropdown\",\n\"type\": \"case\",\n\"data\": \"month.json\",\n\"width\": 6\n```\nThe ```month.json``` referenced resides in ```src/data``` and the format for the json should be in simple object key, value pairing.\n```js\n{\n    \"January\": \"Jan\",\n    \"February\": \"Feb\",\n    \"March\": \"Mar\",\n    \"April\": \"Apr\",\n    \"May\": \"May\",\n    \"June\": \"Jun\",\n    \"July\": \"Jul\",\n    \"August\": \"Aug\",\n    \"September\": \"Sep\",\n    \"October\": \"Oct\",\n    \"November\": \"Nov\",\n    \"December\": \"Dec\"\n}\n```\n\n#### Case Input\n\nCase input is an advance input that is dependent on the input value referenced. Think of it as the cases in a switch statement.\n```js\n\"displayName\": \"Advance Case Dropdown\",\n\"dependent\": \"basicDropdown\",\n\"show\": false,\n\"type\": \"case\",\n\"width\": 6,\n\"case\": {\n    \"January\": {\n        \"placeholder\": \"Manual Field\",\n        \"type\": \"manual\",\n        \"regex\": \"[A-Z]*\",\n        \"prefix\": \"L_\",\n        \"suffix\": \"LOL\"\n    },\n    \"February\": {\n        \"placeholder\": \"Dropdown Field\",\n        \"type\": \"dropdown\",\n        \"data\": \"campaigns.json\"\n    }\n}\n```\nThe dependent key is referenced on the target field key while case key is referencing the key of the input. The case input is also able to reference on manual input as well.\n```js\n\"displayName\": \"Advance Case Manual Input\",\n\"width\": 6,\n\"dependent\": \"basicInput\",\n\"type\": \"case\",\n\"case\":{\n    \"abracadabra\": {\n        \"displayName\": \"Month\",\n        \"width\": 6,\n        \"type\": \"dropdown\",\n        \"data\": \"month.json\"\n    },\n    \"hocuspocus\":{\n        \"displayName\": \"Another manual Input\",\n        \"width\": 6,\n        \"type\": \"manual\",\n        \"regex\": \"[A-Z]*\"\n    }\n}\n\n```\nDo note that it supports only manual, dropdown and lookup as inputs within case. It does not support recursive referencing of a greater depth (i.e case field creating another case field...)\n\n#### Lookup Input\n\nLookup input is an advance version of a dropdown that also dependent on the input value referenced. It is similar to case input where you can specify the data based on the dependent input. However, you can also specify what the dropdown content is going to be using a nested JSON object.\n```js\n\"displayName\": \"Weather\",\n\"dependent\": \"basicInput\",\n\"width\": 6,\n\"type\": \"lookup\",\n\"data\": \"season.json\"\n```\n##### Linking up with manual input\nThe lookup input will be usable once the manual input matches the **key** of the JSON data specified in the schema\n\n##### Linking up with a dropdown input\n\nTo link up the input data with the lookup input, the **key** of JSON data on the dropdown input needs to be specified on the JSON data of the lookup input\n```js\n// dropdown input JSON data\n{\n    \"January\": \"Jan\",\n    \"February\": \"Feb\",\n    \"March\": \"Mar\",\n    \"April\": \"Apr\",\n    \"May\": \"May\",\n    ...\n}\n```\n```js\n// lookup input JSON data\n{\n    \"January\": {\n        \"Rainy\": \"rainy\",\n        \"Sunny\": \"sunny\"\n    },\n    \"February\": {\n        \"Rainy\": \"rainy\",\n        \"Sunny\": \"sunny\"\n    },\n    ...\n}\n```\nNote that even with incomplete keys on the lookup side of the JSON data, it is still valid. This means that if the key can't be found, the lookup input would be disabled\n\n## State Management\n\nThis repository uses redux for its centralised state of the inputs. It occupies the data inside ```Input``` of ```globalState.Input```.\n\n### Structure\n\nWhen the fields are created based on the the edits to ```outline.json``` the inputs entered are stored as follows:\n```js\n// Global State \u003e Input \u003e\n{\n    \"Some Platform\":\n        {\n        basicInput: [null, \"Some Entered inputs\"],\n        basicDropdown: [\"January\", \"Jan\"]\n        },\n        ...\n    ...,\n}\n```\n\nThe key \"Some platform\" and the key of the inputs is referenced from each of the form key and the key of the field specified respectively from ```outline.json```. \n\nThe stored value on the other hand, is actually the 2nd item within the array (first item being the key of the data such as from dropdown JSON data, otherwise it is null)\n\n## Limitations\n\n**Simple Form components**\n\nAs of now there are only 2 main type of form component - select and text input. Other field types, such as radio buttons, slider and multiple select could be developed if such need arises. \n\n**Dynamic Fields**\n\nAdvance inputs can only depend on **one** other input (although chaining inputs, one after another is possible).\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjokarz%2Freact-json-form-builder-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjokarz%2Freact-json-form-builder-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjokarz%2Freact-json-form-builder-boilerplate/lists"}