katex-svelte

Svelte 5 wrapper for KaTeX — render LaTeX math and chemistry equations using mhchem (\ce{} notation).

Install

bun add katex-svelte

Setup

Import KaTeX styles once in your root layout:

<!-- src/routes/+layout.svelte -->
<script>
  import 'katex-svelte/styles'
</script>

Chemistry components

ChemEquation — inline chemistry

<script>
  import { ChemEquation } from 'katex-svelte'
</script>

<!-- Water -->
<p>Water is <ChemEquation formula="H2O" />.</p>

<!-- Reaction -->
<p><ChemEquation formula="CH4 + 2O2 -> CO2 + 2H2O" /></p>

<!-- Ionic -->
<p><ChemEquation formula="Fe^{2+} + 2e^- -> Fe" /></p>

<!-- Equilibrium -->
<p><ChemEquation formula="N2 + 3H2 <=> 2NH3" /></p>

<!-- With condition above arrow -->
<p><ChemEquation formula="2H2 + O2 ->[\Delta] 2H2O" /></p>

ChemBlock — display equation

<ChemBlock
  formula="6CO2 + 6H2O ->[\text{light}][\text{chlorophyll}] C6H12O6 + 6O2"
  label="Photosynthesis"
  number={1}
/>

ChemAuto — auto-render mixed text

<ChemAuto
  text="Water (\ce{H2O}) has a molar mass of $18\text{ g/mol}$.
        The pH is defined as $$pH = -\log_{10}[\ce{H+}]$$"
/>

ChemNotation — labelled notation card

<ChemNotation
  formula="H2SO4"
  name="Sulfuric acid"
  desc="Strong diprotic acid — fully dissociates in water"
  type="formula"
/>

<ChemNotation
  formula="Fe2O3 + 3CO -> 2Fe + 3CO2"
  name="Reduction of iron(III) oxide"
  desc="Used in blast furnace extraction of iron"
  type="reaction"
/>

Math components

<!-- Inline math -->
<p>Energy: <LatexMath formula="E = mc^2" /></p>

<!-- Block math -->
<LatexBlock
  formula="\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}"
  label="Gaussian integral"
/>

Chemistry utilities

import {
  buildReaction,
  searchFormulas,
  searchReactions,
  getElement,
  toCe,
  COMMON_FORMULAS,
  COMMON_REACTIONS,
  ELEMENTS,
} from 'katex-svelte'

// Build reaction strings
buildReaction(['N2', '3H2'], ['2NH3'], '<=>') // → "N2 + 3H2 <=> 2NH3"

// Search by name
searchFormulas('acid')    // → [{ name, formula }, ...]
searchReactions('haber')  // → [{ name, equation }, ...]

// Element data
getElement('Fe')          // → { symbol: 'Fe', name: 'Iron', number: 26, ... }

// Common formulas
COMMON_FORMULAS['water']  // → 'H2O'

mhchem \ce{} notation quick reference

| Input | Renders as | |-------------------------------------------|-----------------------------| | H2O | H₂O | | H2SO4 | H₂SO₄ | | CH4 + 2O2 -> CO2 + 2H2O | CH₄ + 2O₂ → CO₂ + 2H₂O | | N2 + 3H2 <=> 2NH3 | N₂ + 3H₂ ⇌ 2NH₃ | | Fe^{2+} + 2e^- -> Fe | Fe²⁺ + 2e⁻ → Fe | | 2H2 + O2 ->[\Delta] 2H2O | With heat condition | | CaCO3 ->[\text{heat}] CaO + CO2 | With text condition | | Cl^{-}_{(aq)} | Cl⁻(aq) |

KaTeX quick reference

| Input | Renders as | |--------------------------------|-------------------| | E = mc^2 | E = mc² | | \frac{a}{b} | a/b (fraction) | | \sqrt{x} | √x | | x_{n} | xₙ (subscript) | | x^{2} | x² (superscript) | | \int_{0}^{\infty} | ∫₀^∞ | | \sum_{n=1}^{\infty} | Σ from n=1 to ∞ | | \text{rate} = k[\text{A}]^m | text in math mode |

Docs

katex-svelte-docs.vercel.app

License

MIT © Makeez Labs