LaTeX Math Renderer

LaTeX Math Renderer with Live Preview and MathML Output

This LaTeX math renderer typesets equations as you type, using KaTeX, a fast LaTeX math engine built for the web. It is a quick way to check that a formula compiles and looks right before it goes into a paper, a blog post or documentation, and it gives you markup you can paste straight into HTML: MathML that modern browsers display natively, or KaTeX's HTML output.

What does the renderer support?

KaTeX covers the math mode of LaTeX that most people use day to day:

• Fractions, roots and binomials: \frac, \sqrt[n]{x}, \binom.
• Sums, integrals and limits with sub- and superscripts: \sum_{i=1}^{n}, \int_0^\infty, \lim_{x \to 0}.
• Greek letters, operators, arrows and accents: \alpha, \nabla, \Rightarrow, \hat{x}.
• Matrices and aligned environments: pmatrix, bmatrix, cases, aligned and align.
• Styling such as \mathbb{R}, \mathbf, \text{...} and \color.

It is a math renderer, not a full LaTeX compiler. Document commands like \documentclass, \usepackage, figures and bibliographies are outside its scope, and trusted commands that could load links or other content are turned off.

Example

Enter the quadratic formula:

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

and the preview shows the typeset equation. A simpler input, \frac{a}{b} in display mode, produces this MathML:

<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mfrac><mi>a</mi><mi>b</mi></mfrac></mrow><annotation encoding="application/x-tex">\frac{a}{b}</annotation></semantics></math></span>

The annotation element keeps your original LaTeX inside the markup, so the source is never lost and screen readers and copy tools can use it.

Options explained

• Code output: MathML. Standard math markup that current versions of Chrome, Edge, Firefox and Safari render natively. It needs no stylesheet or script, which makes it ideal for static pages and documentation.
• Code output: KaTeX HTML. Positioned span elements that look identical in every browser, but only when you also load katex.css and its fonts. Without the stylesheet the output looks broken.
• Display (block) mode. On, the equation is centered on its own line with full-size fractions and limits placed above and below. Off, it is sized to sit inside a sentence, like $...$ in LaTeX.
• Blank line separates equations. Renders each blank-line-separated block as its own equation, so you can check a whole set of formulas at once.
• Preview size (px). Changes only the preview font size, from 12 to 64 pixels, so you can inspect subscripts closely. The copied code is not affected.

Common errors and fixes

• Unbalanced braces. \sqrt{x fails with "Expected '}'". The message also reports the line, which helps with long inputs.
• Undefined control sequence. Usually a typo such as \fract, or a macro from a package KaTeX does not implement.
• Text inside math. Words typed directly are set as italic variables with odd spacing. Wrap them in \text{...}.
• Line breaks. \\ only breaks lines inside environments such as aligned; use one of those for multi-line equations.
• Escaping in code. In JavaScript or JSON strings every backslash must be doubled, so \frac becomes \\frac in your source file.

Using the output

For a static site, paste the MathML directly into your HTML. If your content is written in Markdown, draft it in the Markdown editor and paste the MathML where the equation should go. To check a snippet in a full page before publishing, open it in the HTML viewer. Need a table rather than an equation? The LaTeX table generator builds tabular code from your data.

Privacy

KaTeX runs in your browser, so equations are rendered locally and never sent to a server.