MathJax Example

# mathjaxjs > MathJax loading utilities Latest version **4.2.0** (published 2026-08-24) · SEE LICENSE IN LICENSE license · 0 weekly downloads ## Install ```sh npm install mathjaxjs pnpm add mathjaxjs yarn add mathjaxjs bun add mathjaxjs ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 4.2.0 | | Published | 2026-08-24 | | First published | 2025-07-05 | | Weekly downloads | 0 | | License | SEE LICENSE IN LICENSE | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 19.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 625 | | Author | Dan Lynch | | Maintainers | pyramation | | Keywords | latex, mathjax, html5, javascript | ## Links - npm: https://www.npmjs.com/package/mathjaxjs - Repository: https://github.com/Mathapedia/LaTeX2JS - Issues: https://github.com/Mathapedia/LaTeX2JS/issues - npm.io page: https://npm.io/package/mathjaxjs ## Alternatives - [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads - [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads - [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads - [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads - [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads ## Recent versions - 4.2.0 (latest) — 2026-08-24 - 3.0.4 (next) — 2025-07-05 - 4.0.5 — 2026-08-24 - 4.0.3 — 2026-08-17 - 4.0.1 — 2026-08-17 - 3.0.10 — 2025-07-06 - 3.0.9 — 2025-07-05 - 3.0.8 — 2025-07-05 - 3.0.1 — 2025-07-05 - 3.0.0 — 2025-07-05 - 2.1.0 — 2025-07-05 ## README # mathjaxjs Pure HTML5 MathJax loading utilities without React dependencies. This package provides a simple way to load and configure MathJax v3 for LaTeX mathematical notation rendering in web applications. ## Installation ```bash npm install mathjaxjs ``` ## Features - **Framework Agnostic**: Works with any JavaScript framework or vanilla HTML - **Async Loading**: Non-blocking MathJax loading from CDN - **Configurable**: Customizable MathJax configuration - **Lightweight**: Minimal dependencies ## API Reference ### loadMathJax() Asynchronously loads MathJax from CDN with configuration: ```javascript import { loadMathJax } from 'mathjaxjs'; // Load with default configuration await loadMathJax(); // Load with custom configuration await loadMathJax({ tex: { inlineMath: [['$', '$'], ['\$', '\$']], displayMath: [['$$', '$$'], ['\\[', '\\]']], macros: { RR: "\\mathbb{R}", ZZ: "\\mathbb{Z}" } }, svg: { fontCache: 'global' } }); ``` ### getMathJax() Returns the current MathJax instance: ```javascript import { getMathJax } from 'mathjaxjs'; // Get MathJax instance (after loading) const MathJax = getMathJax(); if (MathJax) { // Manually typeset content MathJax.typesetPromise([element]); // Re-render all math MathJax.typesetPromise(); } ``` ### DEFAULT_CONFIG The default MathJax configuration object: ```javascript import { DEFAULT_CONFIG } from 'mathjaxjs'; console.log(DEFAULT_CONFIG); // Output: Default MathJax v3 configuration ``` ## Usage Examples ### Basic Usage ```html MathJax Example

Inline math: $E = mc^2$

Display math: $$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$

``` ### Dynamic Content ```javascript import { loadMathJax, getMathJax } from 'mathjaxjs'; // Initialize MathJax await loadMathJax(); // Function to add mathematical content dynamically function addMathContent(container, latexString) { const mathElement = document.createElement('div'); mathElement.innerHTML = `$$${latexString}$$`; container.appendChild(mathElement); // Typeset the new content const MathJax = getMathJax(); if (MathJax) { MathJax.typesetPromise([mathElement]); } } // Usage const container = document.getElementById('math-container'); addMathContent(container, '\\sum_{n=1}^{\\infty} \\frac{1}{n^2} = \\frac{\\pi^2}{6}'); ``` ### Custom Configuration ```javascript import { loadMathJax } from 'mathjaxjs'; const customConfig = { tex: { // Enable additional packages packages: ['base', 'ams', 'physics', 'color'], // Custom macros macros: { // Vectors 'vb': ['\\mathbf{#1}', 1], 'va': ['\\vec{#1}', 1], // Common sets 'R': '\\mathbb{R}', 'N': '\\mathbb{N}', 'Z': '\\mathbb{Z}', 'Q': '\\mathbb{Q}', 'C': '\\mathbb{C}', // Derivatives 'dd': ['\\,\\mathrm{d}#1', 1], 'dv': ['\\frac{\\mathrm{d}#1}{\\mathrm{d}#2}', 2], 'pdv': ['\\frac{\\partial#1}{\\partial#2}', 2] }, // Enable tags and labels tags: 'ams', // Process dollar delimiters processEscapes: true }, // SVG output configuration svg: { fontCache: 'global', displayAlign: 'center', displayIndent: '0em' }, // Startup configuration startup: { ready: () => { console.log('MathJax is ready!'); } } }; await loadMathJax(customConfig); ``` --- _Source: https://npm.io/package/mathjaxjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._