Optizon Math

TeX math for Optizon UI: our own TeX parser and layout engine that renders crisp math as HTML, with MathML for assistive technology. No KaTeX or MathJax inside.

import { Math, renderMath } from "@optizon/math";

<Math tex="\int_0^1 x^2\,dx = \tfrac13" />           // inline
<Math tex="\sum_{k=1}^n k = \frac{n(n+1)}{2}" display /> // display
const html = renderMath("E = mc^2");                     // an HTML string, for SSR and labels

In Markdown, register the plugin once on the app's root MarkdownProvider; every Markdown surface then renders $…$, \(…\), $$…$$, \[…\] and math fences, with display math growing as it streams in:

import { MarkdownProvider } from "@optizon/markdown";
import { mathPlugin } from "@optizon/math";

const plugins = [mathPlugin()];
<MarkdownProvider plugins={plugins}>{app}</MarkdownProvider>

Install it next to @optizon/ui at the same version (npm install @optizon/[email protected]; it brings @optizon/markdown), and import its stylesheet once, next to @optizon/tokens; it holds the math font and the formula styles, so no @source line is needed:

@import "@optizon/tokens";
@import "@optizon/math/styles.css";

The package is ESM-only, ships compiled JavaScript, TypeScript declarations and source, and has @optizon/tokens, @optizon/ui and @optizon/markdown (same version) and React 19 as peers. The guide: https://github.com/optzn/ui/blob/main/docs/MATH.md. The agent skill for Codex and Claude Code ships in @optizon/ui and covers math too: npx @optizon/[email protected] install-skill.

License

The code is licensed under Apache-2.0. The math font, Optizon Math (src/fonts), is a set of subsets of STIX Two Math 2.13 b171, © The STIX Fonts Project Authors, licensed under the SIL Open Font License 1.1 (src/fonts/OFL.txt); it is a Modified Version under that license and doesn't use its Reserved Font Name. scripts/build-font.mjs builds it, and the metrics tables, from the vendored original in fonts/.

Documentation, examples and source: https://github.com/optzn/ui