LaTeX Math, Explained

After reading this you will know how MathJax turns a line of LaTeX like \frac{-b \pm \sqrt{b^2-4ac}}{2a} into a typeset formula, how to structure fractions, sums, integrals and matrices correctly, and how to export clean SVG and PNG for your documents.

What LaTeX math is and one example

LaTeX is a typesetting language. Donald Knuth wrote the underlying TeX system in 1978 to set mathematics properly, and Leslie Lamport built LaTeX on top of it in the 1980s. The math subset is what you use here: a compact notation where every construct is a command starting with a backslash, and grouping is done with braces {}.

Consider the quadratic formula. In plain text it is hard to read. In LaTeX you write:

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

The editor renders that live as you type. Every symbol maps to something concrete: \frac{A}{B} stacks A over B, \pm is the plus-or-minus sign, \sqrt{...} draws a radical over its argument, and b^2 raises b to the power 2. The output is:

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

That is the whole idea. You describe structure, not pixels, and the engine handles spacing, sizing and alignment according to typographic rules refined over decades.

When to use this tool, and when not

Reach for the editor when you need a single equation as an image or as source you can paste elsewhere. Common cases: a formula for a slide deck, a clean SVG for a web page, a snippet to drop into a Markdown file that supports MathJax, or a quick check that your LaTeX parses before you commit it to a paper.

Do not expect a full LaTeX document compiler. MathJax renders the math mode subset: equations, aligned systems, matrices and symbols. It does not process \documentclass, packages, bibliographies, \section headings or TikZ diagrams. If you paste an entire .tex file, only the math parts inside math delimiters will make sense.

Nothing you type is uploaded. Typesetting runs entirely in your browser using MathJax, the same engine many scientific publishers use, so the output matches what journals produce.

How the syntax is built

Three rules cover most of what you write.

Commands: A backslash followed by a name, like \alpha, \sum or \sqrt. Names are case sensitive: \Gamma (capital gamma, Γ) differs from \gamma (lowercase, γ).
Arguments in braces: Many commands take arguments wrapped in {}. \frac{1}{2} needs both parts. Without braces, \frac 1 2 still works because each token is a single character, but \frac 12 34 means one-half followed by 34, not 12 over 34.
Sub and superscripts: _ lowers and ^ raises the next token. Group multi-character scripts with braces: x^{10} gives x^{10}, while x^10 gives x^{1}0.

Whitespace between commands is ignored, so \sum_{i=1}^{n} i and \sum _{i=1} ^{n} i render identically. To force a real space in the output, use \, (thin space) or \quad (a wide space equal to the current font size).

The four constructs people forget

Most confusion comes from four structures. Learn these and you can write almost anything.

Fractions use \frac{numerator}{denominator}. Nest them freely: \frac{1}{1+\frac{1}{x}} renders a continued fraction.

Roots use \sqrt{x} for square roots and \sqrt[3]{x} for a cube root, where the optional bracket sets the index.

Sums and integrals carry limits with _ and ^. Write \sum_{i=1}^{n} and \int_{0}^{1}. In display mode the limits sit under and over the symbol for sums, and to the right for integrals, which is the standard convention.

Matrices live inside an environment. Rows end with \\ and columns are separated by &:

\begin{pmatrix} a & b \\ c & d \end{pmatrix}

That produces a 2 by 2 matrix in round brackets. Use bmatrix for square brackets and vmatrix for the vertical bars of a determinant.

Count your braces before you count your errors. The single most common failure is a missing closing brace, which makes MathJax swallow the rest of the line. If a formula suddenly stops rendering after a certain point, look for an unclosed { just before that point.

A worked example: the Gaussian integral

Building the equation step by step

Suppose you want the normal distribution's integral, a formula that combines a fraction, a square root, an exponential with a nested fraction, and integral limits at infinity. Target output:

\int_{-\infty}^{\infty} \frac{1}{\sigma\sqrt{2\pi}} \, e^{-\frac{(x-\mu)^2}{2\sigma^2}} \, dx = 1

Assemble it in five moves.

The integral sign with limits from minus to plus infinity: \int_{-\infty}^{\infty}. The command \infty draws the infinity symbol.
The normalizing coefficient as a fraction: \frac{1}{\sigma\sqrt{2\pi}}. Here \sigma is σ and \pi is π, both under a single square root.
A thin space \, to separate the coefficient from the exponential, so the parts do not crowd.
The exponential term: e^{-\frac{(x-\mu)^2}{2\sigma^2}}. The whole fraction is the exponent, so it sits inside the braces after ^. \mu is μ.
Close with \, dx = 1. The integral of a probability density over all outcomes equals 1, which is why the right side is exactly 1.

Paste those pieces together in order and you reproduce the display above. Change \sigma to a fixed number such as 2 and the shape of the exponent changes but the syntax does not.

Reading and interpreting the output

The rendered formula is not a bitmap by default; MathJax builds it as vector shapes with real spacing. That matters when you export. SVG output is a vector file: it scales to any size with no blur, which suits printed documents and web pages where readers zoom. PNG output is a raster image rendered at 2× resolution, meaning a formula that occupies 300 CSS pixels wide is written as a 600 pixel image, so it stays sharp on high-density displays. PNG also offers a transparent background so the formula sits cleanly on any slide color.

You can also copy the MathML source. MathML is the W3C standard for math on the web, and copying it lets you embed the formula in HTML or an ebook where the reader's browser does the rendering, keeping the math selectable and searchable rather than frozen as an image.

Choosing an export format
Format	Type	Scales cleanly	Best for
SVG	Vector	Yes, any size	Documents, print, web
PNG	Raster, 2×	Down only	Slides, chat, email
MathML	Markup	Yes, browser renders	Accessible web pages

Common mistakes

Four errors account for most broken formulas.

Missing braces on multi-character scripts. As the widget shows, x^10 is x-to-the-1 followed by 0. Always write x^{10}.

Using text characters as operators. Typing x < y can confuse an HTML context because the bare < looks like a tag. In LaTeX prefer \lt and \gt, or the relational commands \le and \ge for the combined signs.

Forgetting that spacing is automatic. Writing sin x renders s, i, n as three multiplied variables in italics. Use the operator command \sin x so it prints upright and with correct spacing. The same holds for \log, \lim and \max.

Unescaped special characters. The symbols %, &, #, _ and {} have meaning in LaTeX. To print a literal percent sign write \%, and for a literal underscore in text write \_.

MathJax supports the math subset only. Commands like \textbf work inside \text{}, but document-level commands such as \newcommand defined in a preamble, custom packages, and TikZ drawings will not render here. If you need those, compile a full LaTeX document with a real TeX installation.

Related tools on this site

If your math comes from computation, the Python Playground runs numpy, pandas and matplotlib in the browser, so you can derive a result there and typeset it here. For diagrams rather than equations, the Flowchart & Diagram Editor draws shapes, arrows and labels and exports the same SVG and PNG formats. And when you want to embed rendered math into a live page, the HTML & JS Playground lets you paste MathML or SVG and preview it immediately.

Frequently asked questions

Why does my formula stop rendering halfway through?

Almost always an unclosed brace. MathJax reads from the opening { until it finds a match, and if none exists it consumes everything after it. Find the last construct that rendered correctly and check the command just after it for a missing }.

How do I write a matrix or a system of equations?

Use an environment. For a matrix, \begin{pmatrix} a & b \\ c & d \end{pmatrix} gives a 2 by 2 array. For aligned equations, \begin{aligned} x &= 1 \\ y &= 2 \end{aligned} lines up the equals signs at the &.

Is SVG or PNG better for my slides?

PNG is usually simpler for slides and chat because those tools embed raster images directly. This editor renders PNG at 2× resolution, so a formula stays sharp when projected. Choose SVG for documents and web pages where readers may zoom, since vectors never blur.

Can I paste an entire LaTeX paper and render it?

No. Only the math mode subset renders. Extract the equations between your math delimiters and paste those. Document structure, packages and TikZ are not supported.

Will my equations be saved if I close the tab?

Recent equations are kept in your browser's local storage, so reopening the page restores them. Nothing is sent to a server, so clearing your browser data or switching devices loses them.

Try it yourself in the tool