Try it online

Here: https://paolini.github.io/funplot/

Development

run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000/funplot with your browser to see the result.

Next.js

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy

Build the optimized production site with:

npm run build

The build writes the static site to out, ready for GitHub Pages under /funplot. To preview that production build locally, run npm start and open http://localhost:3000/funplot. This uses a static server because next start is incompatible with static exports.

Checks

Use Node.js 24 (also used by CI), install with npm ci, then run:

npm test
npm run typecheck
npm run lint
npm run build

The regression suite uses Node's built-in test runner and the existing TypeScript compiler. It covers independent panel updates, shared-link compatibility and validation, parameter errors, and termination of ODE integration.

npm run build already exports the static site into out; a separate export step is unnecessary. The build currently downloads the Inter font from Google. The configured base path is /funplot.

Shared links carry a format version and retain support for historical unversioned links. Invalid links show an error without replacing the current plot. The bifurcation diagram appears beside the main plot when a recurrence and a parameter are present. Historical bifurcation flags in shared links remain readable.

Bifurcation diagram

Choosing an initial point on the cobweb diagram immediately adds a bifurcation sample at the current parameter value, retaining existing samples. The parameter may be a numeric expression; it is evaluated in the worker. Move the parameter slider or click on the bifurcation diagram to add more samples. A click there sets the parameter to the corresponding horizontal coordinate and updates the cobweb. Shift-click fills the interval from the last diagram click, at approximately one sample per horizontal pixel (up to 2,000 intervals). It works in both directions and uses the current initial point. The first shift-click adds just one sample; Clear samples also resets the last click. Slider changes do not move this anchor. Outside shift-click, only explicitly selected values are sampled; there is no automatic sweep. Each sample discards 1,000 iterations and draws up to 200 subsequent real, finite values as individual dots.

Slider events are queued in a separate worker so quick movements do not lose intermediate choices. Samples remain visible when changing the swept value, panning, zooming or resizing. Changing slider bounds refits the horizontal view without erasing samples. Choose the swept parameter with the selector if several parameters exist. Changing the initial point preserves existing samples, and the same parameter value can be sampled again with the new initial point. Changing the formula, selected parameter or other parameter expressions starts a fresh diagram; Clear samples also clears pending calculations. Samples are session-only and are not included in shared links or the main plot's PDF export.

Canvas gestures

Drag with one finger (or the mouse) to pan. Pinch with two fingers to zoom around their midpoint; moving both fingers also pans. A short tap still selects an initial point for ODEs and recurrences. Gestures beginning on the canvas are handled by the plot rather than by browser page zoom. Scrolling and zooming outside the canvas retain normal browser behavior.

Background calculations

Formula compilation, validation and numerical plotting run in a dedicated Web Worker. The main thread handles controls and draws the returned geometry on the canvas. Changes are debounced by 100 ms; replacing a pending calculation terminates its worker immediately, so obsolete work cannot delay or overwrite the latest plot. The last completed geometry remains visible during recalculation.

PDF export uses an independent worker with the same numerical code and a snapshot of the plot at the time of export. Canvas changes do not cancel an export. Idle workers are reused and are terminated when the view unmounts. Worker failures show an error in the interface rather than falling back to blocking calculations.

The static build bundles the worker and its dependencies under /funplot. Regression tests cover cancellation, late results, worker failures and all figure types running on a real worker thread.

Dependency baseline

The application uses Next.js 16, React 19, Tailwind CSS 4, Math.js 15, jsPDF 4, and KaTeX 0.19. Build tools and type definitions are separate from browser runtime dependencies. ESLint runs directly using eslint.config.mjs; Next.js 16 no longer provides next lint.

npm run export is retained as an alias for npm run build. The development server and the production preview both use the /funplot base path.

Run npm audit --omit=dev to check runtime dependencies, and npm audit to also include development tools. The serve dependency uses a patched compression version through a scoped override. The remaining audit advisories currently originate in the lint toolchain (@next/eslint-plugin-next → fast-glob → micromatch → braces); npm has no compatible fix without downgrading Next's lint configuration. Review these again when updating the lint toolchain.