｢‍｣ Lingenic Compose 2.0 → HTML renderer with KaTeX math support.

Parses .compose source files and renders them to semantic HTML. Math expressions (Unicode per ISO 80000-2) are converted to LaTeX and rendered via KaTeX.

npm install lingenic-compose-html-renderer

KaTeX is an optional peer dependency — needed only for math rendering:

npm install katex

import { render } from 'lingenic-compose-html-renderer';
import katex from 'katex';

const source = `
.* ｢‍｣ Lingenic Compose 2.0

.title "Hello, Compose"

The area of a circle is %math: 𝐴 = π𝑟² %.
`;

const html = render(source, { katex });
document.getElementById('root').innerHTML = html;

<link rel="stylesheet" href="katex.min.css">
<link rel="stylesheet" href="lingenic-compose-html-renderer.css">
<script src="katex.min.js"></script>
<script src="lingenic-compose-html-renderer.umd.js"></script>

<div id="output"></div>

<script>
  ComposeRenderer.mount(source, document.getElementById('output'), {
    katex: window.katex
  });
</script>

One-shot parse + render. Returns an HTML string.

Parse, render, and inject into a DOM element.

Parse .compose source into an AST. Useful for inspection, transformation, or custom renderers.

Render a pre-parsed AST to HTML.

Convert a single Compose Unicode math expression to a LaTeX string.

Page headers/footers, text titles with labels, page breaks, vertical margins, spacing.

Bold, italic, underscore, alignment (left / center / right / justify), indentation.

Numbered, bulleted, definition lists. Nesting supported.

Block math, inline math (typeset and evaluated), aligned equations, fractions, matrices (with delimiter options), piecewise cases. All Unicode math symbols converted per the official mapping.

set-variable, set-counter with auto-increment and display modes (numeric, roman, alpha).

Labels on any block, %ref: name% links with page/number/title variants.

Keep blocks, literal blocks, preformatted (fill-off), footnotes, endnotes, sidenotes.

begin-figure with insert-graphic, captions, and labels.

Horizontal rules (width / thickness / style), drop caps, ruby text, language tags, citations (simplified).

Import the default stylesheet:

import 'lingenic-compose-html-renderer/style.css';

Or in HTML:

<link rel="stylesheet" href="lingenic-compose-html-renderer.css">

All classes use the cr- prefix. Override any rule to match your design system.

If KaTeX is not provided, math expressions render as <code> blocks containing the LaTeX string. You can use the composeToLatex() export to integrate with any other math renderer (MathJax, Temml, etc.).

• AI reference: https://write-this-in-compose.lingenic.ai
• Full specification: https://compose.lingenic.com/specification/
• Math specification: https://compose.lingenic.com/math/
• Math-to-KaTeX mapping: https://write-this-in-compose.lingenic.ai/math-to-katex.compose

Apache 2.0