React views, defined as JSON.

Build React elements, HTML, JSX text, and Express views from serializable UI definitions.

Get started View API docs

JSON input

{
  "component": "section",
  "props": {
    "className": "notice"
  },
  "children": [
    { "h2": "Hello, JSONX" },
    { "p": "Defined in JSON, rendered as React." },
    {
      "button": {
        "props": { "type": "button" },
        "children": "Click me"
      }
    }
  ]
}

React output

Hello, JSONX

Defined in JSON, rendered as React.

One definition. Multiple outputs.

Describe UI once, then render it where the system needs it.

JXM JSON

{
  "component": "div",
  "children": "JSONX"
}

Component map

div: Box
h1: Heading
p: Text

Renderer

render(jxm, map)

React element

<Box>JSONX</Box>

<div class="notice">
  <h2>Hello, JSONX</h2>
  <p>Defined in JSON, rendered as React.</p>
</div>

Built for generated, stored, and server-rendered views.

Use JSONX when UI needs to move through a system as data.

Configuration-driven UI

Store view definitions.

Server output

Render HTML strings.

Component libraries

Map custom components.

JXM spec

Use a documented JSON shape.

Start with a JSON shape.

Install the package, render a small JXM object, then move into the manual when the view model needs more structure.

> npm i jsonx

Read the manual Open GitHub API reference