A complete MathProg editing experience

CodeMirror 6 extension for MathProg/GMPL — syntax highlighting, live math rendering, rainbow brackets, linting, and autocomplete for linear programming models.

npm install mathprog-editor
npm version license bundle size

Live Demo

Try the editor — switch themes, pick an example, edit the code. Math renders live in the right panel.

Features

Syntax Highlighting

Full Lezer grammar for MathProg/GMPL — keywords, sets, params, variables, constraints, and expressions, all precisely tokenized.

Live Math Rendering

Objective functions, constraints, and expressions rendered as beautiful typeset math via KaTeX — updates as you type.

Rainbow Brackets

Nested brackets, braces, and parentheses are color-coded by depth, making complex set expressions easy to read.

Linting

Real-time diagnostics catch undeclared identifiers, duplicate declarations, and structural errors as you write.

Autocomplete

Context-aware completions for keywords, declared sets, params, variables, and built-in functions with documentation.

10 Themes

Ship with 5 light and 5 dark editor themes — or define your own. Each with carefully tuned token colors.

Quick Start

npm / bundler

import { mathProgEditor } from "mathprog-editor";

const view = mathProgEditor({
  parent: document.getElementById("editor"),
  mathPanel: document.getElementById("math"),
  doc: "var x >= 0;\nminimize cost: 2 * x;",
  theme: "github-light",
});

CDN / script tag

<script src="https://unpkg.com/mathprog-editor/dist/index.umd.js"></script>
<script>
  MathProgEditor.mathProgEditor({
    parent: document.getElementById("editor"),
    mathPanel: document.getElementById("math"),
  });
</script>