How to Render LaTeX as HTML with JavaScript

If you want LaTeX-style equations to appear in a web page, you usually do not need to convert them into HTML yourself. Load a JavaScript math renderer, write the equations between delimiters, and let the library typeset them in the browser.

For this purpose, MathJax is a common choice. KaTeX is another option, often chosen for speed when its supported TeX features are sufficient. These libraries render mathematical notation; they do not reproduce every feature of a full LaTeX document, such as arbitrary packages, page layouts, or all document environments.

Render a basic page with MathJax

This complete HTML page loads MathJax 3 from a CDN and renders both inline and display math. It uses \(...\) for inline equations and \[...\] for centered display equations.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MathJax example</title>
  <script>
    window.MathJax = {
      tex: {
        inlineMath: [['\\(', '\\)']],
        displayMath: [['\\[', '\\]']]
      }
    };
  </script>
  <script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
</head>
<body>
  <p>The area of a circle is \(A=\pi r^2\).</p>
  <p>For example:</p>
  \[
    \int_0^1 x^2\,dx = \frac{1}{3}
  \]
</body>
</html>

The configuration must appear before the MathJax script so the library sees the delimiter settings when it starts. The defer attribute lets the browser download the script while parsing the page and run it after parsing is complete. If you use dollar signs as delimiters instead, configure them explicitly; dollar signs can occur in ordinary text and may be interpreted as math delimiters unintentionally.

Typeset content added later

MathJax automatically processes the page content that is present when it starts. If JavaScript adds an equation afterward, ask MathJax to typeset the updated element:

<div id="result"></div>
<button id="show-math">Show equation</button>

<script>
  document.getElementById('show-math').addEventListener('click', async () => {
    await MathJax.startup.promise;

    const result = document.getElementById('result');
    MathJax.typesetClear([result]);
    result.textContent = 'The area is \\(A=\\pi r^2\\).';
    await MathJax.typesetPromise([result]);
  });
</script>

MathJax.startup.promise waits until MathJax is ready. typesetPromise([result]) then processes math in that element and resolves when typesetting finishes. Using textContent inserts the string as text rather than interpreting it as HTML, which is a safer default when content comes from a user or another untrusted source.

If you replace content in an element that already contains typeset math, call MathJax.typesetClear([result]) before changing or removing that content, then typeset the updated content. This clears MathJax’s tracking for the old content and matters particularly in interfaces that repeatedly update the same region.

MathJax or KaTeX?

Renderer	Consider it when	Keep in mind
MathJax	You need broad TeX math support or dynamic typesetting in the browser.	It may take longer to render than KaTeX in some situations.
KaTeX	You want fast rendering and your formulas use supported commands.	Check its supported-functions list; it does not implement every TeX feature.

Both are appropriate for rendering equations on a web page. Neither turns arbitrary LaTeX source, including document structure and custom packages, into a faithful HTML version by simply loading a script. For that broader conversion task, use a document-conversion workflow such as Pandoc or LaTeXML and check its supported input features.

Common mistakes

• Expecting a full LaTeX compiler. A browser math renderer handles math notation, not every command or package in a .tex document.
• Using delimiters the library is not configured to recognize. Match your source delimiters to the renderer’s settings. MathJax’s common defaults include \(...\) and \[...\]; dollar-sign delimiters may need configuration.
• Typesetting before the library is ready. When calling the API from JavaScript, wait for MathJax’s startup promise before calling typesetPromise.
• Inserting untrusted input as HTML. Prefer textContent for plain text and math strings. If an application must accept arbitrary TeX or HTML, apply an appropriate security policy and limit what input is allowed.

For a command-line workflow that converts a LaTeX document rather than rendering equations in a browser, see Using the command window to convert LaTeX to HTML.