<math-field>
The Math Editor for the Web
A flexible, powerful, and accessible way to write math on the web.
```live
:::style
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;
}
}
:::html
Start typing math below:
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} ```
The gold standard, for beautiful math typesetting.
Mathfields support 800 LaTeX commands.
Fully customizable and makes math input easy on desktop and mobile.
MathField is an open source project available on GitHub. Contributions are welcome.
Individuals and commercial partners are encouraged to support financially the project.
### E-Learning Made Engaging
Enable interactive math quizzes, exercises, and problem-solving tools that check answers in real-time
<ReadMore path="/tutorials/simple-quiz/">
Read this step-by-step tutorial to build a **simple quiz** <Icon name="chevron-right-bold" />
</ReadMore>
<ReadMore path="/mathfield/guides/fill-in-the-blank/" >
Learn more about authoring **fill-in-the-blank** questions <Icon name="chevron-right-bold" />
</ReadMore>
</div>
### Scientific Computing & Research
Render complex formulas and let users symbolically manipulate equations.
<ReadMore path="/compute-engine/guides/symbolic-computing/" >
Use mathfields with the <strong>Compute Engine</strong><Icon name="chevron-right-bold" />
</ReadMore>
### Interactive Online Calculators
<p>Build real-time calculators that evaluate math expressions dynamically</p>
<ReadMore path="/compute-engine/guides/numeric-evaluation/" >
Use the <strong>Compute Engine</strong> to evaluate the user's input<Icon name="chevron-right-bold" />
</ReadMore>
### Beautiful Math Documentation
Embed math seamlessly in **blogs**, **wikis**, and **papers**, ensuring clarity and readability