Mathfield
<math-field>
The Math Editor for the Web
A flexible, powerful, and accessible way to write math on the web.
math-field {
border: 1px solid var(--neutral-400);
background: var(--neutral-200);
border-radius: 8px;
padding: 8px;
}
@media (pointer: coarse) {
math-field {
border-radius: 16px;
font-size: 1.25rem;
border: 1px solid var(--neutral-100);
background: var(--neutral-700);
--primary-color: white;
color: white;
padding: 16px;
box-shadow:
inset 4px 4px 16px rgb(0 0 0 / 10%),
inset 2px 2px 8px rgb(0 0 0 / 60%);
--smart-fence-color: white;
--caret-color: var(--blue-400);
--selection-background-color: var(--blue-300);
--contains-highlight-background-color: var(--blue-900);
}
math-field:focus {
outline: 4px solid rgb(255 255 255 / 25%);
}
math-field::part(virtual-keyboard-toggle), math-field::part(menu-toggle) {
color: white;
}
}
<p>Start typing math below:</p>
<math-field>
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
</math-field>
Why MathField?
Built on LaTeX
The gold standard, for beautiful math typesetting.
Mathfields support 800 LaTeX commands.
Open Source & Extensible
MathField is an open source project available on GitHub. Contributions are welcome.
Individuals and commercial partners are encouraged to support financially the project.
What Can You Do with MathField?
E-Learning Made Engaging
Enable interactive math quizzes, exercises, and problem-solving tools that check answers in real-time
Scientific Computing & Research
Render complex formulas and let users symbolically manipulate equations.
Interactive Online Calculators
Build real-time calculators that evaluate math expressions dynamically
Beautiful Math Documentation
Embed math seamlessly in blogs, wikis, and papers, ensuring clarity and readability