The latest articles on DEV Community by Viscous (@viscous). https://dev.to/viscous https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4236755%2F4d28bfbf-2364-472b-8699-95c556493a1c.png https://dev.to/viscous en Viscous Tue, 10 Nov 2026 10:10:31 +0000 https://dev.to/viscous/i-built-a-free-latex-equation-editor-with-astro-react-and-katex-21jp https://dev.to/viscous/i-built-a-free-latex-equation-editor-with-astro-react-and-katex-21jp <p>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.</p> <h2> What it does </h2> <ul> <li>Type LaTeX code or edit the rendered math directly</li> <li>Both stay in sync</li> <li>Live preview with clear error messages</li> <li>Copy as LaTeX, MathML, KaTeX HTML, PNG or SVG</li> <li>Saves your equations in the browser only</li> <li>14 languages</li> </ul> <h2> The stack </h2> <ul> <li> <strong>Astro</strong> for the content pages (fast static HTML)</li> <li> <strong>React</strong> for the editor, symbol palette and library</li> <li> <strong>KaTeX</strong> to render the math</li> <li> <strong>MathLive</strong> for the visual editing</li> <li> <strong>CodeMirror</strong> for the code panel with autocomplete</li> <li> <strong>Tailwind CSS</strong> for styling</li> <li> <strong>IndexedDB</strong> for the local library</li> </ul> <h2> Things I learned </h2> <p><strong>Lazy loading the editor.</strong> 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.</p> <p><strong>Exporting images in the browser.</strong> 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.</p> <p><strong>Keeping code and visual editor in sync.</strong> MathLive and CodeMirror both own the equation. I had to be careful about which one updates the other, or the cursor jumps.</p> <p><strong>Translating symbol names.</strong> All 14 languages translate the symbol names too, so people can search in their own language.</p> <h2> Try it </h2> <p>Latex Equation Editor: <a href="https://latexequationeditor.com/" rel="noopener noreferrer">https://latexequationeditor.com/</a> is live and free.</p> <p>What would you add? I read every comment.</p> showdev webdev javascript latex