DEV Community

Sandipan Das
Sandipan Das

Posted on

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

#react #webdev #javascript #opensource

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}$$
Enter fullscreen mode Exit fullscreen mode

Chemistry (mhchem):

$\ce{H2O}$
$$\ce{CH4 + 2O2 -> CO2 + 2H2O}$$
Enter fullscreen mode Exit fullscreen mode

SMILES molecular structures:

\smiles{Cn1cnc2c1c(=O)n(c(=O)n2C)C}
Enter fullscreen mode Exit fullscreen mode

→ 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>
Enter fullscreen mode Exit fullscreen mode

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

React 

npm install latex-content-renderer
Enter fullscreen mode Exit fullscreen mode 
import { SciContent } from 'latex-content-renderer';

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

React Native / Expo 

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

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

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
Enter fullscreen mode Exit fullscreen mode

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);
});
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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,...
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Or CDN:

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

Links:

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

Built by Sandipan Das.

Top comments (0)