svelte-math

Svelte 5 components for fast, client-side LaTeX rendering with MathJax 4.

Install

npm install github:jtgtools/svelte-math
npm install @mathjax/[email protected]

Usage

<script lang="ts">
    import { InlineMath, DisplayMath, Math } from 'svelte-math';

    const integral = '\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}';
</script>

<p>
    Pythagorean theorem:
    <InlineMath math="x^2 + y^2 = z^2" />
</p>

<DisplayMath math={integral} />

<Math math="E = mc^2" display={false} />
<Math math="E = mc^2" display={true} />

API

InlineMath

• Props: math: string

DisplayMath

• Props: math: string

Math

• Props: math: string, display?: boolean

ready

• Exported promise that resolves when MathJax is loaded and initialized.

import { ready } from 'svelte-math';
await ready;

Notes

• Client-side only (no SSR rendering path).
• Uses MathJax CHTML output.
• TeX delimiters are configured as:
• Inline: $...$
• Display: $$...$$
• Lazy typesets on viewport intersection.
• Avoids redundant typesetting by caching the last rendered math per component instance.
• If typesetting fails, raw input is shown with .svelte-math-error.

Development

npm install
npm run dev
npm run check
npm run build