{"id":13422642,"url":"https://github.com/repetere/jsonx","last_synced_at":"2025-04-05T22:06:20.644Z","repository":{"id":38238340,"uuid":"116965835","full_name":"repetere/jsonx","owner":"repetere","description":"JSONX - Create React Elements, JSX and HTML from JSON","archived":false,"fork":false,"pushed_at":"2024-02-14T17:49:16.000Z","size":31005,"stargazers_count":175,"open_issues_count":11,"forks_count":18,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-29T20:09:12.039Z","etag":null,"topics":["html","javascript","json","json-to-html","json-to-js","json-to-jsx","json-to-react","jsontohtml","jsontojsx","jsontoreact","jsx","jsx-renderer","react","react-components","reactjs"],"latest_commit_sha":null,"homepage":"https://repetere.github.io/jsonx/","language":"TypeScript","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/repetere.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-10T14:07:12.000Z","updated_at":"2025-01-22T13:06:31.000Z","dependencies_parsed_at":"2024-06-18T18:41:29.039Z","dependency_job_id":"9a118249-5057-42f1-9217-1d79ba1f23c6","html_url":"https://github.com/repetere/jsonx","commit_stats":{"total_commits":1147,"total_committers":8,"mean_commits":143.375,"dds":"0.31037489102005233","last_synced_commit":"8bb2d9eeb2774e93a9076705cb2678e0e25e9f95"},"previous_names":["repetere/rjx"],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/repetere%2Fjsonx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/repetere%2Fjsonx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/repetere%2Fjsonx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/repetere%2Fjsonx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/repetere","download_url":"https://codeload.github.com/repetere/jsonx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406087,"owners_count":20933803,"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":["html","javascript","json","json-to-html","json-to-js","json-to-jsx","json-to-react","jsontohtml","jsontojsx","jsontoreact","jsx","jsx-renderer","react","react-components","reactjs"],"created_at":"2024-07-30T23:00:49.247Z","updated_at":"2025-04-05T22:06:20.623Z","avatar_url":"https://github.com/repetere.png","language":"TypeScript","readme":"# JSONX\n\n[![Coverage Status](https://coveralls.io/repos/github/repetere/jsonx/badge.svg?branch=main)](https://coveralls.io/github/repetere/jsonx?branch=main) ![Build, Test \u0026 Coverage](https://github.com/repetere/jsonx/workflows/Build,%20Test%20\u0026%20Coverage/badge.svg)\n\n## Description\n\n**JSONX** is a module that creates React Elements, JSX and HTML from JSON.\n\n### Declarative\n\nThe JSONX web module comes with batteries included so you can use JSONX in the browser without transpilers or any additional setup/configuration. The JSONX UMD is ideal for JAMstack Applications.\n\n### Embeddable\n\nJSONX can also be used in existing react applications if you want to dynamically create elements with JSON. This works great for many scenarios when you want to manage your application views and components in a view management system or if you want to dynamically create React elements without using JSX.\n\n### Fully Featured\n\nJSONX supports all of Reacts features including Functional (with Hooks), Class-based, Suspense and Lazy components. JSONX supports JSON objects that implement the JXM (JSONX Markup) Spec.\n\n\n## Installation\n\n```sh\n$ npm i jsonx\n```\n\n### [Full Documentation](https://repetere.github.io/jsonx/)\n\n\n\u003clink id=\"viewx-style-style-0\" rel=\"stylesheet\" type=\"text/css\" href=\"https://unpkg.com/highlight.js@9.18.1/styles/darkula.css\"\u003e\n\n---\n### JSONX Manual\n - [Getting Started](https://repetere.github.io/jsonx/manual/getting-started/index.html)\n - [Using Advanced Props](https://repetere.github.io/jsonx/manual/using-advanced-props/index.html)\n - [External and Custom Components](https://repetere.github.io/jsonx/manual/using-external-and-custom-components/index.html)\n - [Creating React Components and Component Libraries](https://repetere.github.io/jsonx/manual/creating-react-components-and-component-libraries/index.html)\n - [JSONX \u0026 JXM Spec](https://repetere.github.io/jsonx/manual/spec/index.html)\n - [Samples](https://repetere.github.io/jsonx/manual/samples/index.html)\n - [Roadmap](https://repetere.github.io/jsonx/manual/roadmap/index.html)\n - [Full API Docs](https://repetere.github.io/jsonx/)\n---\n\n### Basic Usage\n```javascript\nimport { * as jsonx } from 'jsonx';\nconst example_JXM_JSON = {\n  component:'p',\n  props:{ style:{ color:'blue' } },\n  children:'hello world'\n};\n\n//Rendering React Components\njsonx.getReactElement(example_JXM_JSON); // =\u003e JSX Equivalent: \u003cp style={{color:'blue'}}\u003ehello world\u003c/p\u003e\n\n//Generating HTML strings\njsonx.outputHTML({ jsonx: example_JXM_JSON, }); // =\u003e '\u003cp style=\"color:blue;\"\u003ehello world\u003c/p\u003e'\n\n//Generating JSX strings\njsonx.outputJSX({ jsonx: example_JXM_JSON, }); // =\u003e '\u003cp style={{color:blue,}}\u003ehello world\u003c/p\u003e'\n\n//Rendering HTML Dom with React\njsonx.jsonxRender({ jsonx: example_JXM_JSON, querySelector:'#myApp', });\n// \u003c!DOCTYPE html\u003e\n//  \u003cbody\u003e\n//    \u003cdiv id=\"myApp\"\u003e\n//      \u003cp style=\"color:blue;\"\u003ehello world\u003c/p\u003e\n//    \u003c/div\u003e\n// \u003c/body\u003e\n\n//you can also use the simplified syntax\nconst simpleJXM_JSON = {\n  p:{\n    props:{ style:{ color:'blue' } },\n    children:'hello world'\n  }\n}\n\n//or if you have an element with no props, simply use {type:children}\nconst superSimpleJXM = {\n  ul:[\n    {li:'first!'},\n    {li:'second!'},\n  ]\n}\n```\n\n\n### JXM JSON Spec\n\nJSONX works by using JXM JSON to create react elements. JXM JSON Objects are valid JSON Objects that more or less mimics JSX in JSON notation with a couple of special properties. The properties for JSONX JSON are the arguments passed to [React.createElement](https://reactjs.org/docs/react-api.html#createelement). The only required property is the component (which is passed as the `type` argument)\n\n```javascript\nReact.createElement(\n  type,\n  [props],\n  [...children]\n)\n```\n\nYou can pass React component libraries for additional components, or you own custom components (see [External and Custom Components](https://repetere.github.io/jsonx/manual/using-external-and-custom-components/index.html)\n and [Using Advanced Props](https://repetere.github.io/jsonx/manual/using-advanced-props/index.html) for more details).\n\n\n### Development\n\nNote *Make sure you have typescript installed*\n\n```sh\n$ npm i -g typescript \n```\n\nFor generating documentation\n\n```sh\n$ npm run doc\n```\n\n### Notes\n\nCheck out [https://repetere.github.io/jsonx/](https://repetere.github.io/jsonx/) for the full jsonx Documentation\n\n### Testing\n\n```sh\n$ npm test\n```\n\n### Contributing\n\nFork, write tests and create a pull request!\n\nLicense\n\n----\n\nMIT","funding_links":[],"categories":["Miscellaneous","TypeScript"],"sub_categories":["Miscellaneous"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frepetere%2Fjsonx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frepetere%2Fjsonx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frepetere%2Fjsonx/lists"}