Loading repository data…

REPOSITORY OVERVIEW

Live repository statistics

★ 181Stars

⑂ 18Forks

◯ 1Open issues

◉ 181Watchers

85/100

OPENREPOHUB HEALTH SIGNAL

Strong signals

A transparent discovery signal based on current public GitHub metadata.

Recent activity35% weight

100

Community adoption25% weight

Maintenance state20% weight

100

License clarity10% weight

100

Project information10% weight

100

This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.

README preview

JSONX

Description

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.

Data-Driven React

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.

Browser and Server Output

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.

Component Support

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.

Installation

$ npm i jsonx react react-dom

Documentation

Basic Usage

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!'},
  ]
}

JXM JSON Spec

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.

Development

Note Make sure you have typescript installed

$ npm i -g typescript

For generating documentation

$ npm run doc

Notes

Read the full JSONX documentation at https://jsonx.net/.

Testing

$ npm test

Contributing

Fork, write tests and create a pull request!

License

MIT