v1.1.0 — Open Source

react-math-input

React components for math equation input. MathLive-powered editor with a symbol palette and KaTeX renderer. Build forms with fractions, matrices, integrals, and more.

npm install react-math-input GitHub

MathEditor

Textarea with an [fx] button that opens a visual equation composer. Type text normally, insert equations at cursor.

SymbolPalette

65+ math symbols across 5 categories — Common, Greek, Operators, Calculus, and Matrices. Click to insert.

$x$

MathRenderer

Renders stored $...$ and $$...$$ LaTeX into formatted equations via KaTeX. Use for student-facing display.

Live Demo

Try it out — click fx on any field, build an equation, and insert it.

Dark modeDisabledError

Installation

npm install react-math-input mathlive katex

Quick Start

import { MathEditor, SymbolPalette, MathRenderer } 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>
  )
}

API Reference

<MathEditor>

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

Prop	Type	Default	Description
placeholder	string	""	Textarea placeholder text
initialValue	string	""	Initial content
onChange	(value: string) => void	-	Called when content changes
showPreview	boolean	true	Show live KaTeX preview below
className	string	""	Additional CSS class

Ref methods: getValue(), setValue(latex), getMathField(), isMathMode(), focus()

<SymbolPalette>

Tabbed symbol grid that inserts LaTeX into a MathEditor's composer. Categories: Common, Greek, Operators, Calculus, Matrices.

Prop	Type	Description
targetRef	RefObject<MathEditorRef>	Reference to the MathEditor to insert into
className	string	Additional CSS class

<MathRenderer>

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

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

Customizing Symbols

The symbol data is exported so you can filter or extend it:

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

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

How Storage Works

Equations are stored as plain text with $...$ delimiters. No special database columns needed.

// Stored in your database as a regular string:
"Solve $x^{2} + 3x - 4 = 0$ for $x$"

// Render it back with:
<MathRenderer text={questionFromDB} />