Component-based approach

Overview

If you prefer a more component-based approach, we have authored Svelte Math.

Demo

Static Math

With props

Inline:

A = π r^{2}

Display:

A = π r^{2}

With slots

A = \pi r^2

Reactive variables

\frac{2}{13}

Source code

Installation

Include the Temml fonts and css.

Props vs slots

The slots approach usually look cleaner, but will often lead to errors for expressions with curly braces (which is relatively common in $L A T E X$ ).

When we use the expression \frac{a}{b} within a slot, Svelte will try to look for a variable named a and b and will throw an error if it can’t find them.

Using props instead allow us to write "\\frac{a}{b}" to represent $\frac{a}{b} .$ If interpolation is desired, then

will enable us to represent $\frac{2}{b} .$

Remember to escape backslashes when typing $L A T E X$ commands in a JavaScript string!