latex-content-renderer
v1.1.3
Published
LaTeX math equation renderer for React, React Native, Expo, Flutter, Android & iOS WebView. Render LaTeX, MathJax, KaTeX-style math, chemistry SMILES molecular structures, mhchem chemical formulas, tables, and scientific content. Universal cross-platform
Maintainers
dev_sandipanKeywords
Readme
latex-content-renderer
One package to render LaTeX math, chemistry (SMILES / mhchem), tables, figures, and formatted text — on every platform.
Works with React, React Native (Expo), Flutter, Android WebView, iOS WKWebView, and anything that can render HTML.
Powered by MathJax 3 + SmilesDrawer.
What does this package do?
You give it a string containing LaTeX, math, chemistry, or formatted text — it converts it to beautiful rendered HTML.
Input: "The quadratic formula: $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$"
Output: Beautiful rendered math equation in the browserNo setup hassle. No MathJax configuration. No boilerplate. Just import and use.
Install
npm install latex-content-rendererQuick Start (React)
Step 1: Add MathJax CDN to your HTML <head>:
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>Step 2: Use the component:
import { SciContent } from 'latex-content-renderer';
function App() {
return (
<SciContent content="The quadratic formula: $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$" />
);
}That's it. The math renders beautifully.
What can it render?
| Feature | Input example | What it does |
|---------|---------------|-------------|
| Inline math | $E = mc^2$ | Renders math inline with text |
| Display math | $$\int_0^\infty e^{-x^2} dx$$ | Renders math as a centered block |
| Chemistry formulas | $\ce{H2O}$, $\ce{2H2 + O2 -> 2H2O}$ | Chemical equations via mhchem |
| SMILES structures | <smiles>CCO</smiles> | 2D molecular structure diagrams |
| Tables | \begin{tabular}{\|c\|c\|}...\end{tabular} | HTML tables with borders |
| Images | \includegraphics{url} or  | Embedded images |
| Figures | \begin{figure}...\caption{...}\end{figure} | Figures with captions |
| Lists | \begin{enumerate}\item ...\end{enumerate} | Numbered & bullet lists |
| Bold/Italic | \textbf{bold}, \textit{italic} | Text formatting |
| Colors | \textcolor{red}{text}, \colorbox{yellow}{text} | Colored text & highlights |
| Monospace | \texttt{code} | Monospaced text |
Usage by Platform
React (Next.js / Vite / CRA)
import { SciContent } from 'latex-content-renderer';
function MathPage() {
return (
<div>
<SciContent content="Solve: $x^2 - 5x + 6 = 0$" />
<SciContent content="Water: $\ce{H2O}$" />
</div>
);
}React Native / Expo
npm install react-native-webview # peer dependencyimport { SciContentNative } from 'latex-content-renderer/native';
function MathScreen() {
return (
<SciContentNative
content="Ethanol structure: <smiles>CCO</smiles>"
theme="dark"
fontSize={16}
/>
);
}Flutter / Android / iOS (any WebView)
Use getHtml() to get a self-contained HTML string you can load in any WebView:
import { getHtml } from 'latex-content-renderer';
const html = getHtml('Evaluate: $$\\int_0^1 x^2 \\, dx$$', {
theme: 'light',
fontSize: 18,
});
// Flutter: WebView(html: html)
// Android: webView.loadDataWithBaseURL(null, html, "text/html", "utf-8", null)
// iOS: webView.loadHTMLString(html, baseURL: nil)Core function only (no React)
import { processContent } from 'latex-content-renderer';
const html = processContent('Derivative: $\\frac{d}{dx} x^n = nx^{n-1}$');
// Returns HTML string — still needs MathJax loaded in the browser to render mathPlain HTML (CDN — no npm, no build tools)
If you're NOT using React/npm/build tools and just have a plain HTML file, add one script tag and it works. MathJax and SmilesDrawer are auto-loaded for you:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/latex-content-renderer/dist/latex-content-renderer.min.global.js"></script>
</head>
<body>
<div id="output"></div>
<script>
// One line — renders math, chemistry, tables, everything
LatexRenderer.render('#output', 'The quadratic formula: $x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}$');
</script>
</body>
</html>That's it. One script tag. MathJax is auto-injected. No configuration needed.
You can also use the lower-level API if you want more control:
<script>
// Just get the HTML (you handle MathJax yourself)
var html = LatexRenderer.processContent('$E = mc^2$');
document.getElementById('output').innerHTML = html;
</script>What's available via CDN (LatexRenderer.*):
| Function | What it does |
|----------|-------------|
| LatexRenderer.render(selector, text) | Easiest — process + render + typeset in one call |
| LatexRenderer.processContent(text) | Convert LaTeX string → HTML |
| LatexRenderer.getHtml(text, opts) | Get complete HTML page for WebViews |
| LatexRenderer.addAccessibility(html) | Add ARIA labels for screen readers |
| LatexRenderer.createStreamingState() | Create buffer for AI streaming |
| LatexRenderer.feedChunk(state, chunk) | Feed a chunk from AI stream |
| LatexRenderer.flushStream(state) | Flush remaining buffered text |
| LatexRenderer.latexToSvg(tex) | LaTeX → SVG (needs tex-svg.js) |
| LatexRenderer.latexToDataUrl(tex) | LaTeX → base64 data URL |
Note: The CDN build does NOT include the React components (
SciContent,SciContentStreaming). Those requirenpm installand a bundler. The CDN gives you all the core functions.
AI/LLM Streaming Support
What is this and why do you need it?
Important: This package does NOT include any AI or LLM. It does NOT call ChatGPT or any API.
This feature is for developers who are already building apps that call AI APIs (ChatGPT, Claude, Gemini, DeepSeek, etc.).
The problem it solves:
When your AI API sends back a response with math, it arrives character by character (streaming). For example, the AI might be trying to send $$x = \frac{1}{2}$$, but you receive it in chunks:
Chunk 1: "The answer is $$x = \frac{" ← incomplete math!
Chunk 2: "1}{2}" ← still incomplete!
Chunk 3: "$$" ← now it's completeIf you try to render chunk 1 right away, $$x = \frac{ is broken LaTeX — it shows as ugly text or throws errors.
What this feature does: It buffers incomplete math and only renders complete equations. Your users see clean text while math is being typed, then the full beautiful equation appears once it's complete.
React component (easiest way)
import { SciContentStreaming } from 'latex-content-renderer';
// In your AI chat app:
function AIChatBubble({ text, isStreaming }) {
return (
<SciContentStreaming
content={text} // The text received so far from the AI
isStreaming={isStreaming} // true while AI is still sending
showCursor={true} // Show blinking cursor while streaming
debounceMs={100} // Re-render at most every 100ms
/>
);
}Lower-level API (for custom setups)
import { createStreamingState, feedChunk, flushStream, processContent } from 'latex-content-renderer';
const state = createStreamingState();
// As each chunk arrives from your AI API:
for await (const chunk of myAiStream) {
const safeText = feedChunk(state, chunk); // Buffers incomplete math
const html = processContent(safeText); // Only complete math is rendered
myElement.innerHTML = html;
}
// When the AI finishes sending:
const finalText = flushStream(state); // Release any remaining buffered text
const html = processContent(finalText);
myElement.innerHTML = html;What gets buffered?
| Delimiter | Waits until it sees |
|-----------|-------------------|
| $...$ | Closing $ |
| $$...$$ | Closing $$ |
| \(...\) | Closing \) |
| \[...\] | Closing \] |
| \begin{equation} | Matching \end{equation} |
Everything else (plain text, HTML) passes through immediately.
LaTeX to SVG Export
Convert any LaTeX equation to an SVG image you can save, share, or embed.
Use cases:
- Save equations as SVG files for presentations or PDFs
- Embed math in emails or static HTML pages (as
<img>tags) - Generate shareable math images
Setup
This feature requires MathJax SVG output. Use tex-svg.js instead of tex-mml-chtml.js:
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" async></script>If you don't need SVG export and only need rendering,
tex-mml-chtml.jsis fine.
Usage
import { latexToSvg, latexToDataUrl, latexToHtmlString } from 'latex-content-renderer';
// Get raw SVG string
const svg = await latexToSvg('E = mc^2');
document.getElementById('output').innerHTML = svg;
// Get data URL for <img> tags
const dataUrl = await latexToDataUrl('\\frac{a}{b}');
const img = document.createElement('img');
img.src = dataUrl; // "data:image/svg+xml;base64,..."
// Get rendered HTML string (needs tex-mml-chtml.js instead)
const html = await latexToHtmlString('x^2 + y^2 = r^2');Accessibility (Screen Reader Support)
Add ARIA labels to rendered math so screen readers can read equations aloud.
Use cases:
- Make your education app WCAG compliant
- Help visually impaired students understand math
- Required for government and accessibility-audited projects
Usage
import { processContent, addAccessibility } from 'latex-content-renderer';
// Step 1: Process the content normally
const html = processContent('The circle equation: $x^2 + y^2 = r^2$');
// Step 2: Add accessibility attributes
const accessibleHtml = addAccessibility(html);What it does:
- Wraps math in
<span role="math" aria-label="x squared plus y squared equals r squared"> - Converts Greek letters:
$\alpha$→ label says "alpha" - Converts fractions:
$\frac{a}{b}$→ label says "a over b" - Adds
role="table"andaria-labelto tables - Adds
role="img"to chemistry structure diagrams - Adds alt text to images that don't have one
SMILES Chemistry Formats
7 ways to input chemical structures — all render as 2D molecular diagrams:
| Format | Example |
|--------|---------|
| <smiles>CCO</smiles> | XML-style tag |
| [smiles]CCO[/smiles] | BBCode-style tag |
| <mol>CCO</mol> | Molecule tag |
| <molecule>CCO</molecule> | Full molecule tag |
| <chem>CCO</chem> | Chemistry tag |
| \smiles{CCO} | LaTeX command |
| SMILES: CCO | Labeled (on its own line) |
To enable SMILES rendering, add SmilesDrawer to your HTML:
<script src="https://unpkg.com/[email protected]/dist/smiles-drawer.min.js"></script>Full API Reference
Components
| Component | Platform | Import |
|-----------|----------|--------|
| SciContent | React web | import { SciContent } from 'latex-content-renderer' |
| SciContentNative | React Native | import { SciContentNative } from 'latex-content-renderer/native' |
| SciContentStreaming | React web (AI) | import { SciContentStreaming } from 'latex-content-renderer' |
Functions
| Function | What it does |
|----------|-------------|
| processContent(text, opts?) | Convert LaTeX string → HTML string |
| getHtml(text, opts?) | Get complete HTML page for WebViews |
| addAccessibility(html, opts?) | Add ARIA labels to processed HTML |
| createStreamingState() | Create streaming buffer for AI responses |
| feedChunk(state, chunk) | Feed a chunk, get safe-to-render text back |
| flushStream(state) | Get all remaining buffered text |
| latexToSvg(tex, opts?) | LaTeX → SVG string (needs tex-svg.js) |
| latexToHtmlString(tex, opts?) | LaTeX → rendered HTML string |
| latexToDataUrl(tex, opts?) | LaTeX → base64 data URL |
Changelog
v1.1.0
- AI Streaming support — Buffer incomplete math during LLM streaming. New
SciContentStreamingcomponent +createStreamingState/feedChunk/flushStreamAPI - SVG export —
latexToSvg(),latexToHtmlString(),latexToDataUrl()to convert equations to images - Accessibility —
addAccessibility()adds ARIA labels and screen-reader descriptions
v1.0.1
- Fixed MathJax equations inheriting wrong color
- Improved SMILES rendering reliability
- Added
skipProcessingoption
v1.0.0
- Initial release: LaTeX math, chemistry (SMILES + mhchem), tables, figures, lists, text formatting
- React web + React Native + universal
getHtml()
Contributing
- Fork: github.com/sandipan-das-sd/scirender
- Branch:
git checkout -b feature/my-feature - Commit and open a Pull Request
Questions? Email: [email protected]
Support the Project
| Method | Details |
|--------|---------|
| UPI (India) | [email protected] via GPay / PhonePe / Paytm |
| PayPal | paypal.me/sandipandas3002 |
| GitHub | Star the repo ⭐ |
Author
Sandipan Das — @sandipan-das-sd · [email protected]
License
MIT — free for personal and commercial use.