Content blocks

Equation

The block equation: centered display math from a TeX expression. The renderer is a light TeX-ish approximation (superscripts, subscripts, fractions, Greek letters and common symbols), with no KaTeX dependency.

E = mc2

Usage

  • Use the Equation block for display math that stands on its own line.
  • Use inline equations (rich text) for short formulas inside a sentence.
  • Add an aria-label with a spoken form of the formula.
  • Don’t use it for complex typesetting that needs a full TeX engine; the renderer covers common notation only.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/EquationExample.tsx
import { BlockContent, Equation } from '@krackedui/motion';

export function EquationExample() {
  return (
    <BlockContent>
      <Equation expression="E = mc^2" />
    </BlockContent>
  );
}

Examples

Fractions and symbols

∑i=1n xi = n(n+1)2
α + β ≤ π

Empty

√xAdd a TeX equation

API Reference

Equation

Based on <div> and supports its props. Adds:

PropTypeDefault
expression
string
""
editor
ReactNode
onEdit
() => void

renderTex

renderTex(src: string): ReactNode[]: the inline renderer, usable on its own.

PropTypeDefault

Accessibility

  • The rendering is visual; add an aria-label with a spoken form of the formula for screen readers.
  • With onEdit (the editor) the rendering is a button: Enter/Space or a click opens the TeX input; Enter or Esc closes it.
© 2026 Motion. Internal documentation.