Formulize

An API for interactive mathematical formula built with React, TypeScript, and Vite that provides real-time formula visualization and computation capabilities.

Features

- Formulize API - Declarative API for programmatic "executable" formula configuration
- Multi-Engine Computation - Support for manual step-through, symbolic algebra
- Real-time Visualization - 2D/3D plotting with D3.js and Plotly.js integration
- Variable Management - Dependency tracking and automatic recomputation

Installation

$3

Install with all peer dependencies automatically:

``bash
npx install-peerdeps formulize-math
`

`bash
npm install formulize-math
`

$3

Formulize requires several peer dependencies. Install them based on your needs:

Core (Required):

`bash
npm install react react-dom mobx mobx-react-lite mobx-state-tree
`

Math Rendering (Required):

`bash
npm install mathjax-full better-react-mathjax katex mathjs
`

Formula Canvas (Required for FormulaComponent):

`bash
npm install @xyflow/react lucide-react lodash
`

3D Plotting (Optional - for Plot3D):

`bash
npm install plotly.js-dist d3
`

Code Editor (Optional - for step-through debugging):

`bash
npm install codemirror @codemirror/autocomplete @codemirror/lang-javascript @codemirror/language @codemirror/legacy-modes @codemirror/state @codemirror/view @uiw/react-codemirror
`

All-in-one installation:

`bash
npm install formulize-math react react-dom mobx mobx-react-lite mobx-state-tree mathjax-full better-react-mathjax katex mathjs @xyflow/react lucide-react lodash plotly.js-dist d3 codemirror @codemirror/autocomplete @codemirror/lang-javascript @codemirror/language @codemirror/legacy-modes @codemirror/state @codemirror/view @uiw/react-codemirror
`

Don't forget to import the CSS:

`tsx
import "formulize-math/style.css";
`

Technology Stack

- Frontend: React 18 + TypeScript + Vite
- State Management: MobX with decorators
- Math Rendering: KaTeX, MathJax
- Code Editor: CodeMirror 6
- Visualization: D3.js, Plotly.js

---

Development

$3

- Node.js (version 16 or higher)
- npm or yarn

$3

`bash
npm install
`

$3

Start the development server:

`bash
npm run dev
`

The application will be available at http://localhost:3005

$3

Build for production:

`bash
npm run build
`

Preview the production build:

`bash
npm run preview
`

$3

Run linting:

`bash
npm run lint
`

Run TypeScript type checking:

`bash
tsc
`

$3

Deploy to docs/forge/ directory:

`bash
npm run deploy
`

Project Structure

- src/api/ - Formulize API and computation engines
- src/renderer/ - Core interactive formula components
- src/visualizations/ - 2D/3D plotting engines
- src/types/ - TypeScript type definitions
- src/examples/` - Example formula API configurations

Architecture

The application uses a multi-store MobX architecture with:

- computationStore - Variable computation and evaluation
- formulaStoreManager - Individual formula store management

Three computation engines are available:

- manual - Manual step-through with JS interpreter
- symbolic-algebra - Mathematical computation engine