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

Quick Start (Recommended)

Install with all peer dependencies automatically:

npx install-peerdeps formulize-math

npm install formulize-math

Manual Peer Dependencies Installation

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

Core (Required):

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

Math Rendering (Required):

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

Formula Canvas (Required for FormulaComponent):

npm install @xyflow/react lucide-react lodash

3D Plotting (Optional - for Plot3D):

npm install plotly.js-dist d3

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

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

All-in-one installation:

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:

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

Prerequisites

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

Setup

npm install

Development

Start the development server:

npm run dev

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

Building

Build for production:

npm run build

Preview the production build:

npm run preview

Code Quality

Run linting:

npm run lint

Run TypeScript type checking:

tsc

Deployment

Deploy to docs/forge/ directory:

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

Three computation engines are available:

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