{"id":24874528,"url":"https://github.com/glaucopater/json2jsx","last_synced_at":"2025-10-17T10:06:31.085Z","repository":{"id":34199071,"uuid":"171240930","full_name":"glaucopater/json2jsx","owner":"glaucopater","description":"A node js library to transform json content into a set of  react components ","archived":false,"fork":false,"pushed_at":"2024-08-30T14:40:26.000Z","size":945,"stargazers_count":2,"open_issues_count":7,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-17T14:12:11.951Z","etag":null,"topics":["bootstrap","javascript","json","jsx","reactjs","viewmodel"],"latest_commit_sha":null,"homepage":"","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/glaucopater.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,"roadmap":null,"authors":null}},"created_at":"2019-02-18T08:08:01.000Z","updated_at":"2023-04-26T14:45:53.000Z","dependencies_parsed_at":"2024-01-09T16:56:23.996Z","dependency_job_id":"d7752dad-af20-4420-92d5-55b9352d87ff","html_url":"https://github.com/glaucopater/json2jsx","commit_stats":{"total_commits":102,"total_committers":4,"mean_commits":25.5,"dds":0.6764705882352942,"last_synced_commit":"7f648e671d500f34ac1bf6ac245eef23394e7fb2"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glaucopater%2Fjson2jsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glaucopater%2Fjson2jsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glaucopater%2Fjson2jsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glaucopater%2Fjson2jsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glaucopater","download_url":"https://codeload.github.com/glaucopater/json2jsx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236630770,"owners_count":19180095,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["bootstrap","javascript","json","jsx","reactjs","viewmodel"],"created_at":"2025-02-01T07:21:21.231Z","updated_at":"2025-10-15T18:31:17.654Z","avatar_url":"https://github.com/glaucopater.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Json2jsx\n\nA Node Js library that transforms a json view model (a plain .json file) into a set of statefull or stateless components.\n\n# How to use it\n\n## Step 1:\n\nCreate an empty project for React JS (for example using [Create React App](https://github.com/facebook/) )\n\nor\n\nCreate a new sandbox in [Codesandbox](https://codesandbox.io/)  \n\n## Step 2:\n\nCreate or download any json file (at the bottom of this readme you can find different examples).\n\ni.e nasa.open.api.json\n[nasa.open.api.json](https://raw.githubusercontent.com/glaucopater/json2jsx/master/json_samples/nasa.open.api.json)\n\n## Step 3:\n\nRun json2jsx passing this json file as a parameter. This will create a folder containing any matching React component(s) according to the json structure.\n\ni.e. \njson2jsx .\\json_samples\\nasa.open.api.json\n\n## Step 4:\n\nEdit the default index.js pointing to the new created App.js (the root component default filename, that can be changed modifying the options).\nAt this point you can already run npm start and see the result on your local node web server (usually running on localhost, port 3000)\n\n## Step 5 (optional):\n\nThis step is totally optional but show the power of this tool.\nEdit the previous index.js file passing the content of the json file as a prop:\ni.e\n\n\u003cApp {...require(\"./nasa.open.api.json\")} /\u003e\n\nSave and go back to the browser to check the difference!\n\n![Tutorial Step 5](/tutorial/json2jsx_tutorial_step_5.jpg)\n\n## Step 6 (optional)\n\nAt the moment the tool is agnostic respect to datatype and tag element, but this just looking at the page it is very easy to adjust any component or props.\nI.e changing the HdUrl and url the UI becomes:\n\n![Tutorial Step 6](/tutorial/json2jsx_tutorial_step_6.jpg)\n\n## Note about the styling\n\nThere is small CSS that will show the structure of the components and subcomponents.\n\n# Abstract and heuristic assumption (maybe boring part...)\n\nIn every project or prototype using React JS I found, a json structure is always present.\nGenerally the mapping of the view model is not 100% reflected into the UI, but many parts of the structures are.\n\nI.e. if inside a json file there is an array of objects, it is very likely that on UI side there will be a collection of sub components.\n\nJson --\u003e Jsx file(s) with same structure found inside the Json\n\n# Command line usage\n\njson2jsx data.json\n\nThis will create a folder structure inside the working directory as follows:\n\n- /output/%datetime%\\_%data%/App.jsx\n- /output/%datetime%\\_%data%/Component1/Component1.jsx\n- /output/%datetime%\\_%data%/Component2/Component2.jsx\n- /output/%datetime%\\_%data%/Component3/SubComponent1/SubComponent1.jsx\n\nEvery state-full react component (.jsx files) will be generated according to the existing template:\n\nFor a json with this structure:\n\n\"game_indices\": [{\n\"game_index\": 132,\n\"version\": {\n\"name\": \"white-2\",\n\"url\": \"https://pokeapi.co/api/v2/version/22/\"\n}\n}\n\nThe output component will be:\n\n```javascript\nimport React, { Component } from \"react\";\n\nexport default class Game_indices extends Component {\n  componentDidMount() {\n    console.log(this.props);\n  }\n  render() {\n    return \u003cdiv className=\"Game_indices\"\u003e\u003c/div\u003e;\n  }\n}\n```\n\nor for a json with this structure\n\n```javascript\n{\n    \"sample\": {\n      \"propertyA\": \"string\",\n      \"propertyB\": [\n        1,\n        2,\n        3\n      ],\n      \"propertyC\": {\n        \"subProperty1\": 123,\n        \"subProperty2\": \"abc\"\n      }\n    }\n  }\n```\n\nThe output component will be:\n\n```javascript\nimport React, { Component } from \"react\";\nimport PropertyC from \"./PropertyC/PropertyC\";\nexport default class Sample extends Component {\n  componentDidMount() {\n    console.log(this.props);\n  }\n  render() {\n    return (\n      \u003cdiv className=\"Sample\"\u003e\n        \u003cPropertyC /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n# Caveat\n\nAt the moment input file(s) must have .json extension otherwise this will raise an error.\n\n# Config\n\nDefault configurations are the following ones:\n\n- outputDir (default \"./output\").\n  The folder used for the generated file, it needs to be writeable.\n\n- templatesFolder (default: \"./react-templates\").\n  The folder containing the template used by the library itself.\n\n- silentMode (default: true).\n  Show console message if set to false\n\n- defaultComponentType (default: \"statefull\").\n  It can be \"statefull\" or \"functional\".\n\n- defaultRootComponentName (default: \"App\").\n  The root component filename.\n\n- defaultFolderPrefix: (default: \"currentdate\")\n  The prefix used for the name of the main folder. With \"currentdate\" the folder will be prefixed with the current date\n\n- cleanUpTestOutput: (default: true)\n  Clean unit tests generated folders and files\n\n# Test\n\n- yarn test\n\nThis will launch the test suite\n\nI have included also some sample json files in order to test different scenarios.\nThey are stored inside the module folder (node_modules/json2jsx/json_samples/)\n\nThe sources of this json are:\n\n- [NASA Open API](https://api.nasa.gov/#getting-started)\n- [The Star Wars API](https://swapi.co/)\n- [Game of Thrones API](https://anapioficeandfire.com)\n- [Pokemon API](https://pokeapi.co/api/v2/pokemon/ditto)\n- [ISS Position API](http://api.open-notify.org/iss-now.json)\n\nYou can find other APIs here:\n\n- https://shkspr.mobi/blog/2016/05/easy-apis-without-authentication\n- https://www.diycode.cc/projects/toddmotto/public-apis\n\nThanks to\n[andrea falzetti](http://andreafalzetti.github.io/blog/2016/10/22/render-es6-javascript-template-literals-contained-variable.html)\nfor letting me skip the usage of eval/new Function\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglaucopater%2Fjson2jsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglaucopater%2Fjson2jsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglaucopater%2Fjson2jsx/lists"}