geomlib

geomlib is a TypeScript port of Dr. David E. Joyce's Geometry Applet (Clark University, 1996, Java version 2.2). It renders interactive Euclidean geometry diagrams on an HTML5 <canvas>: drag a point, and every construction that depends on it follows. The original Java applet illustrated Euclid's Elements; this port does the same job in a modern browser, no JVM required.

• Quickstart — build Euclid's Proposition I.1 from an empty canvas, one construction at a time, with the figure live at every step.
• Using geomlib diagrams — how to work the figures: dragging points, the sliders and pivots, and the reset key.
• Constructions — every construction the library implements, each with a figure you can drag and the element string that produced it.
• Slide transitions — the animations that step a figure from one slide to the next, each with a deck you can walk through.
• Example page — a page built the way every page of the text is, whose own content describes each part of it.
• How this site is built — how a page is modelled so its proof can be stepped through, the extensions written to carry Euclid's own numbering, and the lettered references that tie the prose to the figures.
• Geometry Applet (archival) — Dr. Joyce's original 1996 documentation for the Java applet this library ports.

The construction above is the icosahedron from XIII.16 — twenty equilateral triangles inscribed in a sphere of diameter AB. Drag A, B, a (the sphere center), or X (a free point on the sphere) to move the figure; the rest of the construction follows automatically. See Using geomlib diagrams for the full set of interactions (free points vs sliders vs pivots, reset and pop-out shortcuts).

Use it on your own page

Drop the bundle in via CDN (no build step):

<script src="https://cdn.jsdelivr.net/npm/@brownnrl/geomlib@0.15.0/dist/bundle.js"></script>

Or install from npm:

npm install @brownnrl/geomlib

Then pair a <canvas id="..."> with a geomlib.init({...}) call listing the elements you want constructed — see the Quickstart and Constructions Reference linked above for the full vocabulary.

Attribution

The original Geometry Applet was created by Dr. David E. Joyce (Professor Emeritus, Department of Mathematics and Computer Science, Clark University) between 1996 and 2020 for his online edition of Euclid's Elements. Nelson Brown received Dr. Joyce's permission in May 2026 to republish the Elements edition and to port the underlying applet to TypeScript as geomlib. The library is open source under the MIT License with joint copyright: © 1996–2020 David E. Joyce, 2019–2026 Nelson Brown.

Joyce's original 1996 Geometry Applet documentation page is preserved here for historical reference.

For how this edition itself is put together — where the pages were converted from, how a proposition is modelled so its proof can be stepped through, and the extensions written to carry Euclid's own numbering — see How this site is built.

Source + reports

• Source code: github.com/brownnrl/euclid
• npm package: @brownnrl/geomlib
• Code coverage: coverage report
• Visual regression: snapshot report

Library documentation

Fuller documentation lives with the source, in the geomlib repository:

• quickstart.md — Proposition I.1 built line by line. There is an interactive version of it on this site.
• api.md — every init() field, every E.{Type}.{name} construction and A.{Type}.{name} animation, every accepted colour value.
• constructions-reference.md — the table behind the Constructions page, with each construction's Java ancestor and how often it is used across Books I-III.
• animations-reference.md — the table behind the Slide transitions page, including the reserved names not yet implemented and the animationConfig tuning fields.
• architecture.md — the implementation model: the slate, construction dispatch, the drag pipeline, the slideshow surface, the animation orchestrator.
• creating-constructions.md and creating-animations.md — adding a construction type, or a slide transition, that isn't there yet.