JSONX is a React rendering library that lets you define React UI as JSON, then render it as React elements, HTML, JSX text, or browser DOM output.
JSONX gives you a JSON-based rendering layer for React. A JSONX object describes the component, props, children, templates, and resource bindings. The library resolves that structure into React output for browser rendering, server-side HTML rendering, Express views, or generated component flows.
JSONX is not a replacement for React or a design system. HTML rendering is one output path. It is useful when React views need to be generated, serialized, audited, stored in files, returned from APIs, or moved through a system as data.
JSONX works in existing React applications when you need to create elements from data instead of JSX source code. This is helpful for view management systems, configuration-driven UI, server-rendered views, and applications that need to inspect or persist UI definitions.
JSONX can produce React elements, HTML strings, JSX strings, JSON intermediate representation, browser DOM output, and Express view output. The browser bundles can run without a transpiler when the page already has the needed runtime dependencies.
JSONX supports DOM components, custom component maps, component libraries, function components with hooks, class components, Suspense, Lazy components, dynamic data-backed components, and JSON objects that implement the JXM (JSONX Markup) spec.
$ npm i jsonx react react-dom- Getting Started
- Using Advanced Props
- External and Custom Components
- Creating React Components and Component Libraries
- JSONX And JXM Spec
- Samples
- Roadmap
- Full API Docs
import * as jsonx from 'jsonx';
const example_JXM_JSON = {
component:'p',
props:{ style:{ color:'blue' } },
children:'hello world'
};
//Rendering React Components
jsonx.getReactElement(example_JXM_JSON); // => JSX Equivalent: <p style={{color:'blue'}}>hello world</p>
//Generating HTML strings
jsonx.outputHTML({ jsonx: example_JXM_JSON, }); // => '<p style="color:blue;">hello world</p>'
//Generating JSX strings
jsonx.outputJSX(example_JXM_JSON); // => '<p style={{color:blue,}}>hello world</p>'
//Rendering HTML Dom with React
jsonx.jsonxRender({ jsonx: example_JXM_JSON, querySelector:'#myApp', });
// <!DOCTYPE html>
// <body>
// <div id="myApp">
// <p style="color:blue;">hello world</p>
// </div>
// </body>
//you can also use the simplified syntax
const simpleJXM_JSON = {
p:{
props:{ style:{ color:'blue' } },
children:'hello world'
}
}
//or if you have an element with no props, use {type:children}
const superSimpleJXM = {
ul:[
{li:'first!'},
{li:'second!'},
]
}JSONX works by using JXM JSON to create React elements. JXM JSON objects are valid JSON objects that describe React component structure in data form. The properties for JSONX JSON map to the arguments passed to React.createElement. The only required property is the component, which is passed as the type argument.
React.createElement(
type,
[props],
[...children]
)You can pass React component libraries for additional components, or your own custom components. See External and Custom Components and Using Advanced Props for more details.
Note Make sure you have typescript installed
$ npm i -g typescript For generating documentation
$ npm run docRead the full JSONX documentation at https://jsonx.net/.
$ npm testFork, write tests and create a pull request!
License
MIT