Render LaTeX, Math & Chemistry in React, React Native, Flutter — One Package

Sandipan Das — Fri, 06 Mar 2026 09:01:57 +0000

The Problem

If you're building an ed-tech app, a science quiz platform, or an AI chat app (ChatGPT wrapper, tutoring bot), you've probably hit this wall:

"How do I render LaTeX math equations in my app?"

And then you discover:

MathJax is great but only works in browsers
KaTeX is fast but doesn't support chemistry
React Native has no good LaTeX solution
Flutter? You're on your own
SMILES chemical structures? Forget it

I built latex-content-renderer to solve all of this with one package.

What It Does

Drop in your LaTeX content as a string — get beautiful rendered output.

Math:

$E = mc^2$
$$\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$

Chemistry (mhchem):

$\ce{H2O}$
$$\ce{CH4 + 2O2 -> CO2 + 2H2O}$$

SMILES molecular structures:

\smiles{Cn1cnc2c1c(=O)n(c(=O)n2C)C}

→ Renders a 2D caffeine molecule diagram

Tables, images, lists, text formatting — all from LaTeX syntax.

Quick Start

CDN (Zero Config — Just One Script Tag)

<script src="https://cdn.jsdelivr.net/npm/latex-content-renderer@latest/dist/latex-content-renderer.min.global.js"></script>

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

<script>
  LatexRenderer.render('#output', 'Einstein said $E = mc^2$ and water is $\\ce{H2O}$');
</script>

That's it. MathJax and SmilesDrawer are auto-injected. No extra script tags.

React

npm install latex-content-renderer

import { SciContent } from 'latex-content-renderer';

function App() {
  return (
    <SciContent
      content="The quadratic formula: $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$"
    />
  );
}

React Native / Expo

import { SciContentNative } from 'latex-content-renderer/native';

function App() {
  return (
    <SciContentNative
      content="$$\ce{N2 + 3H2 <=> 2NH3}$$"
      theme="dark"
    />
  );
}

It generates a self-contained HTML page and renders it in a WebView. Works on Android and iOS.

Flutter / Android / iOS (WebView)

import { getHtml } from 'latex-content-renderer';

const html = getHtml(latexContent, { theme: 'dark' });
// Load this HTML string into any WebView

AI/LLM Streaming Support

Building a ChatGPT-like app? When an AI streams "The answer is $x = \frac{1" — that's broken LaTeX. Rendering it will crash or look ugly.

This package includes a streaming buffer that holds incomplete equations until they're complete:

import { createStreamingState, feedChunk, flushStream } from 'latex-content-renderer';

const state = createStreamingState();

// As chunks arrive from your AI API:
socket.on('chunk', (chunk) => {
  const safeContent = feedChunk(state, chunk);
  // safeContent only contains complete equations
  element.innerHTML = processContent(safeContent);
});

// When stream ends:
socket.on('end', () => {
  const final = flushStream(state);
  element.innerHTML = processContent(final);
});

Works with OpenAI, Anthropic, Google Gemini, Groq, or any streaming LLM API.

Accessibility

One function call adds role="math" and aria-label to all equations:

import { addAccessibility } from 'latex-content-renderer';

const html = processContent('$\\alpha + \\beta = \\gamma$');
const accessible = addAccessibility(html);
// Adds: aria-label="alpha + beta = gamma"

Screen readers can now read your math content aloud. Supports 30+ Greek letters, operators, fractions, integrals, and more.

SVG Export

Export any equation as an SVG for use in PDFs, presentations, or downloads:

import { latexToSvg, latexToDataUrl } from 'latex-content-renderer';

const svg = await latexToSvg('E = mc^2');
// Returns clean SVG string

const dataUrl = await latexToDataUrl('\\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}');
// Returns data:image/svg+xml;base64,...

All Supported Features

Feature	Syntax
Inline math	$E = mc^2$
Display math	`$$\int_0^\infty ..$$`
Chemistry	$\ce{H2O}$
SMILES structures	`\smiles{CCO}`
Tables	`\begin{tabular}...\end{tabular}`
Images	`\includegraphics{url}` or `![alt](url)`
Figures + captions	`\begin{figure}...\caption{text}`
Numbered lists	`\begin{enumerate}...\end{enumerate}`
Bullet lists	`\begin{itemize}...\end{itemize}`
Bold / Italic	`\textbf{bold}`, `\textit{italic}`
Colors	`\textcolor{red}{text}`
Highlight	`\colorbox{yellow}{text}`
Monospace	`\texttt{code}`
Spacing	`\quad`, `\hspace`, `\vspace`

Why Not Just Use MathJax / KaTeX Directly?

	latex-content-renderer	MathJax alone	KaTeX alone
Math rendering	✅	✅	✅
Chemistry (mhchem)	✅	✅ (with extension)	❌
SMILES molecules	✅	❌	❌
Tables from LaTeX	✅	❌	❌
Images from LaTeX	✅	❌	❌
React component	✅	❌	❌
React Native component	✅	❌	❌
Flutter/WebView ready	✅	Manual	Manual
AI streaming buffer	✅	❌	❌
Accessibility (ARIA)	✅	Partial	Partial
SVG export	✅	Manual	Manual
CDN one-liner	✅	✅	✅
Zero dependencies	✅	—	—

Install

npm install latex-content-renderer

Or CDN:

<script src="https://cdn.jsdelivr.net/npm/latex-content-renderer@latest/dist/latex-content-renderer.min.global.js"></script>

Links:

If this helps you, give it a ⭐ on GitHub!

Built by Sandipan Das.

Forem: Sandipan Das