MathJax

Connect MathJax, an open-source math display engine, with Webflow to render LaTeX equations as typeset formulas with built-in accessibility, screen reader support, and cross-browser consistency.

→

↗

►

↓

←

↑

→

↗

►

↓

←

↑

→

↗

►

↓

←

↑

→

↗

►

↓

←

↑

→

↗

►

↓

←

↑

Webflow does not include native equation rendering for mathematical layout such as fractions, integrals, matrices, and summations. Text elements and rich text fields can display plain characters, superscripts, and basic symbols. Proper equation layout requires a library such as MathJax.

MathJax adds client-side rendering that converts TeX or LaTeX-style mathematical markup into typeset equations directly in the browser. In the TeX-based setup shown here, MathJax scans the page for math delimiters and renders them with proper typography, built-in accessibility, and cross-browser consistency. Site visitors can view equations directly in the browser.

This integration is built for educators creating course sites, researchers publishing findings, technical writers documenting formulas, and science communicators explaining concepts on the web. Any team that already authors in LaTeX or needs equations on a Webflow-hosted site will get immediate use from this setup.

How to integrate MathJax with Webflow

What is MathJax? MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation. In the Webflow examples below, the implementation uses the TeX/CommonHTML component, so the setup shown is for TeX or LaTeX-style input. It renders mathematical expressions in all modern browsers with built-in support for screen readers, speech output, and keyboard navigation. The project is maintained by the MathJax Consortium and released under the Apache License 2.0.

Teams building STEM content on Webflow use MathJax to display equations that would otherwise appear as raw code strings or low-quality image screenshots. The library loads from a CDN, scans for delimiter-wrapped math, and typesets it automatically on page load. Educators, researchers, and technical publishers use this combination to ship math-heavy pages without switching to a different platform.

You can add MathJax in custom code in head tags, place equations with Code Embed elements, or use the Webflow CMS API with the MathJax Node.js package for programmatic math content pipelines. Most implementations combine the first two methods: load MathJax once via head code, then position equations with embeds or text blocks across the site. In the TeX-based configuration shown below, these options support simple page-level rendering and automated content workflows.

Add MathJax with custom code in head tags

Add a <script> tag to your site through custom code in head and body tags to load MathJax. You can load the library site-wide through site settings or on individual pages through page settings. A paid site plan is required, as custom code is not available on the free Starter plan.

MathJax reads a configuration object at load time, so the configuration block must appear before the loader script. Once both are in place, you can write LaTeX directly in any text element on the page using $...$ for inline math or \[...,\] for display math.

Use site-wide loading if most pages on your site contain mathematical notation. Use per-page loading if only a few pages contain math.

Custom code does not render inside Webflow while editing. You need to publish your site or use browser-based Preview mode to verify that equations display correctly. Choose the loading scope based on how widely math appears across your site.

Load MathJax site-wide

Use site-wide loading when most pages on your site contain mathematical notation. The script loads once and applies to every page.

To load MathJax site-wide:

Go to Site Settings > Custom Code.
Locate the Head Code section.
Paste the following code block:

<script>
MathJax = {
  tex: {
    inlineMath: [['\\(', '\\)'], ['

Save and publish your site.

Load MathJax on specific pages

Use per-page loading when only a few pages contain math. Per-page loading avoids adding MathJax's download weight to pages that have no equations.

To load MathJax on a single page:

Open Page Settings for the target page.
Scroll to Custom Code > Inside <head> tag.
Paste the same configuration and script block from the site-wide method.
Save and publish.

Repeat this for each page that needs math rendering. If you later move to site-wide loading, remove the per-page code to avoid loading MathJax twice. That keeps the script setup clean and predictable across your pages.

Embed equations with Code Embed elements

Code Embed elements let you place specific equations at exact positions in your page layout. Use them to drop a formula into a blog post, a lesson module, or a documentation section. Code Embed elements support HTML, CSS, and JavaScript, with a 50,000 character limit per embed. A paid site plan is required.

Before adding a Code Embed element, make sure MathJax is already loaded via the head code method above. Do not duplicate the MathJax script tag inside the embed. The embed should contain only your math markup.

To place an equation with a Code Embed:

Open the Add panel in Webflow.
Drag a Code Embed element onto the canvas where you want the equation.
Paste your math HTML into the embed editor.

For inline math within a sentence:

<p>The quadratic formula: \( x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \)</p>

For display math on its own line:

<p>Einstein's mass-energy equivalence:</p>
[ E = mc^2 ]

For dollar-sign delimiters (requires `[' in your MathJax configuration):

<p>Inline: $x^2 + y^2 = r^2$</p>
<p>Display: $\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$</p>

You can also write LaTeX directly in standard text blocks without a Code Embed element. Type the delimiters and expression in a text block, publish, and MathJax processes them on page load. This gives you a simple way to mix precise equation placement with lighter text-based authoring.

Render math in CMS-driven content

MathJax runs its typesetting pass once when the page loads. Content loaded after that point, such as Webflow CMS items displayed through a Collection List, may appear as raw LaTeX strings. You need to re-trigger MathJax after dynamic content finishes loading.

To re-trigger MathJax on CMS content:

Open Page Settings for the page with CMS content.
In the Before </body> tag section, paste:

&lt;script&gt;
document.addEventListener('DOMContentLoaded', function() {
  if (window.MathJax) {
    MathJax.typesetPromise([document.getElementById('cms-content')])
      .then(function() { console.log('CMS math rendered'); });
  }
});
&lt;/script&gt;

Replace cms-content with the actual ID of your CMS content container.
Save and publish.

Store raw LaTeX strings in Plain Text CMS fields, not Rich Text fields. The rich text editor may escape backslashes and special characters that LaTeX syntax depends on, which causes equations to break. Plain Text fields preserve the LaTeX exactly as entered.

Build with the Webflow and MathJax APIs

For teams that manage large volumes of math content programmatically, the API approach removes manual editing from the workflow entirely. You can store LaTeX in CMS fields via the Webflow Data API, or pre-render equations server-side using MathJax's Node.js package and push the resulting SVG directly into CMS items. This path requires a server-side development environment and familiarity with REST APIs.

Use the Webflow Data API for CMS collections and item management, Webflow webhooks for events when CMS items are created, changed, or published, and the MathJax Node.js package (mathjax-full for v3, @mathjax/src for v4) to convert LaTeX to SVG or HTML server-side.

Together, these pieces let you automate how math content moves from source text to published Webflow pages. They are most useful when you need repeatable processing instead of manual page editing.

MathJax is a rendering library used in the browser or as a Node.js module.

Store LaTeX in CMS fields via API

You can create CMS items containing LaTeX strings through the Webflow Data API, then let client-side MathJax render them when visitors load the page. This approach works well for content pipelines that pull equations from external sources like databases, authoring tools, or research repositories.

To store LaTeX in a CMS item:

Create a CMS collection with a Plain Text field for LaTeX source (for example, latex-source).
Send a POST request to create the item:

curl -X POST "https://api.webflow.com/v2/collections/{collection_id}/items" \
  -H "Authorization: Bearer &lt;token&gt;" \
  -H "Content-Type: application/json" \
  -d '{
    "isArchived": false,
    "isDraft": false,
    "fieldData": {
      "name": "Quadratic Formula",
      "slug": "quadratic-formula",
      "latex-source": "x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}"
    }
  }'

Publish the item using POST /v2/collections/{collection_id}/items/publish or use the /items/live endpoint to create and publish in a single request.

The Data API requires a bearer token with cms:write scope. Use PlainText fields for LaTeX strings to avoid character escaping issues. That keeps the stored source clean before MathJax renders it on the frontend.

Pre-render equations server-side

Server-side rendering eliminates the brief flash of raw LaTeX that occurs with client-side MathJax. You convert LaTeX to SVG in a Node.js function, then push the rendered output to Webflow CMS. No client-side MathJax script is needed on the page.

To pre-render with MathJax Node.js:

Install the MathJax package (npm install mathjax-full for v3, npm install @mathjax/src for v4, or npm install mathjax@4 for the simplified v4 package used in the example below).
Convert LaTeX to SVG:

import MathJax from 'mathjax';

await MathJax.init({
  loader: { load: ['input/tex', 'output/svg'] }
});

const svg = await MathJax.tex2svgPromise('\\frac{1}{x^2-1}', { display: true });
console.log(MathJax.startup.adaptor.serializeXML(svg));

Push the serialized SVG string to a Webflow CMS item via the Data API, storing it in a Rich Text or Plain Text field.

You can pair this with Webflow webhooks to automate the pipeline. When a collection_item_created or collection_item_changed event fires, your server-side function reads the LaTeX source field, renders it, and writes the SVG back to the same CMS item. This creates an automated publishing flow for math content.

What can you build with the MathJax Webflow integration?

Integrating MathJax with Webflow lets you publish math-heavy content with proper typesetting and accessibility without converting every equation to an image or switching to a specialized platform.

Online course sites with lessons: Build a STEM course platform where each lesson page displays properly typeset formulas pulled from CMS fields. An agency used this approach to convert a textbook for the Center for AI Safety from print LaTeX to a web-based format on Webflow.
Research portfolios: Create a personal or departmental research site where published proofs and findings render with built-in screen reader support, speech output, and keyboard navigation. MathJax's Expression Explorer lets visitors interactively navigate equation structures.
Technical documentation with inline formulas: Ship engineering or API documentation that includes signal processing equations, statistical models, or algorithm complexity notation inline with explanatory text. Visitors can right-click any equation to copy it in LaTeX, MathML, or formats compatible with tools like Mathematica and Maple.
CMS-powered math blogs and explainers: Publish articles on physics, statistics, or machine learning where authors write LaTeX in Plain Text CMS fields and equations render automatically on the published page. Content editors update equations through the Webflow Editor without touching code.

If you need more control over large content pipelines or server-side rendering, the API integration path covers those cases.

Frequently asked questions

Does MathJax work on the free Webflow plan?
No. MathJax requires custom code injection, which is only available on paid site plans. The free Starter plan blocks both custom code in head/body tags and Code Embed elements. You need a paid site plan to add the MathJax script tag. See the custom code documentation for details on plan requirements.
Why do my equations show as raw LaTeX in Webflow while editing?
Webflow does not execute JavaScript on the editing canvas. Raw LaTeX strings like $ x^2 $ are expected behavior while editing. To verify rendering, use browser-based Preview mode or publish the site and view the live page. The MathJax integration page confirms this limitation affects all plans — no plan tier renders MathJax in the Designer canvas.
Should I use MathJax v3 or v4 on my Webflow site?
MathJax v3 is the safer starting point. The official integration page references mathjax@3/es5/tex-mml-chtml.js, and it has a stable accessibility track record. MathJax v4 includes built-in accessibility extensions enabled by default and removes the /es5/ directory from CDN paths. If you are starting a new project, review the v4 breaking changes before choosing. Teams with existing v3 configurations should verify v4 behavior before migrating.
Why does `$...$` not work as a math delimiter by default?
MathJax disables single dollar sign delimiters because $ appears frequently in non-math content like prices and currency values. The default inline delimiter is $...$. To enable $...$ , add it to your configuration object using the append syntax so you keep the default delimiters:
MathJax = { tex: { inlineMath: {'[+]': [['$', '$']]} } };
Use \$ to display a literal dollar sign when this option is active. The MathJax delimiter documentation covers additional configuration options.
How do I choose between CommonHTML and SVG output?
SVG output (tex-svg.js) is often a safer choice for Webflow sites because it renders as self-contained SVG elements that do not inherit or conflict with your site's CSS. CommonHTML output (tex-chtml.js) uses HTML and CSS, which can pick up Webflow's global styles and produce unexpected results. The MathJax output format documentation compares the two formats in detail.

MathJax

Joined in

Description

Renders LaTeX notation on Webflow sites by loading MathJax through custom code in head tags or Code Embed elements.

→

↗

►

↓

←

↑

This integration page is provided for informational and convenience purposes only.

Other Plugins and integrations library integrations

MathJax

Connect MathJax, an open-source math display engine, with Webflow to render LaTeX equations as typeset formulas with built-in accessibility, screen reader support, and cross-browser consistency.