HTML 28 💻 Mathematical Markup Language
MathML (Mathematical Markup Language) is an XML-based markup language used to describe mathematical notations and formulas. It allows you to embed complex mathematical expressions directly into web pages in a structured, accessible way.
What is MathML?
MathML is designed to integrate mathematical formulas into websites, making them machine-readable, accessible to screen readers, and renderable by browsers.
Key Characteristics:
- XML-based markup language
- Can be directly embedded in HTML5
- Modern browsers support MathML natively
- Accessible — screen readers can interpret and read formulas aloud
- Semantic — describes the structure of mathematical expressions
Basic Syntax:
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo>-</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>-</mo>
<mn>4</mn>
<mi>a</mi>
<mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>This renders as the quadratic formula:
x = (-b ± √(b² – 4ac)) / 2a
MathML Elements
Core Elements
| Element | Purpose | Description |
|---|---|---|
<math> | Root element | Container for the entire MathML expression |
<mrow> | Horizontal group | Groups elements horizontally (like parentheses) |
<mi> | Math identifier | Variables (e.g., x, y, a, b) |
<mo> | Math operator | Operators (e.g., +, −, ×, ÷, =, ±, √) |
<mn> | Math number | Numerical literals (e.g., 2, 4, 10) |
<mfrac> | Fraction | Numerator and denominator |
<msqrt> | Square root | Square root of an expression |
<msup> | Superscript | Base and exponent (e.g., x²) |
<msub> | Subscript | Base and subscript (e.g., x₁) |
<mtable> | Table | Matrix or array |
<mtr> | Table row | Row in a matrix |
<mtd> | Table cell | Cell in a matrix |
Common MathML Elements
1. Basic Math Identifiers & Operators
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>E</mi>
<mo>=</mo>
<mi>m</mi>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
</math>E = mc²
2. Fractions
<math>
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
</math>½
3. Square Root
<math>
<msqrt>
<mn>2</mn>
</msqrt>
</math>√2
4. Subscript
<math>
<msub>
<mi>H</mi>
<mn>2</mn>
</msub>
<mi>O</mi>
</math>H₂O
5. Superscript
<math>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>=</mo>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</math>a² + b² = c²
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MathML - Mathematical Markup Language</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: #f8f9fa;
line-height: 1.8;
}
h1 {
color: #007bff;
border-bottom: 3px solid #007bff;
padding-bottom: 10px;
}
h2 {
color: #28a745;
margin-top: 30px;
border-left: 4px solid #28a745;
padding-left: 15px;
}
.math-container {
background: white;
padding: 25px;
border-radius: 8px;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
margin: 20px 0;
text-align: center;
}
.math-container math {
font-size: 1.5em;
padding: 15px;
display: inline-block;
background: #f8f9fa;
border-radius: 8px;
min-width: 100px;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 20px 0;
}
.example-box {
background: #e9ecef;
padding: 15px;
border-radius: 6px;
margin: 10px 0;
border-left: 4px solid #007bff;
text-align: left;
}
.code-block {
background: #1e1e1e;
color: #d4d4d4;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
font-family: 'Courier New', monospace;
font-size: 0.9em;
line-height: 1.8;
margin: 10px 0;
text-align: left;
}
.reference-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.reference-table th,
.reference-table td {
padding: 12px;
border: 1px solid #ddd;
text-align: left;
}
.reference-table th {
background: #007bff;
color: white;
}
.reference-table tr:nth-child(even) {
background: #f8f9fa;
}
code {
background: #f4f4f4;
padding: 2px 6px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 0.95em;
color: #dc3545;
}
.badge {
display: inline-block;
background: #28a745;
color: white;
padding: 2px 12px;
border-radius: 20px;
font-size: 0.8em;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Mathematical Markup Language (MathML)</h1>
<!-- ====== SECTION 1: QUADRATIC FORMULA ====== -->
<h2>1. Quadratic Formula</h2>
<div class="math-container">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>−</mo>
<mn>4</mn>
<mi>a</mi>
<mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
<div class="example-box">
<h4>🔍 Code:</h4>
<div class="code-block">
<span style="color: #569cd6;"><math</span> <span style="color: #9cdcfe;">xmlns</span>=<span style="color: #ce9178;">"http://www.w3.org/1998/Math/MathML"</span><span style="color: #569cd6;">></span>
<span style="color: #569cd6;"> <mrow></span>
<span style="color: #569cd6;"> <mi></span>x<span style="color: #569cd6;"></mi></span>
<span style="color: #569cd6;"> <mo></span>=<span style="color: #569cd6;"></mo></span>
<span style="color: #569cd6;"> <mfrac></span>
<span style="color: #569cd6;"> <mrow></span>
<span style="color: #569cd6;"> <mo></span>−<span style="color: #569cd6;"></mo></span>
<span style="color: #569cd6;"> <mi></span>b<span style="color: #569cd6;"></mi></span>
<span style="color: #569cd6;"> <mo></span>±<span style="color: #569cd6;"></mo></span>
<span style="color: #569cd6;"> <msqrt></span>
<span style="color: #569cd6;"> <msup></span>
<span style="color: #569cd6;"> <mi></span>b<span style="color: #569cd6;"></mi></span>
<span style="color: #569cd6;"> <mn></span>2<span style="color: #569cd6;"></mn></span>
<span style="color: #569cd6;"> </msup></span>
<span style="color: #569cd6;"> <mo></span>−<span style="color: #569cd6;"></mo></span>
<span style="color: #569cd6;"> <mn></span>4<span style="color: #569cd6;"></mn></span>
<span style="color: #569cd6;"> <mi></span>a<span style="color: #569cd6;"></mi></span>
<span style="color: #569cd6;"> <mi></span>c<span style="color: #569cd6;"></mi></span>
<span style="color: #569cd6;"> </msqrt></span>
<span style="color: #569cd6;"> </mrow></span>
<span style="color: #569cd6;"> <mrow></span>
<span style="color: #569cd6;"> <mn></span>2<span style="color: #569cd6;"></mn></span>
<span style="color: #569cd6;"> <mi></span>a<span style="color: #569cd6;"></mi></span>
<span style="color: #569cd6;"> </mrow></span>
<span style="color: #569cd6;"> </mfrac></span>
<span style="color: #569cd6;"> </mrow></span>
<span style="color: #569cd6;"></math></span>
</div>
</div>
</div>
<!-- ====== SECTION 2: COMMON FORMULAS ====== -->
<h2>2. Common Mathematical Formulas</h2>
<div class="grid-2">
<!-- Pythagorean Theorem -->
<div class="math-container">
<h3>Pythagorean Theorem</h3>
<math>
<mrow>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>=</mo>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
</math>
<div class="example-box">
<h4>🔍 Code:</h4>
<div class="code-block">
<span style="color: #569cd6;"><math></span>
<span style="color: #569cd6;"> <mrow></span>
<span style="color: #569cd6;"> <msup><mi></span>a<span style="color: #569cd6;"></mi><mn></span>2<span style="color: #569cd6;"></mn></msup></span>
<span style="color: #569cd6;"> <mo></span>+<span style="color: #569cd6;"></mo></span>
<span style="color: #569cd6;"> <msup><mi></span>b<span style="color: #569cd6;"></mi><mn></span>2<span style="color: #569cd6;"></mn></msup></span>
<span style="color: #569cd6;"> <mo></span>=<span style="color: #569cd6;"></mo></span>
<span style="color: #569cd6;"> <msup><mi></span>c<span style="color: #569cd6;"></mi><mn></span>2<span style="color: #569cd6;"></mn></msup></span>
<span style="color: #569cd6;"> </mrow></span>
<span style="color: #569cd6;"></math></span>
</div>
</div>
</div>
<!-- Einstein's Equation -->
<div class="math-container">
<h3>Einstein's Mass-Energy Equivalence</h3>
<math>
<mrow>
<mi>E</mi>
<mo>=</mo>
<mi>m</mi>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
</math>
<div class="example-box">
<h4>🔍 Code:</h4>
<div class="code-block">
<span style="color: #569cd6;"><math></span>
<span style="color: #569cd6;"> <mrow></span>
<span style="color: #569cd6;"> <mi></span>E<span style="color: #569cd6;"></mi></span>
<span style="color: #569cd6;"> <mo></span>=<span style="color: #569cd6;"></mo></span>
<span style="color: #569cd6;"> <mi></span>m<span style="color: #569cd6;"></mi></span>
<span style="color: #569cd6;"> <msup><mi></span>c<span style="color: #569cd6;"></mi><mn></span>2<span style="color: #569cd6;"></mn></msup></span>
<span style="color: #569cd6;"> </mrow></span>
<span style="color: #569cd6;"></math></span>
</div>
</div>
</div>
<!-- Chemical Formula -->
<div class="math-container">
<h3>Chemical Formula (Water)</h3>
<math>
<mrow>
<msub>
<mi>H</mi>
<mn>2</mn>
</msub>
<mi>O</mi>
</mrow>
</math>
<div class="example-box">
<h4>🔍 Code:</h4>
<div class="code-block">
<span style="color: #569cd6;"><math></span>
<span style="color: #569cd6;"> <mrow></span>
<span style="color: #569cd6;"> <msub></span>
<span style="color: #569cd6;"> <mi></span>H<span style="color: #569cd6;"></mi></span>
<span style="color: #569cd6;"> <mn></span>2<span style="color: #569cd6;"></mn></span>
<span style="color: #569cd6;"> </msub></span>
<span style="color: #569cd6;"> <mi></span>O<span style="color: #569cd6;"></mi></span>
<span style="color: #569cd6;"> </mrow></span>
<span style="color: #569cd6;"></math></span>
</div>
</div>
</div>
<!-- Derivative -->
<div class="math-container">
<h3>Derivative</h3>
<math>
<mfrac>
<mrow>
<mi>d</mi>
<mi>f</mi>
</mrow>
<mrow>
<mi>d</mi>
<mi>x</mi>
</mrow>
</mfrac>
<mo>=</mo>
<mn>2</mn>
<mi>x</mi>
</math>
<div class="example-box">
<h4>🔍 Code:</h4>
<div class="code-block">
<span style="color: #569cd6;"><math></span>
<span style="color: #569cd6;"> <mfrac></span>
<span style="color: #569cd6;"> <mrow><mi></span>d<span style="color: #569cd6;"></mi><mi></span>f<span style="color: #569cd6;"></mi></mrow></span>
<span style="color: #569cd6;"> <mrow><mi></span>d<span style="color: #569cd6;"></mi><mi></span>x<span style="color: #569cd6;"></mi></mrow></span>
<span style="color: #569cd6;"> </mfrac></span>
<span style="color: #569cd6;"> <mo></span>=<span style="color: #569cd6;"></mo></span>
<span style="color: #569cd6;"> <mn></span>2<span style="color: #569cd6;"></mn></span>
<span style="color: #569cd6;"> <mi></span>x<span style="color: #569cd6;"></mi></span>
<span style="color: #569cd6;"></math></span>
</div>
</div>
</div>
</div>
<!-- ====== SECTION 3: COMPLEX EXPRESSIONS ====== -->
<h2>3. Complex Expressions</h2>
<div class="grid-2">
<!-- Summation -->
<div class="math-container">
<h3>Summation</h3>
<math>
<mrow>
<munderover>
<mo>∑</mo>
<mrow>
<mi>i</mi>
<mo>=</mo>
<mn>1</mn>
</mrow>
<mi>n</mi>
</munderover>
<msup>
<mi>i</mi>
<mn>2</mn>
</msup>
</mrow>
</math>
<div class="example-box">
<h4>🔍 Code:</h4>
<div class="code-block">
<span style="color: #569cd6;"><math></span>
<span style="color: #569cd6;"> <mrow></span>
<span style="color: #569cd6;"> <munderover></span>
<span style="color: #569cd6;"> <mo></span>∑<span style="color: #569cd6;"></mo></span>
<span style="color: #569cd6;"> <mrow><mi></span>i<span style="color: #569cd6;"></mi><mo></span>=<span style="color: #569cd6;"></mo><mn></span>1<span style="color: #569cd6;"></mn></mrow></span>
<span style="color: #569cd6;"> <mi></span>n<span style="color: #569cd6;"></mi></span>
<span style="color: #569cd6;"> </munderover></span>
<span style="color: #569cd6;"> <msup><mi></span>i<span style="color: #569cd6;"></mi><mn></span>2<span style="color: #569cd6;"></mn></msup></span>
<span style="color: #569cd6;"> </mrow></span>
<span style="color: #569cd6;"></math></span>
</div>
</div>
</div>
<!-- Integral -->
<div class="math-container">
<h3>Integral</h3>
<math>
<mrow>
<msubsup>
<mo>∫</mo>
<mn>0</mn>
<mn>∞</mn>
</msubsup>
<msup>
<mi>e</mi>
<mrow>
<mo>−</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
</mrow>
</msup>
<mi>d</mi>
<mi>x</mi>
</mrow>
</math>
<div class="example-box">
<h4>🔍 Code:</h4>
<div class="code-block">
<span style="color: #569cd6;"><math></span>
<span style="color: #569cd6;"> <mrow></span>
<span style="color: #569cd6;"> <msubsup></span>
<span style="color: #569cd6;"> <mo></span>∫<span style="color: #569cd6;"></mo></span>
<span style="color: #569cd6;"> <mn></span>0<span style="color: #569cd6;"></mn></span>
<span style="color: #569cd6;"> <mn></span>∞<span style="color: #569cd6;"></mn></span>
<span style="color: #569cd6;"> </msubsup></span>
<span style="color: #569cd6;"> <msup></span>
<span style="color: #569cd6;"> <mi></span>e<span style="color: #569cd6;"></mi></span>
<span style="color: #569cd6;"> <mrow><mo></span>−<span style="color: #569cd6;"></mo><msup><mi></span>x<span style="color: #569cd6;"></mi><mn></span>2<span style="color: #569cd6;"></mn></msup></mrow></span>
<span style="color: #569cd6;"> </msup></span>
<span style="color: #569cd6;"> <mi></span>d<span style="color: #569cd6;"></mi></span>
<span style="color: #569cd6;"> <mi></span>x<span style="color: #569cd6;"></mi></span>
<span style="color: #569cd6;"> </mrow></span>
<span style="color: #569cd6;"></math></span>
</div>
</div>
</div>
</div>
<!-- ====== SECTION 4: MATRICES ====== -->
<h2>4. Matrices</h2>
<div class="math-container">
<h3>2×2 Matrix</h3>
<math>
<mrow>
<mo>[</mo>
<mtable>
<mtr>
<mtd><mi>a</mi></mtd>
<mtd><mi>b</mi></mtd>
</mtr>
<mtr>
<mtd><mi>c</mi></mtd>
<mtd><mi>d</mi></mtd>
</mtr>
</mtable>
<mo>]</mo>
</mrow>
</math>
<div class="example-box">
<h4>🔍 Code:</h4>
<div class="code-block">
<span style="color: #569cd6;"><math></span>
<span style="color: #569cd6;"> <mrow></span>
<span style="color: #569cd6;"> <mo></span>[<span style="color: #569cd6;"></mo></span>
<span style="color: #569cd6;"> <mtable></span>
<span style="color: #569cd6;"> <mtr></span>
<span style="color: #569cd6;"> <mtd><mi></span>a<span style="color: #569cd6;"></mi></mtd></span>
<span style="color: #569cd6;"> <mtd><mi></span>b<span style="color: #569cd6;"></mi></mtd></span>
<span style="color: #569cd6;"> </mtr></span>
<span style="color: #569cd6;"> <mtr></span>
<span style="color: #569cd6;"> <mtd><mi></span>c<span style="color: #569cd6;"></mi></mtd></span>
<span style="color: #569cd6;"> <mtd><mi></span>d<span style="color: #569cd6;"></mi></mtd></span>
<span style="color: #569cd6;"> </mtr></span>
<span style="color: #569cd6;"> </mtable></span>
<span style="color: #569cd6;"> <mo></span>]<span style="color: #569cd6;"></mo></span>
<span style="color: #569cd6;"> </mrow></span>
<span style="color: #569cd6;"></math></span>
</div>
</div>
</div>
<!-- ====== SECTION 5: ELEMENT REFERENCE ====== -->
<h2>5. MathML Element Reference</h2>
<table class="reference-table">
<thead>
<tr>
<th>Element</th>
<th>Purpose</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><math></code></td>
<td>Root element</td>
<td><code><math>...</math></code></td>
</tr>
<tr>
<td><code><mrow></code></td>
<td>Horizontal group</td>
<td><code><mrow><mi>a</mi><mo>+</mo><mi>b</mi></mrow></code></td>
</tr>
<tr>
<td><code><mi></code></td>
<td>Math identifier (variable)</td>
<td><code><mi>x</mi></code></td>
</tr>
<tr>
<td><code><mo></code></td>
<td>Math operator</td>
<td><code><mo>=</mo></code></td>
</tr>
<tr>
<td><code><mn></code></td>
<td>Math number</td>
<td><code><mn>2</mn></code></td>
</tr>
<tr>
<td><code><mfrac></code></td>
<td>Fraction</td>
<td><code><mfrac><mn>1</mn><mn>2</mn></mfrac></code></td>
</tr>
<tr>
<td><code><msqrt></code></td>
<td>Square root</td>
<td><code><msqrt><mn>2</mn></msqrt></code></td>
</tr>
<tr>
<td><code><msup></code></td>
<td>Superscript</td>
<td><code><msup><mi>x</mi><mn>2</mn></msup></code></td>
</tr>
<tr>
<td><code><msub></code></td>
<td>Subscript</td>
<td><code><msub><mi>H</mi><mn>2</mn></msub></code></td>
</tr>
<tr>
<td><code><mtable></code></td>
<td>Table (matrix)</td>
<td><code><mtable>...</mtable></code></td>
</tr>
<tr>
<td><code><mtr></code></td>
<td>Table row</td>
<td><code><mtr>...</mtr></code></td>
</tr>
<tr>
<td><code><mtd></code></td>
<td>Table cell</td>
<td><code><mtd><mi>a</mi></mtd></code></td>
</tr>
</tbody>
</table>
<!-- ====== SECTION 6: BEST PRACTICES ====== -->
<h2>6. Best Practices</h2>
<div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
<h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
<ul>
<li>Include the <strong>XML namespace</strong> in the <code><math></code> tag</li>
<li>Use <strong>semantic elements</strong> to describe the structure of the formula</li>
<li>Use <code><mrow></code> to group elements as needed</li>
<li>Test formulas in <strong>multiple browsers</strong> for compatibility</li>
<li>Provide a <strong>text alternative</strong> for formulas as needed</li>
<li>Use <strong>screen reader testing</strong> to ensure accessibility</li>
</ul>
</div>
<div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
<h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
<ul>
<li>Don't use <strong>images</strong> for formulas when MathML is available</li>
<li>Don't forget to close all <strong>MathML tags</strong></li>
<li>Don't use <strong>presentational</strong> MathML when semantic is possible</li>
<li>Don't rely on <strong>MathML</strong> for complex visual rendering without fallback</li>
<li>Don't use <strong>inline CSS</strong> to style MathML — use browser-native rendering</li>
</ul>
</div>
<!-- ====== SECTION 7: ACCESSIBILITY ====== -->
<h2>7. Accessibility</h2>
<div class="math-container" style="text-align: left;">
<div class="example-box">
<h4>♿ MathML and Screen Readers</h4>
<p>
MathML is designed to be <strong>accessible</strong> to screen readers. Properly structured MathML allows assistive technologies to:
</p>
<ul>
<li><strong>Read formulas aloud</strong> with correct mathematical pronunciation</li>
<li><strong>Navigate</strong> through complex expressions</li>
<li><strong>Provide</strong> alternative presentations</li>
</ul>
<p>
<strong>Example:</strong> The quadratic formula above would be read as:
<br>
<em>"x equals negative b plus or minus the square root of b squared minus four a c, all over two a."</em>
</p>
</div>
</div>
</body>
</html>Quick Reference
| Element | Purpose | Description |
|---|---|---|
<math> | Root element | Container for all MathML content |
<mrow> | Horizontal group | Groups elements horizontally |
<mi> | Math identifier | Variables (x, y, a, b, etc.) |
<mo> | Math operator | +, −, ×, ÷, =, ±, √, etc. |
<mn> | Math number | Numerical literals (2, 4, 10, etc.) |
<mfrac> | Fraction | Numerator and denominator |
<msqrt> | Square root | Square root of an expression |
<msup> | Superscript | Base and exponent (x²) |
<msub> | Subscript | Base and subscript (x₁) |
<mtable> | Table/Matrix | Matrix or array structure |
<mtr> | Table row | Row in a matrix |
<mtd> | Table cell | Cell in a matrix |
Common MathML Expressions
| Expression | MathML Code |
|---|---|
| Quadratic Formula | x = (-b ± √(b² − 4ac)) / 2a |
| Pythagorean Theorem | a² + b² = c² |
| Einstein’s Equation | E = mc² |
| Summation | ∑ᵢ₌₁ⁿ i² |
| Derivative | df/dx = 2x |
| Matrix | [a b; c d] |
Pro Tip: MathML is the best way to display mathematical formulas on the web. It’s accessible, semantic, and browser-native. While not all browsers support it perfectly, modern browsers like Chrome, Firefox, Safari, and Edge all support MathML. Use it to make your math content more accessible and maintainable!
Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!
