Add equation elements with live formatting

Allow users to insert formatted equations

Description

Allow users to insert and edit formatted mathematical equations directly on the Excalidraw canvas.

The interaction should be similar to equation editing in Microsoft Word: users enter an equation editing mode, type a mathematical expression using a simple textual syntax, and the expression is automatically rendered as a formatted equation.

For example:

x^2 + y^2 = z^2

renders as:

$$ x^2 + y^2 = z^2 $$

and:

\frac{a}{b}

renders as:

$$ \frac{a}{b} $$

Expected behavior

• Add an Equation option to the insert/tool menu.

• Clicking on the canvas while the tool is active creates a new equation element.

• The user can type an equation using a LaTeX-like syntax.

• The equation is rendered/formatted automatically while editing.

• Existing equation elements can be reopened and edited.

• Equation elements behave like regular Excalidraw elements:

  • move
  • select
  • delete
  • duplicate
  • resize/scale

• Equations are persisted in the scene and restored correctly when reopening a drawing.

• Equations should be included when exporting the canvas to supported image/document formats.

Initial syntax support

The first implementation should focus on common mathematical notation:

• superscript and subscript
• fractions
• square roots
• parentheses/brackets
• Greek letters
• common mathematical operators
• sums and integrals
• basic matrices, if supported by the chosen rendering library

Examples:

x^2
x_1
\frac{x}{y}
\sqrt{x}
\alpha + \beta
\sum_{i=1}^{n} x_i
\int_0^1 f(x) dx

UX

Editing should require as little friction as possible.

A possible flow:

1. Select Equation.
2. Click anywhere on the canvas.
3. Start typing.
4. The formatted equation updates automatically.
5. Press Esc or click outside to finish editing.
6. Double-click the equation to edit it again.

Ideally, users should not need to open a separate modal just to enter an equation.

Out of scope

For the initial version:

• full WYSIWYG mathematical editor
• equation numbering
• equation references
• symbolic calculations
• equation solving
• CAS functionality
• collaborative editing behavior specific to individual equation tokens

The feature is focused exclusively on entering, rendering, editing, and displaying mathematical notation.

Acceptance criteria

• User can create an equation element from the Excalidraw UI.
• User can type a supported mathematical expression.
• Input is rendered as formatted mathematical notation.
• User can edit an existing equation.
• Equation survives scene serialization/deserialization.
• Equation can be moved, selected, duplicated, deleted, and scaled.
• Equation appears correctly in exports.
• Invalid or incomplete syntax does not cause the editor to crash.