I built a free LaTeX equation editor with Astro, React and KaTeX

I was tired of compiling a whole LaTeX document just to check one fraction. So I built Latex Equation Editor. It's free, runs in the browser, and needs no login.

What it does

• Type LaTeX code or edit the rendered math directly
• Both stay in sync
• Live preview with clear error messages
• Copy as LaTeX, MathML, KaTeX HTML, PNG or SVG
• Saves your equations in the browser only
• 14 languages

The stack

• Astro for the content pages (fast static HTML)
• React for the editor, symbol palette and library
• KaTeX to render the math
• MathLive for the visual editing
• CodeMirror for the code panel with autocomplete
• Tailwind CSS for styling
• IndexedDB for the local library

Things I learned

Lazy loading the editor. The editor is the heaviest part. The page loads first and the editor fills in a moment later. First load stays quick, even on slow phones.

Exporting images in the browser. KaTeX renders to HTML, so I wrap it in an SVG, embed the fonts, and draw it to a canvas for PNG. You can set scale, color and background.

Keeping code and visual editor in sync. MathLive and CodeMirror both own the equation. I had to be careful about which one updates the other, or the cursor jumps.

Translating symbol names. All 14 languages translate the symbol names too, so people can search in their own language.

Try it

Latex Equation Editor: https://latexequationeditor.com/ is live and free. What would you add? I read every comment.