CAScad: an open source reactive computer algebra notebook in the browser

CAScad: an open source reactive computer algebra notebook in the browser

Introduction

Computer algebra systems (CAS) have long been essential tools for mathematicians, engineers, and educators. Among them, Giac/Xcas — developed by Bernard Parisse and Renée De Graeve at Université Grenoble Alpes — stands out as a powerful, open source alternative to proprietary systems like Maple or Mathematica. It powers the CAS in GeoGebra, the HP Prime calculator, and is widely used in French education.

With CAScad, I wanted to bring this engine into a modern, reactive notebook experience — directly in the browser, with no installation required.

🔗 https://s-celles.github.io/CAScad/

⚠️ Please note: CAScad is an experimental proof of concept in early development. It is not production-ready. Many features are incomplete, some are broken, and you will encounter bugs. The project is shared openly to gather feedback, ideas, and contributions — not as a finished product. If you run into issues or have suggestions, please open an issue on GitHub.


The building blocks

CAScad stands on several open source projects:

MathLive & MathJSON — Arno Gourdol (CortexJS)

MathLive is a web component (MIT license) that provides fluid, natural math input with LaTeX rendering. Arno also created MathJSON, a lightweight JSON-based interchange format for mathematical notation, and the Cortex Compute Engine — which also serves as one of CAScad's computation kernels.

In CAScad, math cells follow a MathJSON-first pipeline: MathField → MathJSON → kernel. LaTeX is used only for display.

🔗 https://mathlive.io

🔗 https://github.com/cortex-js/compute-engine

KaTeX

Results are rendered with KaTeX, the fast LaTeX math typesetting library, ensuring crisp output display.

🔗 https://katex.org

JSXGraph — University of Bayreuth

For 2D interactive visualization (function plots, parametric curves, implicit plots, vector fields, geometry), CAScad uses JSXGraph with full zoom, pan, and coordinate display. 3D surface plots use Giac's native WebGL rendering.

🔗 https://jsxgraph.uni-bayreuth.de

Observable Runtime

The reactive execution engine is powered by Observable Runtime, which manages the dependency graph (DAG) between cells. This is the same dataflow engine that powers Observable notebooks — a natural fit for bringing reactivity to computer algebra.

🔗 https://github.com/observablehq/runtime

GIAC — Bernard Parisse & Renée De Graeve

The default CAS engine, compiled to JavaScript via Emscripten (asm.js), running entirely client-side.

🔗 https://xcas.univ-grenoble-alpes.fr


Multi-kernel architecture

One of CAScad's distinctive features is its multi-kernel support. You can switch between:

  • GIAC JS (default) — full-featured CAS: algebra, calculus, linear algebra, plots, statistics, programming
  • CortexJS Compute Engine — symbolic computation: simplify, factor, differentiate, integrate

The active kernel is selected via the toolbar and persisted across sessions. Notebooks save the kernel choice in their JSON format, ensuring reproducibility.


The landscape of web-based Xcas

Before diving into what CAScad does differently, here's a map of the existing web interfaces for GIAC/Xcas.

Xcas for Firefox (xcasfr.html)

The official web interface by Bernard Parisse. GIAC runs locally via Emscripten — no server needed once loaded. The most feature-complete web version: full CAS, 2D/3D graphics, MicroPython and Javascript interpreters, session sharing by email, Numworks calculator connectivity. Sequential command-line interface, suited for advanced users and research.

🔗 https://www-fourier.ujf-grenoble.fr/~parisse/xcasfr.html

Xcas en ligne (xcasenligne.fr)

Jean-Pierre Branchard's platform, originally PHP server-based, now client-side. Pedagogical modules: console, programming, mini formal spreadsheet with MathML, graphing, numerical sequences. Designed for French secondary education.

🔗 https://www.xcasenligne.fr

TableaunoirXcas

A fork of the Tableaunoir collaborative whiteboard by B. Parisse. Movable "magnets" on a virtual blackboard that can be evaluated with Xcas, MicroPython, or Javascript. Designed for classroom presentations.

🔗 https://www-fourier.univ-grenoble-alpes.fr/~parisse/tableaunoirxcas/

All these interfaces share a sequential execution model.


The reactive notebook paradigm

In recent years, a new generation of notebooks has fundamentally rethought how cells are executed:

  • Observable (JavaScript) pioneered reactive dataflow notebooks for the web — cells form a dependency graph and update automatically when upstream values change.
  • Pluto.jl (Julia) brought the same philosophy to scientific computing, with fully reactive execution and no hidden state.
  • Marimo (Python) applied reactive principles to the Python ecosystem, offering a reproducible alternative to Jupyter.

All three share a core idea: the notebook is always in a consistent state. No "Run All", no stale outputs, no confusion about execution order.

CAScad applies this paradigm to computer algebra. The reactive DAG, powered by Observable Runtime itself, tracks dependencies between cells. Change a := 5 and every cell referencing a updates instantly. A toggle lets you switch between reactive and manual modes when needed.


Beyond computation: rich visualization

CAScad goes well beyond basic function plotting:

  • 2D plots: plot, plotfunc, plotparam, plotpolar, plotimplicit, plotfield, plotcontour, plotode, plotseq — all rendered interactively with JSXGraph
  • 3D surfaces: plotfunc(x^2+y^2,[x,y]) via WebGL or JSXGraph
  • Statistical charts: histogram, barplot, camembert, boxwhisker, scatterplot
  • Geometry: circle, segment, point and more


Sharing notebooks: QR codes, P2P, and more

A real-world problem in education: you build a notebook on your phone or tablet, and need to get it to your PC — or share it with students. CAScad offers multiple transfer methods, all working without any cloud service:

Animated QR codes

For offline transfer (no internet needed, no webcam needed on the receiving device), CAScad can encode an entire notebook as a sequence of QR codes. Two modes are available:

  • Sequential — frames are displayed in order; the receiver scans them one by one
  • Fountain coding — frames are encoded with redundancy using fountain codes, so the receiver can start scanning at any point and missing frames are recovered automatically. More robust, especially on unstable phone-to-screen scanning.

This means you can transfer a notebook of any size between two devices that have no network connection — just a screen and a camera (and a bit of patience because of data rate).

P2P via WebRTC

For online transfer, CAScad uses WebRTC for direct browser-to-browser communication. On the PC, click "Receive from Phone" — a QR code appears. Scan it with the phone, verify a 4-digit confirmation code, and the notebook transfers over a DTLS-encrypted data channel. Notebook data never touches any server.

Other methods

Static QR (for small notebooks), URL sharing, and classic file export/import round out the options.

Article content



Command discovery

For learners exploring what a CAS can do, CAScad includes built-in command discovery: search_commands(), list_categories(), and suggest_commands() to explore the hundreds of available functions.


Current status — experimental proof of concept

To be completely transparent: CAScad is an experimental Proof of Concept (PoC). It is not production-ready, and I want to set expectations accordingly:

  • The MathJSON → GIAC translation layer covers many operations but has gaps
  • Some plot types may not render correctly in all cases
  • The CortexJS kernel has more limited support than GIAC
  • Reactive dependency tracking can have edge cases
  • The UI needs polish, especially on mobile
  • Some features listed above are partially implemented or fragile

The project is shared in the spirit of "build in public". The goal at this stage is to validate the approach, gather feedback, and see if the reactive + visual math input + CAS combination resonates with educators and students. Contributions, bug reports, and ideas are all welcome.


Technology stack

  • GIAC (asm.js) — default CAS kernel
  • CortexJS Compute Engine — alternative kernel
  • MathLive — math input web component
  • KaTeX — LaTeX rendering
  • JSXGraph — interactive 2D plots and geometry
  • Observable Runtime — reactive dependency graph
  • No build step, no bundler — pure browser ES2020+


Acknowledgments

  • Bernard Parisse and Renée De Graeve for Giac/Xcas
  • Arno Gourdol for MathLive, MathJSON, and the Cortex Compute Engine
  • The JSXGraph team at the University of Bayreuth
  • The KaTeX team
  • The Observable team for the Runtime
  • Jean-Pierre Branchard for his contributions to the Xcas ecosystem


Try it out:

🔗 https://s-celles.github.io/CAScad/

🔗 https://github.com/s-celles/CAScad



To view or add a comment, sign in

More articles by Sébastien Celles

Others also viewed

Explore content categories