svelte-tex

Svelte Component to convert TeX to rendered SVG using MathJax or rendered MathML using Temml.

Try It Online

Svelte 5 Ready

Features

• Convert TeX to SVG using MathJax
• Convert TeX to MathML using Temml
• Support MathJax options
• Support Temml options

Installation

npm install svelte-tex

Usage

MathML is more recommended since MathSVG bundle size is not small.

MathML

<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={{}} />

MathSVG

<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' }} />

: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