React views, defined as JSON.

Define a React view as serializable JXM, then render it as a React element, HTML string, JSX text, browser DOM output, or an Express view.

Get started View API docs

Install npm i jsonx react react-dom

React: 18 and 19 peer support
Output: React, HTML, JSX, Express
License: MIT

JXM definition

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

Rendered React view

Hello, JSONX

Defined in JSON, rendered as React.

One definition. Multiple outputs.

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

Define JXM

Keep the view model serializable.

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

Map components

Point JSON element names at React components.

div: Box
h1: Heading
p: Text

Render output

Choose the output for the runtime.

render(jxm, map)

Use the result

Return React, HTML, JSX, or Express output.

<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 in configuration, an API response, or a database record.

Server output

Render HTML strings or Express views from the same JXM object.

Component libraries

Map application components without changing the stored view shape.

JXM spec

Use a documented JSON shape for teams that need a durable contract.

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 react react-dom

Read the manual Open GitHub API reference