OMD Documentation

Home Documentation API Reference Examples README

OMD (Open Math Display)

A JavaScript library for creating interactive mathematical interfaces in web applications

npm version
License: MIT

OMD is a comprehensive JavaScript library for building rich, interactive mathematical experiences in the browser. From simple equation displays to complex step-by-step solution systems with full visual feedback and user interaction.

OMD Demo

📖 Full Documentation

View the complete documentation →

The full documentation includes interactive examples, detailed API references, and comprehensive guides.

Quick Start

Installation

npm install @teachinglab/omd

Basic Usage

import { omdDisplay } from '@teachinglab/omd';

// Create a math display
const container = document.getElementById('math-container');
const display = new omdDisplay(container);

// Render an equation
display.render('2x + 3 = 11');

Documentation

Getting Started

Core Concepts

1. Global Context & Configuration

Learn about the foundational systems that power OMD:

2. Visualizations

Interactive visual components for teaching and learning:

Number & Ratio Visualizations
Graphing & Geometry
Data Display

3. Equations & Expressions

The heart of mathematical notation and manipulation:

Core Expression Components
Advanced Expression Types
Step-by-Step Solutions

Complete API Reference

Features

Interactive Math Rendering

Step-by-Step Solutions

Rich UI Components

Educational Features

Guides

By Use Case

Advanced Topics

Architecture

OMD Library Structure
├── Core Systems
│   ├── Configuration Manager (Global settings)
│   ├── Display System (Rendering engine)
│   └── Event Manager (Coordination)
│
├── Visualizations
│   ├── Number Visualizations (Number line, tiles, tape diagrams)
│   ├── Graphing (Coordinate plane, functions)
│   └── Data Display (Tables, charts)
│
└── Equations & Expressions
    ├── Node System (Expression tree)
    ├── Equation Components (Equations, terms, operators)
    ├── Advanced Expressions (Powers, rationals, functions)
    └── Step-by-Step System (Simplification, visualization)

Examples

Creating Objects from JSON (Factory Method)

import { createFromJSON } from '@teachinglab/omd';

// AI-generated or dynamic JSON data
const jsonData = {
    omdType: 'numberLine',
    min: 0,
    max: 10,
    dotValues: [2, 5, 8]
};

// Create the object - no switch statement needed!
const numberLine = createFromJSON(jsonData);

Basic Equation

import { omdDisplay, omdEquationNode } from '@teachinglab/omd';

const display = new omdDisplay(document.getElementById('container'));
const equation = omdEquationNode.fromString('2x + 3 = 11');
display.render(equation);

Step-by-Step Solution

import { omdEquationStack } from '@teachinglab/omd';

const steps = [
    '2x + 3 = 11',
    '2x = 8',
    'x = 4'
];

const stack = new omdEquationStack(steps.map(s => 
    omdEquationNode.fromString(s)
), {
    toolbar: true,
    stepVisualizer: true
});

display.render(stack);

Coordinate Plane with Function

import { omdCoordinatePlane } from '@teachinglab/omd';

const plane = new omdCoordinatePlane();
plane.loadFromJSON({
    xMin: -10, xMax: 10,
    yMin: -10, yMax: 10,
    graphEquations: [
        { equation: 'y = x^2 - 4', color: '#e11d48', strokeWidth: 2 }
    ]
});

display.render(plane);

Number Line Visualization

import { omdNumberLine } from '@teachinglab/omd';

const numberLine = new omdNumberLine();
numberLine.loadFromJSON({
    min: 0,
    max: 10,
    dotValues: [2, 5, 8],
    label: 'Number Line Example'
});

display.render(numberLine);

Dependencies

License

MIT License - see LICENSE for details

Contributing

We welcome contributions! See our contributing guidelines for more information.

Ready to get started? Check out the Getting Started Guide or explore the JSON Schemas for detailed component configurations.

↑ Top