SumIt Help

📐 Overview

SumIt is a browser-based math, physics and chemistry equation studio. It works fully offline as a Progressive Web App — every library and AI model is bundled locally, all data stays in your browser, no account required.

• Editor — type or paste LaTeX with autocomplete, formula library, and multi-line support
• Dictate — speak equations using your microphone
• Draw — handwrite equations, or upload / paste / drag-drop an image of one, and recognise with the bundled AI model
• Scientific — full scientific calculator with memory and DEG/RAD modes
• Graphing — plot up to 6 functions simultaneously (Cartesian, polar, parametric)
• Chemistry — render reactions and chemistry-specific formulas via mhchem
• History — review, reload, and export saved equations

☰ Navigation & Settings

The ☰ button at the top-left opens a slide-out menu listing every mode. The current mode is highlighted; click any item to switch. Use ↑ / ↓ to move between items with the keyboard, Esc to close.

Settings

Open Settings from the bottom of the menu. All preferences are stored in your browser and persist across sessions.

✏️ Editor

The editor uses a rich math field — you can type LaTeX directly or use the on-screen keyboard. The field itself shows the equation typeset live as you edit. Below, a single output card has tabs for the other useful representations: LaTeX, MathML, Spoken. Click any tab to switch view; the content updates live as you type.

Autocomplete

As you type a word (≥ 2 letters) the autocomplete dropdown shows matching Greek letters, operators, set symbols, and formula triggers. Examples:

• Type alpha → suggests \alpha (α)
• Type sqrt → suggests \sqrt{}
• Type reals, integers, naturals, complex, rationals → suggests \mathbb{R}, \mathbb{Z}, \mathbb{N}, \mathbb{C}, \mathbb{Q} (the blackboard-bold number sets ℝ, ℤ, ℕ, ℂ, ℚ)
• Type qform → suggests the quadratic formula
• Type schrod (with the Symbols button on) → suggests Schrödinger equations

Use ↑ / ↓ to navigate, Enter or Tab to accept, Esc to dismiss. Frequently-used suggestions float to the top of the list automatically.

Buttons

Output views

The card below the editor has three tabs that mirror the current equation:

• LaTeX — the raw source you typed (or that MathLive emitted on your behalf).
• MathML — the equation as standards-compliant MathML, ready to paste into Word or any MathML-aware tool. The Copy for Word menu item wraps this in a Word-friendly document so paste keeps the equation editable.
• Spoken — the plain-English reading of the equation, exactly the text that Read aloud would speak. Useful for checking how a screen reader or TTS engine will narrate your formula.

Read aloud

The ▶ Read aloud button speaks the equation through your operating system's TTS voice and shows a red underline / outline on the rendered equation that tracks the word being spoken. Atoms (variables, operators, numbers) get an underline; surrounding structures (fractions, square roots, parens, sums) get an outline so you can see the whole construct the voice is currently inside.

The text the engine is sent is a careful rewriting of the LaTeX into spoken English. Some of the conventions:

• Number sets — \mathbb{R}, \mathbb{Z}, \mathbb{C}, \mathbb{N}, \mathbb{Q}, \mathbb{H}, \mathbb{P} read as "the real numbers", "the integers", "the complex numbers", "the natural numbers", "the rationals", "the quaternions", "the primes". \mathbb{F}, \mathbb{K} and other generic letters read as the bare letter name.
• Greek — \alpha as "alpha", \theta as "theta", etc. Variant forms (\varepsilon, \varphi) read the same as their base letter.
• Fractions, roots, sums — "the fraction X over Y end fraction", "the square root of … end square root", "the summation from i equals 1 to n of …".
• Hyperbolic functions — \sinh, \cosh, \tanh read as "shine", "kosh", "tanch" — the conventional spoken forms among mathematicians.
• Chemistry — \ce{H2O} reads "H 2 O" (each element letter), reaction arrows as "yields" / "in equilibrium with", square brackets around a species as "the concentration of …".
• Multi-line — each line of an align environment is read as its own equation with a clear pause between.

Highlight sync & the welcome utterance

The first time the page loads — and again whenever you change voice or speech rate in Settings — SumIt speaks "Welcome to Sum It" as a calibration utterance. This serves three purposes:

1. It demonstrates the highlight in action so you can immediately see that the visual feedback is working.
2. It measures the offset between the engine's word-boundary events and the actual audio playback. Some browsers fire boundary events ahead of the audio buffer; the calibration records the lag and applies it to every subsequent utterance so the highlight tracks the audio rather than running ahead of (or behind) it.
3. Different voices have different timing characteristics, so the measurement is redone whenever you switch voice in Settings → Speech.

On the Windows desktop wrapper the SAPI speech bridge fires its progress events in lock-step with the audio, so the welcome utterance is skipped and highlights fire synchronously — no calibration needed.

📚 Formula Library

The library bundles 300+ named formulas across maths, physics, chemistry, engineering, and physical constants. Click 📚 Formulas in the relevant tab to open it.

• Editor (Symbols off) — algebra, trig, calculus, linear algebra, geometry, statistics, discrete maths, engineering, constants
• Editor (Symbols on) — adds mechanics, electromagnetism, thermodynamics, quantum, relativity, optics & waves
• Chemistry tab — chemistry reactions and formulas only

The visible set is also filtered by the Level setting: ≤ 16, 16 – 18, University, or All. Picking a level shows everything up to and including it.

Use the search box to filter by name, id, or keyword. Click any card to insert the formula at the cursor; close with Esc or the ✕ button. The same trigger ids power the autocomplete dropdown.

🎤 Speak

Click Start listening and speak your equation naturally. Examples:

• "x squared plus two x equals zero"
• "square root of nine over three"
• "the integral of x squared"

The recognised text is converted to LaTeX automatically. Click Send to Editor to transfer it. Requires a browser with Web Speech API support (Chrome or Edge recommended).

✍️ Draw

Handwrite an equation on the canvas, then click Recognise — or feed in an existing image with Upload Image, clipboard paste, or drag-and-drop. A bundled neural network (~117 MB) is loaded into memory the first time you recognise — subsequent recognitions are immediate. Nothing is sent to any server. If the model fails to load, handwriting recognition silently falls back to the bundled template-matcher.

Controls

Live preview & correction

With Live preview on, recognition runs after each stroke. Each detected symbol appears with a faint dashed box on the canvas — click any box to pick a different interpretation from the alternates. Picking an alternate also teaches the matcher: that drawing is silently saved as a template tagged with your chosen symbol, so future similar shapes prefer it.

To keep things stable as you write, when you start a new mark clearly to the right of everything before it, the prior strokes are committed and stop being re-evaluated — only the latest active group is recognised on each stroke.

Recognition result

The result card (visible in the Draw screenshot above) shows the rendered equation as the primary content. Directly below it, Other interpretations chips appear whenever the model has more than one plausible reading — click any to swap the rendered result. The LaTeX source panel is open by default so you can scan it for misreads before sending; the raw text can be hand-edited there if a single character is wrong. Use Send to Editor to transfer the (possibly corrected) equation, or Clear & retry to discard everything.

Recognise from an image

Already have an equation as an image — a screenshot, a scan, or a photo? Three ways to feed it in:

• Upload Image — opens a file picker for PNG, JPEG, WebP, or GIF
• Paste — copy any image to the clipboard, then press Ctrl + V with the Draw tab visible
• Drag and drop — drag a file from your file manager onto the canvas; the dashed border highlights to show it accepts the drop

The image is auto-cropped tightly to its non-white content — only ~4% padding around the equation, with a one-neighbour noise filter so JPEG specks or dust on a scan don't inflate the bounding box and shrink the equation inside the model's 384×384 input. It's then handed to the same AI model the handwriting flow uses. The result appears in the same recognition card with the other-interpretations chips, the LaTeX source panel, and Send to Editor. Nothing leaves your machine.

Best results come from a single equation on a roughly white background. The recogniser is trained for one formula at a time, so a full textbook page with paragraphs of body text mixed in will confuse it — crop tightly first. Coloured pen on coloured paper is harder than dark ink on light paper, and a phone photo works best held square to the page.

Train your handwriting

Open the Train your handwriting panel to teach the template-matcher new symbols.

1. Draw a single symbol on the canvas above.
2. Click what you wrote. The picker shows Best guesses from the matcher plus a categorised grid of common symbols (Numbers, Operators, Brackets, Letters, Capitals, Greek, Math symbols).
3. The drawing is saved as a user template; the canvas clears so you can train the next symbol.

Power users can still type LaTeX directly via the Advanced — type LaTeX directly details. Saved templates appear in Your saved templates; right-click (or long-press on touch) any tile to delete it. Remove my templates wipes them all.

🔢 Scientific Calculator

A full scientific calculator powered by math.js. Switch between degree and radian modes using the DEG / RAD toggle.

Functions

• Trigonometry: sin, cos, tan and their inverses (correct in both DEG and RAD)
• Logarithms: log (base 10), ln (natural)
• Powers: x², xʸ, 1/x
• Other: √, |x|, n!, π, e
• Memory: MC clear, MR recall, M+ add to memory (true accumulator)
• Smart wrapping: typing -4 then √ gives √(-4); cos(30) then sin gives sin(cos(30))

Keyboard shortcuts

While the Scientific tab is active, you can type numbers and operators directly. Enter evaluates, Backspace deletes, Esc clears.

Use Send to Editor to transfer the result to the equation editor.

📈 Graphing Calculator

Plot up to 6 functions simultaneously. Each function is colour-coded. Three modes:

• Cartesian — sin(x), x^2 - 3, sqrt(x)
• Polar — 2 + 2*sin(theta) or cos(3*theta) (both theta and \theta work)
• Parametric — cos(t) ; sin(t) (separate x and y with ;; t ranges over the visible x-domain)

Switching modes preserves your edited functions; defaults are only seeded when you haven't customised anything.

Controls

• Edit any expression field — the graph updates as you type
• Adjust the x range inputs to change the horizontal domain (input or change events)
• Click + Add function to plot an additional curve (max 6)
• Click ✕ beside a function to remove it
• 🔊 Audio trace sonifies the function — click again to stop
• ▶ Read aloud describes the plotted functions
• Send to Editor transfers the focused function to the equation editor (confirms before overwriting; Ctrl+Z restores the previous equation if needed)

⚗️ Chemistry

The Chemistry tab renders chemical formulas and reactions using the mhchem KaTeX extension. The input box accepts two flavours:

• Reactions — bare mhchem syntax, e.g. H2SO4 + 2NaOH -> Na2SO4 + 2H2O (auto-wrapped in \ce{...})
• Pure LaTeX — formulas like \text{pH} = -\log_{10}[H^+] render as-is (no wrapping)

mhchem syntax

Click 📚 Formulas to browse 20+ chemistry formulas, or use the chip bar for arrows, states, and special symbols.

▶ Read aloud speaks the current formula or reaction in plain English — element symbols are read letter-by-letter (e.g. NaCl → "N A C L"), + reads as "plus", -> as "yields", <=> as "in equilibrium with", subscripts and charges are voiced, and [X] reads as "the concentration of X". Uses the same voice you've selected for Read aloud on the Editor tab.

🕐 History

Every equation you save in the Editor or Chemistry tab appears here (capped at 500 entries; older saves are auto-trimmed if storage runs short). Click Load to restore an equation to the Editor (confirms before overwriting). Click Export all (JSON) to download your full history. Stored in your browser's localStorage — never transmitted.

♿ Accessibility

SumIt is built for keyboard, screen-reader, and reduced-motion users. Every command is reachable without a mouse.

Keyboard navigation

• Tab / Shift+Tab moves between controls
• Enter or Space activates buttons; Esc closes any modal, drawer, or dropdown
• ↑ / ↓ / ← / → / Home / End move between adjacent tabs and menu items (output card, formula categories, symbol palette, train picker, drawer items, Copy ▾)
• Modals trap focus inside while open and restore focus to the trigger when closed
• A Skip to main content link appears as the first focus stop on every page

Global shortcuts

Screen-reader support

• Toast messages and the Recognition card are live regions — screen readers announce updates automatically
• The math-field is labelled and exposed as a textbox; equation MathML is shipped to assistive tech via the math-field's accessible name
• Page title updates as you switch modes ("Editor — SumIt", "Graphing — SumIt", …)

Visual accommodations

• Reduced motion — when your OS has "reduce motion" enabled, all transitions and the drawer slide are disabled
• Themes — every bundled theme passes WCAG AA contrast for text and muted text against its surfaces
• Touch targets — all controls hit a minimum 44 × 44 px on touch devices
• Focus rings — every interactive element shows a visible focus indicator when reached by keyboard (suppressed for mouse users via :focus-visible)

⚖️ Credits & Licences

SumIt is built on open-source libraries, all with licences compatible with commercial use. Full attributions and licence text live in LICENSES.md.