The basics
Each cell in the editor defines a reactive variable: @name = expression. Click Update (or Shift-Enter) to apply it. Reference other cells with @name anywhere in the expression — the dependency graph recomputes everything on its own.
Click a cell's ··· button to load it back into the editor; drag it to reorder the list. To delete a cell, redefine it as @name = undefined.
The notebook autosaves in the browser after every update. To take your work elsewhere, use Save (Ctrl-S) to download a file and Open (Ctrl-F) to load a saved one.
Cell types
@name = expression | Plain reactive value, e.g. @c = @a + @b |
@name = { ...js... } | Code block; use return for the cell's value |
@name = *{ ...js... } | Generator block, for values that change over time |
@name = valueof Inputs.range(...) | Control cell: shows the widget and exposes its value |
@name = undefined | Deletes the cell |
Draggable vs. computed points
Any cell whose value is a point ({x, y}) or a shape appears on the canvas by itself — no drawing function to call.
- Free/constrained points (
FreeHandle, FixedHandle, SegmentHandle, LineHandle, CircleHandle) can be dragged; dragging rewrites the cell's source.
- Computed points (
Midpoint, Intersection, Reflect, Rotate, or any expression of your own) render the same way but read-only — they follow the points they depend on, like GeoGebra's dependent objects.
Coordinate system
Every point value is a real Cartesian world coordinate (y grows upward), not a screen pixel — axes and a grid in round world units are drawn automatically. The mapping between world and screen is itself a reactive cell, @viewport (shaped {center: {x, y}, scaleX, scaleY, showGrid, showAxis}) — inspect it, edit it by hand, or drive it from the UI.
Panning and zooming only change what's visible; no point's stored {x, y} ever changes because of them. Since scaleX and scaleY can end up different, a world-space Circle can render as an ellipse — that's correct, the same as independent-axis zoom in Desmos.
Construction tools (click on the canvas)
| Select | Default tool: drag free points around |
| Point | Click empty canvas to create a free point |
| Segment / Line / Ray / Circle / Midpoint | Click an existing point (it gets marked with a dashed ring), then click a second point to complete the construction |
Every click just writes a normal cell and loads it into the editor — the construction is never hidden behind the UI.
The viewport controls, top-right of the canvas, are separate: Pan drags the view instead of building anything, X −/X + and Y −/Y + zoom each axis independently by 10% a click, Grid/Axes toggle the grid and axis lines, and Reset view restores every @viewport field to its default.
Shapes
Segment(p1, p2, options) | Segment between two points |
Line(p1, p2, options) | Line through the two points, extended to the canvas edge |
Ray(p1, p2, options) | Ray starting at p1, through p2 |
Circle(center, boundaryOrRadius, options) | Circle; the second argument is either a boundary point or a numeric radius |
Polygon([p1, p2, ...], options) | Closed polygon through the list of points |
options accepts {color, lineWidth, fill}.
Derived constructions
Midpoint(p1, p2) | Midpoint |
Distance(p1, p2) | Distance between two points |
Angle(p1, vertex, p2) | Angle in degrees, vertex in the middle |
Intersection(line1, line2) | Intersection between lines/segments/rays (circles not yet) |
Reflect(point, line) | Reflection of a point across a line |
Rotate(point, center, angleDeg) | Rotation of a point around a center |
Perpendicular(point, line) / Parallel(point, line) | Perpendicular/parallel line through the point |
Shortcuts
| Shift-Enter | Apply the editor's cell (Update) |
| Ctrl-S | Save the notebook to a file |
| Ctrl-F | Open a notebook from a file |
| F1 | Open this help |