Svelte Math

Svelte μαθημα.

eiπ=−1

Displaying mathematics in Svelte and SvelteKit

We investigate and showcase various methods of displaying mathematics in Svelte and SvelteKit.

Sprinkles of math

If all you need is a dash of mathematical content on your site/app, we think using a function or a component is the way to go.

Mixing math and prose

For sites/apps that require a lot more mathematical content, especially when interspersed with prose, we recommend a more full-fledged approach.

mdsvex is an established way to work with Markdown in Svelte, with math functionality enabled through remark/rehype plugins.

Inspired by mdsvex, we have also created mathsvex as an alternative approach to Markdown-based content in Svelte.

Comparison

  • Function generates html string to be added to Svelte via the `{@html ...}` tag
  • Code is very readable for simple cases
  • Use of the @html tag present challenges for more complicated use-cases
See demo