Render LaTeX Equations as Images

Why render equations as images?

LaTeX produces the gold standard in mathematical typesetting, but the output is locked inside PDF files compiled by a TeX engine. Most of the places where you actually need to show math — slide decks, websites, chat messages, Word documents, README files — cannot interpret LaTeX source code. Rendering your equation to an image bridges this gap: you get LaTeX-quality typography in a format that works everywhere.

The alternative is to approximate the rendering in JavaScript (KaTeX, MathJax) or to use a word processor's built-in equation editor. JavaScript renderers cover a useful subset of LaTeX but miss edge cases, custom packages, and advanced environments. Built-in equation editors (Microsoft Equation, Google Docs) produce visibly different typography that clashes with LaTeX documents. A server-side render from a real TeX engine avoids both problems.

Output formats compared

Each output format has distinct strengths. PNG is the universal fallback; SVG is best for the web; PDF is ideal for print; MathML is the accessibility standard. The table below summarizes the key differences to help you choose.

Step-by-step: Render with FormaTeX

Whether you use the online tool or the REST API, the workflow follows four steps. The online tool provides a visual interface for each option; the API accepts the same parameters as JSON fields.

Advanced rendering options

The default settings produce excellent results for most use cases. When you need fine-grained control over the output, the following options are available in both the online tool and the API. Each option is passed as a JSON field in the API request body.

These options can be combined freely. For example, you can render a white equation on a transparent background at 300 DPI using Latin Modern at 14pt with the siunitx package loaded — all in a single request.

"dpi": 300

"transparent": true

"color": "#ffffff", "bg_color": "#1a1a2e"

"font_size": 14

"font_family": "Latin Modern"

"preamble": "\\newcommand{\\R}{\\mathbb{R}}"

"packages": ["siunitx", "chemformula"]

Embedding equations on the web

Once you have rendered your equation, the next step is embedding it in your HTML page, blog post, or documentation site. There are three primary methods, each with different trade-offs for performance, accessibility, and ease of integration.

For most web projects, inline SVG offers the best balance of quality and performance. Use the img tag approach when you need lazy loading or CDN caching. Choose MathML when accessibility compliance (WCAG, Section 508) is required.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 40">
  <!-- SVG content from the API response -->
</svg>

<img
  src="https://api.formatex.io/api/v1/render/equation?latex=E%3Dmc%5E%7B2%7D&format=svg"
  alt="E equals m c squared"
  width="120"
  height="40"
  loading="lazy"
/>

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <mi>E</mi>
  <mo>=</mo>
  <mi>m</mi>
  <msup><mi>c</mi><mn>2</mn></msup>
</math>

Using the API

The FormaTeX equation rendering API accepts a POST request with a JSON body. Authenticate with a Bearer token (your API key, generated from the dashboard). The response body contains the rendered image bytes. For complete API documentation and client libraries, see the Python API guide and cURL reference.

Below are two examples: a cURL command to render a PNG at 300 DPI with a transparent background, and a cURL command to render an SVG of a Gaussian integral.

# Render a LaTeX equation as a transparent PNG at 300 DPI
curl -X POST https://api.formatex.io/api/v1/render/equation \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "latex": "E = mc^{2}",
    "format": "png",
    "dpi": 300,
    "transparent": true
  }' \
  --output equation.png

# Render a LaTeX equation as an inline SVG
curl -X POST https://api.formatex.io/api/v1/render/equation \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "latex": "\\int_{0}^{\\infty} e^{-x^2} \\, dx = \\frac{\\sqrt{\\pi}}{2}",
    "format": "svg",
    "font_size": 14
  }' \
  --output equation.svg

#!/bin/bash
EQUATIONS=("E = mc^{2}" "a^2 + b^2 = c^2" "\\sum_{n=1}^{\\infty} \\frac{1}{n^2} = \\frac{\\pi^2}{6}")
API_KEY="YOUR_API_KEY"

for i in "${!EQUATIONS[@]}"; do
  curl -s -X POST https://api.formatex.io/api/v1/render/equation \
    -H "Authorization: Bearer $API_KEY" \
    -H "Content-Type: application/json" \
    -d "{\"latex\": \"${EQUATIONS[$i]}\", \"format\": \"png\", \"dpi\": 300}" \
    --output "equation_$i.png"
  echo "Rendered equation_$i.png"
done

import requests

response = requests.post(
    "https://api.formatex.io/api/v1/render/equation",
    headers={
        "Authorization": "Bearer YOUR_API_KEY",
        "Content-Type": "application/json",
    },
    json={
        "latex": r"\nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t}",
        "format": "svg",
        "font_size": 14,
    },
)

with open("maxwell.svg", "wb") as f:
    f.write(response.content)

print(f"Status: {response.status_code}, saved maxwell.svg")

FormaTeX vs alternatives

There are several ways to render LaTeX equations as images, ranging from server-side tools that run a full TeX engine to client-side JavaScript libraries that approximate LaTeX in the browser. The right choice depends on your requirements: output fidelity, format options, API access, package support, and pricing.

Server-side tools (FormaTeX, CodeCogs, LaTeX2Image, QuickLaTeX) produce output identical to compiled LaTeX because they run a real TeX engine. Client-side tools (KaTeX, MathJax) render in the browser using JavaScript and cover a large but incomplete subset of LaTeX. For a detailed comparison, see the full equation renderers comparison.

Key takeaway: If you need pixel-perfect LaTeX output with full package support and a REST API, FormaTeX is the most complete option. If you only need inline browser rendering and do not require downloadable images, KaTeX (fastest) or MathJax (broadest LaTeX coverage) are excellent open-source choices.

Frequently asked questions

Related guides and tools