@nym.sh/jrx

JSX factory for json-render. Write JSX, get Spec JSON.

Install

bun add @nym.sh/jrx @json-render/core

Setup

Configure your tsconfig.json to use @nym.sh/jrx as the JSX source:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@nym.sh/jrx"
  }
}

Or use a per-file pragma:

/** @jsxImportSource @nym.sh/jrx */

Usage

Define components

Create wrapper functions that map JSX tags to json-render component type names:

import { jsx } from "@nym.sh/jrx/jsx-runtime";
import type { JrxNode } from "@nym.sh/jrx";

export function Stack(props: Record<string, unknown>): JrxNode {
  return jsx("Stack", props);
}

export function Text(props: Record<string, unknown>): JrxNode {
  return jsx("Text", props);
}

export function Button(props: Record<string, unknown>): JrxNode {
  return jsx("Button", props);
}

Render JSX to Spec JSON

import { render } from "@nym.sh/jrx";
import { Stack, Text, Button } from "./components";

const spec = render(
  <Stack>
    <Text content="Hello from jrx!" />
    <Button label="Click me" />
  </Stack>
);

This produces:

{
  "root": "stack-1",
  "elements": {
    "text-1": {
      "type": "Text",
      "props": { "content": "Hello from jrx!" }
    },
    "button-1": {
      "type": "Button",
      "props": { "label": "Click me" }
    },
    "stack-1": {
      "type": "Stack",
      "props": {},
      "children": ["text-1", "button-1"]
    }
  }
}

State, events, visibility, and watchers

Pass json-render bindings as JSX props:

const spec = render(
  <Stack>
    <Text content={{ $state: "/count" }} />
    <Button
      label="Increment"
      on={{
        press: {
          action: "increment",
          params: { statePath: "/count" },
        },
      }}
    />
    <Text
      content="Hidden until toggled"
      visible={{ $state: "/showDetails", eq: true }}
    />
  </Stack>,
  {
    state: {
      count: 0,
      showDetails: false,
    },
  }
);

The render() function accepts an options object with state to include initial state in the Spec output.

Reserved props

These props are extracted from JSX and mapped to Spec fields rather than passed through as component props:

| Prop | Spec field | Description | |---|---|---| | key | element key | Explicit element key (overrides auto-generation) | | visible | visible | Visibility condition | | on | on | Event bindings | | repeat | repeat | Repeat configuration | | watch | watch | State watchers | | children | children | Child element references |

Example

The example/ directory contains a Bun HTTP server that demonstrates jrx in action. It shows JSX source, live rendered UI (via @json-render/react), and JSON output side by side.

cd example
bun install
bun dev

This starts a dev server with HMR at http://localhost:3000.

Development

bun install       # install dependencies
bun run build     # build dist/
bun test          # run tests
bun run typecheck # type check

License

MIT