Svelte Component to convert TeX to rendered SVG using MathJax or rendered MathML using Temml.
Supports both Svelte 4 and Svelte 5
svelte-tex/package/v4
svelte-tex/package
(default)npm install svelte-tex
MathML
is more recommended sinceMathSVG
bundle size is not small.
<script lang="ts">
import MathML from 'svelte-tex/package/MathML.svelte';
// use String.raw to escape `\`
const tex = String.raw`\frac{(n^2+n)(2n+1)}{6}`;
</script>
<MathML {tex} />
<!-- or include Temml options -->
<MathML {tex} temmlOptions={{}} />
<script lang="ts">
import MathSVG from 'svelte-tex/package/MathSVG.svelte';
// use String.raw to escape `\`
const tex = String.raw`\frac{(n^2+n)(2n+1)}{6}`;
</script>
<MathSVG {tex} />
<!-- or include MathJax options -->
<MathSVG {tex} texOptions={{}} svgOptions={{ fontCache: 'local' }} />
<script lang="ts">
import MathML from 'svelte-tex/package/v4/MathML.svelte';
// use String.raw to escape `\`
const tex = String.raw`\frac{(n^2+n)(2n+1)}{6}`;
</script>
<MathML {tex} />
<!-- or include Temml options -->
<MathML {tex} temmlOptions={{}} />
<script lang="ts">
import MathSVG from 'svelte-tex/package/v4/MathSVG.svelte';
// use String.raw to escape `\`
const tex = String.raw`\frac{(n^2+n)(2n+1)}{6}`;
</script>
<MathSVG {tex} />
<!-- or include MathJax options -->
<MathSVG {tex} texOptions={{}} svgOptions={{ fontCache: 'local' }} />
:warning: MathSVG is not small for bundle size.
MathJax is not supports TypeScript for options yet
check texOptions from https://docs.mathjax.org/en/latest/options/input/tex.html#tex-input-processor-options
check svgOptions from https://docs.mathjax.org/en/latest/options/output/svg.html#svg-options
The package includes comprehensive tests for both Svelte 4 and Svelte 5 components:
# Run all tests
npm test
# Run tests with UI
npm run test:ui
# Run tests with coverage
npm run test:coverage
/src/lib/v4/
- use traditional export let
syntax/src/lib/
- use modern $props()
syntaxBoth versions provide identical functionality with different syntax approaches for maximum compatibility.