Scientific web 5 min read

Interactive scientific web documents with mathpad

mathpad is the HTML format from Sarmate.net to publish scientific documents on the web — math courses, physics, chemistry, exercises, exams — that are interactive and responsive on every screen size. KaTeX formulas, manipulable JSXGraph figures, automatic variation tables, Python code runnable directly in the page, embedded Excel-style spreadsheets with formulas — everything a PDF cannot do. Everything is edited through the online editor optimized for mathpad.

You probably landed here because… you converted a LaTeX course with our LaTeX → mathpad converter and now want to edit the result or write your own mathpad files from scratch. This documentation is for you.

What is mathpad, exactly?

A collection of semantic HTML tags (<mp-course>, <mp-definition>, <mp-theorem>, <mp-vartable>, <mp-jsxgraph>…) that a lightweight JavaScript runtime (mathpad.js) transforms into fully styled pedagogical blocks — with auto-numbering, themes, navigation, KaTeX and SVG arrows for variation tables.

100% responsive

Smartphone, tablet, classroom projector — the mathpad file adapts on its own. No PDF with overflowing margins.

KaTeX built-in

Write your formulas in $…$ as in LaTeX — they're rendered in the browser without images (selectable, indexable).

Interactive JSXGraph figures

With the <mp-jsxgraph> tag, embed manipulable figures (drag points, sliders) — function plots, geometry, probability, rendered directly in the browser.

Python runnable in the page

With the <mp-code runnable> tag, embed Python with a green « Run » button. The reader edits the code, clicks, sees the result — turtle and pygame included. Impossible in a PDF.

Excel-style spreadsheets

The <mp-spreadsheet> tag embeds an editable grid with formulas (SUM, AVERAGE, MIN, MAX, cell refs A1, $A$1) — the reader fills cells and watches formulas recompute live.

Sign & variation table editor

10 ready-to-insert templates (signs with zero, forbidden value, product; variations with extremum, derivative sign…), auto-generated SVG arrows, responsive rendering — one click to insert. On a PDF you'd have to copy-paste tikz source code.

Who is mathpad for?

Math and science teachers who want to publish their courses online without producing PDFs unreadable on a smartphone
Scientific authors looking for a living format with variation tables, JSXGraph figures, collapsible corrections
Prep school or university students sharing their notes in a presentable format — no more Word, no more poorly rendered PDFs
Publishers and online training providers wanting an indexable, lightweight, accessible format

Create a mathpad file

Open your drive

Create a new HTML file

Click New file and select HTML (.html). Mathpad tags work in any HTML file that loads mathpad.css and mathpad.js.

Name your file

For example linear-functions.html or chap1-sequences.html.

The minimal skeleton

Every mathpad file shares the same head: KaTeX (for the formulas) and mathpad.css / mathpad.js (for the <mp-*> tags).

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My course</title>
    <link rel="stylesheet" href="https://www.sarmate.net/mathpad/mathpad.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"
        onload="renderMathInElement(document.body)"></script>
    <script defer src="https://www.sarmate.net/mathpad/mathpad.js"></script>
</head>
<body>

<mp-course lang="en" theme="ocean">
    <!-- Your content here -->
</mp-course>

</body>
</html>

What does <mp-course> do? It's the root tag — it activates the theme system, auto-numbering of blocks (Definition 1, Theorem 2…) and the bottom navigation bar. The theme attribute accepts: ocean, foret, lavande, corail, rose, ardoise, sepia, nuit.

Your first "Hello world"

Here is a complete 20-line example with a title, a definition and a KaTeX formula:

HTML

<mp-course lang="en" theme="ocean">

  <mp-meta>
    <mp-doc-title>Linear functions</mp-doc-title>
    <mp-author>Firstname Lastname</mp-author>
    <mp-date>2026-06-07</mp-date>
  </mp-meta>

  <mp-chapter><mp-title>Definition and properties</mp-title>

    <mp-section><mp-title>Definition</mp-title>

      <mp-definition><mp-title>Linear function</mp-title>
        A function $f$ defined on $\mathbb{R}$ is linear when there exist two real numbers $a$ and $b$ such that, for all $x \in \mathbb{R}$,        $$f(x) = ax + b.$$
      </mp-definition>

    </mp-section>
  </mp-chapter>

</mp-course>

Save the file and open the preview in the editor: you see a styled title with gradient, a numbered chapter and section title, a blue "Definition 1" block and the formula rendered by KaTeX.

Live preview The Sarmate.net editor shows a real-time preview of your mathpad — each edit is re-rendered instantly (KaTeX recompiled, themes toggled, figures regenerated).

Two shortcuts that save a lot of time

LaTeX → mathpad

Already have a LaTeX course? Convert it to mathpad in one click. tikz/PSTricks figures compiled to PNG server-side.

Iterate with an AI via MCP

Connect Claude / Gemini / Mistral to your Sarmate drive and let the AI polish, fix, enrich your mathpad.

What's next?

This documentation covers every aspect of mathpad. Here is the recommended learning path:

Document structure — mp-course, mp-chapter, mp-section, mp-toc
Mathematics (KaTeX) — $…$ vs $$…$$, mp-align, common pitfalls
Formal blocks — definition, theorem (+ROC), property, proposition, lemma, proof
Pedagogical blocks — example, activity, exercise, correction, method, remark, warning
Presentation — mp-box, mp-figure, mp-blank
Tables and variations — mp-spreadsheet, mp-vartable with auto arrows
Interactive graphics — mp-jsxgraph

Ready to try mathpad?

Create your first interactive scientific HTML document in the online editor, or import your existing LaTeX course in one click.

Open the editor Import a .tex

Next page → Document structure