This component integrates MathJax into your OutSystems Reactive Web Applications, enabling rich, textbook-quality rendering of mathematical notation written in LaTeX, MathML, or ASCIIMath.
Whether you're building educational apps, scientific dashboards, engineering tools, or any app involving mathematical content — this component helps you display complex math in a clean, responsive, and accessible format.
Supports rendering LaTeX-style math expressions using MathJax 3.
Renders both inline and block math content dynamically.
Simple and reusable JavaScript function: pass your math text and target container ID.
Works seamlessly with inputs, expressions, or any dynamic content.
Lightweight: Uses CDN version of MathJax (no backend processing).
Compatible with all modern browsers and responsive design.
latex\int_{a}^{b} x^2 dx = \frac{b^3 - a^3}{3}
\int_{a}^{b} x^2 dx = \frac{b^3 - a^3}{3}
Just call the JavaScript function:
javascriptrenderMathInContainer(text, containerId);
renderMathInContainer(text, containerId);
Add the included MathJax Web Block to your screen (or manually include the CDN script).
Bind any LaTeX-formatted math string to a variable or expression.
Call renderMathInContainer() in a JavaScript node, passing:
renderMathInContainer()
The math expression (text)
text
The container’s ID where it should render (containerId)
containerId
That’s it! MathJax will process and render your equations beautifully.
New Features:
Live Math Rendering via Web Block InputsThe component now automatically renders math expressions when a value is passed to the Web Block’s MathText input.
MathText
No need for manual JavaScript invocation.
Ideal for reactive updates and dynamic content.
Improvements:
Streamlined JavaScript logic to detect and render updated LaTeX expressions directly on Web Block render.