API

The package exports a single function.

opjsx

function opjsx(
  strings: TemplateStringsArray,
  ...values: unknown[]
): ReactElement | null;

Used as a tagged template, it parses the markup and renders it to React elements:

import { opjsx } from "opjsx";

const el = opjsx`
  &div.box
    &h1
      Title
`;

• Returns a ReactElement, or null for empty input.
• Interpolations (${…}) become real props/children: a lone interpolation keeps its JS type; nested opjsx results and arrays of them are passed through as children.

Pipeline

Internally, opjsx is render(parse(template)):

1. parse — template text → a JSON element tree ({ tag: { ...props, children } }), with ${…} preserved as placeholders then substituted back as values.
2. render — the tree is walked into React.createElement calls. Values that are already React elements (e.g. nested opjsx from a .map()) pass through unchanged.

Notes

• React is a peer dependency; opjsx adds no runtime React of its own.
• Parsing happens on each render. For hot paths, memoize the component as usual.