Integration

Get started by platform

Every target consumes the same display list from the Rust pipeline. Pick your stack below, then open the full guide on GitHub for versioning, fonts, and native build scripts.

Prefer trying formulas in the browser first? Live demo · Math gallery

Web (WASM)

Rust compiled to WebAssembly; Canvas 2D draws the display list. Use the published npm package and the optional ratex-formula web component.

  1. Install: npm install ratex-wasm
  2. Load KaTeX fonts CSS from the package and register the custom element or call the programmatic API.
<link rel="stylesheet" href="node_modules/ratex-wasm/fonts.css" />
<script type="module" src="node_modules/ratex-wasm/dist/ratex-formula.js"></script>
<ratex-formula latex="\frac{-b \pm \sqrt{b^2-4ac}}{2a}" font-size="48"></ratex-formula>
Full documentation npm

iOS (Swift)

Swift / SwiftUI views over the C ABI; CoreGraphics renders the display list. SPM from the GitHub repo.

  1. In Xcode: File → Add Package Dependencies → https://github.com/erweixin/RaTeX, select the RaTeX product.
  2. Use RaTeXFormula / RaTeXView; fonts load from the package on first render.
// SwiftUI
RaTeXFormula(latex: #"\frac{-b \pm \sqrt{b^2-4ac}}{2a}"#, fontSize: 24)
Full documentation

Android (Kotlin)

AAR with JNI into the same native library; Canvas draws glyphs and rules. Published to Maven coordinates.

  1. Add implementation("io.github.erweixin:ratex-android:…") (see README for current version).
  2. Place RaTeXView in XML or Compose and set latex / fontSize in code.
binding.mathView.latex = """\frac{-b \pm \sqrt{b^2-4ac}}{2a}"""
binding.mathView.fontSize = 24f
Full documentation

Flutter (Dart FFI)

Dart FFI to `libratex_ffi`; `CustomPainter` renders the display list. Prebuilt iOS XCFramework + Android `.so` on pub.dev.

  1. Add ratex_flutter to pubspec.yaml and run flutter pub get.
  2. Use RaTeXWidget(latex: r'…', fontSize: 28).
RaTeXWidget(
  latex: r'\frac{-b \pm \sqrt{b^2-4ac}}{2a}',
  fontSize: 28,
  onError: (e) => debugPrint('RaTeX: ' + e.toString()),
)
Full documentation pub.dev

React Native

Native views on iOS and Android; JS bundles the UI while Rust handles parse/layout in `.a` / `.so`.

  1. Install: npm install ratex-react-native then cd ios && pod install.
  2. Use RaTeXView / InlineTeX; fonts ship with the package.
import { RaTeXView } from 'ratex-react-native';

<RaTeXView
  latex="\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}"
  fontSize={24}
/>
Full documentation npm

Server / CLI (PNG)

Rasterize the same display list to PNG with tiny-skia—CI snapshots, backends, or headless servers—no browser.

  1. From the repo root, use the ratex-render crate (see README “Render to PNG”).
  2. Pipe LaTeX stdin or pass flags as documented; output is a PNG file or stdout.
echo '\frac{1}{2} + \sqrt{x}' | cargo run --release -p ratex-render
Full documentation

Architecture overview

All paths share: lexer → parser → layout → display list. Native UIs and WASM map that list to CoreGraphics, Android Canvas, Flutter Canvas, Skia, or Canvas 2D; the server crate rasterizes with tiny-skia.

README — Architecture