react-math-input

React components for math equation input. Built on MathLive and KaTeX.

• MathEditor — textarea with an [fx] button that opens a visual equation composer. Type text normally, insert $LaTeX$ at cursor.
• SymbolPalette — tabbed grid of 65+ math symbols (fractions, Greek, calculus, matrices) that insert into the active editor.
• MathRenderer — renders stored $...$ and $$...$$ LaTeX to formatted equations via KaTeX.
• QuestionForm — complete MCQ question creation form combining all three components (example/starting point).

Install

npm install react-math-input mathlive katex

Quick Start

import { MathEditor, SymbolPalette, MathRenderer, type MathEditorProps } from 'react-math-input'
import 'react-math-input/styles.css'
import 'katex/dist/katex.min.css'
import { useRef } from 'react'
import type { MathEditorRef } from 'react-math-input'

function App() {
  const editorRef = useRef<MathEditorRef>(null)

  return (
    <div>
      <MathEditor
        ref={editorRef}
        placeholder="Type here... click [fx] for equations"
        onChange={(value) => console.log(value)}
      />
      <SymbolPalette targetRef={editorRef} />
    </div>
  )
}

Components

<MathEditor>

A textarea-first editor with an inline MathLive equation composer.

| Prop | Type | Default | Description | |------|------|---------|-------------| | placeholder | string | "" | Textarea placeholder text | | initialValue | string | "" | Initial content | | value | string | — | Controlled value | | defaultValue | string | — | Uncontrolled default value | | name | string | — | Form field name (included in native form submissions) | | onChange | (value: string) => void | — | Called when content changes | | onFocus | () => void | — | Called when editor receives focus | | onBlur | () => void | — | Called when editor loses focus | | showPreview | boolean | true | Show live KaTeX preview when content has $...$ | | size | "sm" \| "md" \| "lg" | "md" | Editor size variant | | disabled | boolean | false | Disable all interaction | | readOnly | boolean | false | Allow selection/copy but prevent editing | | error | boolean | false | Show error styling | | className | string | "" | Additional CSS class |

Ref methods (MathEditorRef):

• getValue() — returns the current text content
• setValue(latex) — sets the content
• getMathField() — returns the MathLive MathfieldElement (or null if composer is closed)
• isMathMode() — whether the composer is open
• focus() — focuses the editor

<SymbolPalette>

Tabbed symbol grid that inserts LaTeX into a MathEditor's composer.

| Prop | Type | Default | Description | |------|------|---------|-------------| | targetRef | RefObject<MathEditorRef> | — | Reference to the MathEditor to insert into | | categories | Record<string, Symbol[]> | all | Subset of symbol categories to display | | size | "sm" \| "md" \| "lg" | "md" | Symbol button size variant | | disabled | boolean | false | Disable all symbol buttons | | className | string | "" | Additional CSS class |

Categories: Common, Greek, Operators, Calculus, Matrices

<MathRenderer>

Renders text containing $...$ (inline) and $$...$$ (display) LaTeX.

| Prop | Type | Default | Description | |------|------|---------|-------------| | text | string | — | Text with LaTeX delimiters | | onError | (latex: string, error: Error) => void | — | Called when a LaTeX expression fails to parse | | fallback | (latex: string) => string | — | Returns custom HTML for invalid LaTeX | | className | string | "" | Additional CSS class |

<MathRenderer text="Solve $x^{2} + 3x - 4 = 0$ for $x$" />

<QuestionForm>

Complete MCQ question creation form. Use as-is or as a reference for building your own.

| Prop | Type | Description | |------|------|-------------| | onSubmit | (payload: QuestionPayload) => void | Called with serialized question data | | className | string | Additional CSS class |

renderLatexString(text: string): string

Utility function that parses $...$ and $$...$$ in a string and returns rendered HTML. Useful for server-side rendering or custom components.

SYMBOL_CATEGORIES

The symbol data used by SymbolPalette. Exported so you can customize, filter, or extend it:

import { SYMBOL_CATEGORIES } from 'react-math-input'

// Use only Greek and Calculus tabs
const mySymbols = {
  Greek: SYMBOL_CATEGORIES.Greek,
  Calculus: SYMBOL_CATEGORIES.Calculus,
}

Theming

Override CSS variables to match your design system:

.my-app .rmi-editor, .my-app .rmi-palette {
  --rmi-color-primary: #10b981;
  --rmi-radius: 12px;
}

| Variable | Description | |----------|-------------| | --rmi-color-primary | Accent color for buttons and focus rings | | --rmi-color-bg | Background color | | --rmi-color-border | Border color | | --rmi-color-text | Text color | | --rmi-color-error | Error state color | | --rmi-font-size | Base font size | | --rmi-radius | Border radius |

Dark Mode

Dark mode works automatically via prefers-color-scheme with zero config.

To toggle manually:

<div data-theme="dark"><MathEditor /></div>
<!-- or -->
<div className="rmi-dark"><MathEditor /></div>

Size Variants

<MathEditor size="sm" />
<MathEditor size="md" />  // default
<MathEditor size="lg" />

Form Integration

react-hook-form

const { field } = useController({ name: 'equation', control })
<MathEditor
  value={field.value}
  onChange={field.onChange}
  onBlur={field.onBlur}
  ref={field.ref}
  error={!!errors.equation}
/>

Native form

<form>
  <MathEditor name="equation" />
  <button type="submit">Submit</button>
</form>

Controlled vs uncontrolled

<MathEditor value={latex} onChange={setLatex} />
<MathEditor defaultValue="$x^2$" />

States

<MathEditor disabled />
<MathEditor readOnly />
<MathEditor error />

How It Works

1. User types in a standard textarea (supports newlines, mixed content)
2. Clicking [fx] opens a MathLive equation composer below the textarea
3. User builds the equation visually or types LaTeX
4. Clicking "Insert" places $LaTeX$ at the cursor position in the textarea
5. A live preview renders the formatted content below

Storage format: "Solve $x^{2} + 3x - 4 = 0$ for $x$" — plain text with $...$ delimiters. Store as a regular string in any database.

Peer Dependencies

| Package | Version | Purpose | |---------|---------|---------| | react | ^18 or ^19 | UI framework | | react-dom | ^18 or ^19 | DOM rendering | | mathlive | >=0.100.0 | Equation editor (lazy-loaded on first [fx] click) | | katex | >=0.16.0 | Equation renderer |

License

MIT