Introduction

opjsx lets you author React UI in a compact, indentation-based template syntax, then renders it to real React elements at runtime.

import { opjsx } from "opjsx";

function Greeting({ name }: { name: string }) {
  return opjsx`
    &div.greeting
      &h1
        Hello ${name}
      &button onClick"${() => alert("hi")}"
        Say hi
  `;
}

Why

JSX is verbose: opening and closing tags, angle brackets, and {} around every expression. For UI that is generated, transmitted, or reasoned about by LLMs, that verbosity is paid for in tokens.

opjsx keeps the same React semantics but trims the syntax to the essentials:

• &tag — one element per line, marked with &
• .class — Emmet-style class shorthand (&div.card.active)
• attr"value" — attributes, no =
• indentation — nesting (no closing tags)
• ${…} — dynamic values, event handlers, and .map() lists

The result is roughly 25–35% fewer tokens than the equivalent JSX, while still compiling to ordinary React.createElement calls. See Token efficiency.

How it works

A opjsx template goes through two stages:

1. Parse — the template text becomes a plain JSON element tree.
2. Render — that tree is walked into React elements.

${…} interpolations are preserved across the parse and substituted back as real JavaScript values, so functions, arrays, and dynamic data survive untouched.

Next: Installation → Syntax.