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. Register KaTeX fonts in your app's pubspec.yaml under flutter: fonts: using the packages/ratex_flutter/ asset prefix — without this step glyphs silently fall back to system fonts. See the full doc for the complete snippet.
  3. 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

Rasterize to PNG with tiny-skia (`ratex-render`) or export to self-contained SVG with `ratex-svg`—CI snapshots, backends, or headless servers—no browser needed.

  1. PNG: pipe LaTeX to stdin — cargo run --release -p ratex-render.
  2. SVG: add --features cli — cargo run --release -p ratex-svg --features cli. Outputs -based SVG with no web-font dependency.
# PNG (tiny-skia rasterizer)
echo '\frac{1}{2} + \sqrt{x}' | cargo run --release -p ratex-render

# SVG (self-contained <path> glyphs, no web fonts needed)
echo '\frac{1}{2} + \sqrt{x}' | cargo run --release -p ratex-svg --features cli
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