@excalimath/core

Math companion plugin for Excalidraw — KaTeX equations, Plotly.js function graphs, and 80+ STEM shapes. Wraps the @excalidraw/excalidraw React component without forking it.

Install

npm install @excalimath/core

Peer Dependencies

Your project must already provide:

• react >= 18
• react-dom >= 18
• @excalidraw/excalidraw >= 0.17

Usage

import { useState } from "react";
import { Excalidraw } from "@excalidraw/excalidraw";
import { ExcaliMath } from "@excalimath/core";

export default function App() {
  const [excalidrawAPI, setExcalidrawAPI] = useState(null);

  return (
    <div style={{ width: "100vw", height: "100vh", position: "relative" }}>
      <Excalidraw
        excalidrawAPI={setExcalidrawAPI}
        renderTopRightUI={() =>
          excalidrawAPI ? <ExcaliMath excalidrawAPI={excalidrawAPI} /> : null
        }
      />
    </div>
  );
}

Features

Equations (KaTeX)

• Visual toolbar — insert fractions, integrals, Greek letters, matrices
• Live preview as you type
• Click any canvas equation to re-edit
• 40+ pre-built expressions across 9 categories

Graphs (Plotly.js)

• Plot sin(x), x^2 + 2*x, and more with safe evaluation via mathjs
• Up to 5 colour-coded functions per graph
• Configurable axes, labels, grid, and tick intervals

Shape Libraries

• 80+ STEM shapes across 6 subject packs (algebra, biology, chemistry, geometry, physics, statistics)
• Curriculum-aligned, drag-and-drop

ExcaliMath Component Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | excalidrawAPI | ExcalidrawAPI | required | Excalidraw API instance | | onSave | (data: ExcalimathSceneData) => void | — | Called when canvas state changes | | initialData | ExcalimathSceneData | — | Restore elements, app state, and files | | theme | "light" \| "dark" | "light" | Force theme, or omit for auto-detect |

Development

git clone https://github.com/DynoW/excalimath.git
cd excalimath
npm install
npm run dev          # watch mode
npm run build        # production build
npm run typecheck    # type-check only

Related

• ExcaliMath Demo — live demo app
• ExcaliMath for VS Code — VS Code extension

License

MIT — originally created by Tamer — ITWorx EdTech.