Overview
OMD (On-screen Math Display) is a powerful JavaScript library for rendering and manipulating mathematical expressions. It provides a flexible and intuitive API for creating interactive math visualizations.
Installation
Install via npm:
npm install @omd/coreThen import in your project:
import { omdDisplay, omdCanvas, omdStepVisualizer } from '@omd/core';Quick Start
Create your first mathematical expression with just a few lines of code:
// Create a renderer
const renderer = new omdDisplay(container);
// Render an expression
renderer.render('x^2 + 2x + 1');Step-by-Step Visualization
Visualize equation solving and expression simplification step by step:
// Create a renderer and render the initial equation
const renderer = new omdDisplay(container);
renderer.render('2x + 3 = 7');
// Access the step-visualizer sequence
const stepViz = renderer.getCurrentNode(); // omdStepVisualizer instance
// Perform operations step-by-step
stepViz.applyEquationOperation(3, 'subtract'); // 2x + 3 = 7 → 2x = 4
stepViz.applyEquationOperation(2, 'divide'); // 2x = 4 → x = 2🔄 Automatic Step Generation
Automatically generate solution steps for equations and expressions.
🔍 Step Filtering
Show or hide intermediate steps based on complexity level.
📝 Step Annotations
Add explanatory text and highlights to each step.
Key Features
🎯 Zero Configuration
Get started quickly with sensible defaults. No complex setup required.
📐 Step-by-Step Solving
Show mathematical work with automatic simplification and step filtering.
🎨 Interactive Canvas
Create dynamic math visualizations with drag-and-drop support.
🧮 Expression Operations
Manipulate expressions with built-in mathematical operations.
🔧 Extensible
Create custom node types and extend functionality as needed.
🌈 Educational Tools
Perfect for building interactive math learning applications.