API Reference

resolve_value(x)

Unwrap a value for rendering. Returns the value unchanged by default.

Package extensions (e.g. JSXGraphObservablesExt) can add methods to unwrap wrapper types such as Observable before HTML/JS generation.

sorted_json(d)

Serialize a dictionary to JSON with keys sorted alphabetically. Ensures deterministic output across Julia versions and platforms.

abstract type AbstractJSXElement

Abstract supertype for all JSXGraph elements that can be placed on a board.

All concrete element types (points, lines, circles, curves, sliders, etc.) are subtypes of AbstractJSXElement.

mutable struct Board

Container representing an interactive JSXGraph board.

Holds a collection of elements and board-level configuration such as axis limits, grid settings, and visual attributes.

Fields

• id::String: Unique identifier for the HTML div element

• elements::Vector{AbstractJSXElement}: Ordered collection of elements on this board

• options::Dict{String, Any}: Board-level configuration options

Board(id; xlim, ylim, axis, grid, width, height, kwargs...)

Create a Board with keyword arguments for common options.

Auto-generates a unique id if an empty string is provided.

Arguments

• id::String: Board identifier (auto-generated if empty)
• xlim: x-axis range as (xmin, xmax)
• ylim: y-axis range as (ymin, ymax)
• axis: show axes (default: true)
• grid: show grid (default: false)
• width: board width in pixels (default: 500)
• height: board height in pixels (default: 500)
• Additional keyword arguments are stored directly in options

mutable struct View3D <: AbstractJSXElement

Represents a JSXGraph 3D viewport that can contain 3D elements.

A View3D is added to a Board like any other element, but 3D elements (point3d, line3d, curve3d, etc.) are created on the view rather than directly on the board.

• type_name::String: Always "view3d"

• parents::Vector{Any}: Positional arguments: [position, size, ranges]

• attributes::Dict{String, Any}: Visual and behavioral attributes

• elements::Vector{AbstractJSXElement}: 3D elements contained in this view

struct JSFunction

Represents a JavaScript function string for use in JSXGraph element parents.

A JSFunction can optionally be named so that other JSFunction objects can reference it, and it can carry a list of dependencies on other named JSFunction objects. The rendering pipeline automatically collects all transitive dependencies and emits named function definitions before the elements that use them.

• code::String: JavaScript function code string

• name::String: Optional name for this function (empty string = anonymous)

• deps::Vector{JSFunction}: Other named JSFunction objects this function depends on

struct JSXElement <: AbstractJSXElement

Represents a single JSXGraph element that can be placed on a board.

Each element has a type name (e.g., "point", "line"), parent arguments, and visual/behavioral attributes that are passed to board.create().

• type_name::String: JSXGraph element type (e.g., "point", "line", "circle")

• parents::Vector{Any}: Positional arguments for board.create()

• attributes::Dict{String, Any}: Visual and behavioral attributes

_create_element(type_name, parents, kwargs)

Create a JSXGraph element with the given type name, parents, and keyword attributes.

Helper to convert a function, expression, or string to a JSFunction.

The optional arity parameter controls the number of parameters in the generated JavaScript function wrapper (only used for String inputs).

For String inputs:

• Strings already starting with function are used as-is.
• Other strings are wrapped as function(x){return <expr>;} (arity=1) or function(x,y){return <expr>;} (arity=2), etc.
• The param_names keyword overrides the default parameter names.

For Function and Expr inputs, arity and param_names are ignored (the lambda structure determines the parameter list).

angle(p1, vertex, p2; kwargs...)

Create an angle defined by three points.

arc(center, p1, p2; kwargs...)

Create an arc from center through two boundary points.

arrow(a, b; kwargs...)

Create an arrow from point a to point b.

attrs_to_js(attrs)

Convert element attributes to a JSON string.

axis(p1, p2; kwargs...)

Create an axis element defined by two points.

Example

# Horizontal axis
ax = axis(point(0, 0), point(1, 0); name="x")

# Vertical axis
ay = axis(point(0, 0), point(0, 1); name="y")

button(x, y, label, handler; kwargs...)

Create a button at position (x, y) with label and handler.

checkbox(x, y, label; kwargs...)

Create a checkbox at position (x, y) with the given label.

circle(center, radius_or_point; kwargs...)

Create a circle with center and radius or point on circle.

circle3d(center, normal, radius; kwargs...)

Create a 3D circle from a center point, normal vector, and radius.

Arguments

• center: center point (Point3D element)
• normal: normal vector as [0, nx, ny, nz] (homogeneous coordinates)
• radius: circle radius (Number)

Example

c = point3d(0, 0, 0)
circ = circle3d(c, [0, 0, 0, 1], 2.0; strokeColor="red")

conic(p1, p2, p3, p4, p5; kwargs...)

Create a conic section through five points.

curve(fx, fy, t_start, t_end; kwargs...)

Create a parametric curve from fx(t), fy(t) over [t_start, t_end].

curve3d(fx, fy, fz, t_range; kwargs...)

Create a 3D parametric curve from fx(t), fy(t), fz(t) over t_range.

Arguments

• fx, fy, fz: functions or expressions for each coordinate
• t_range: parameter range as [t_start, t_end]

Example

# Helix
c = curve3d(
    "Math.cos(t)", "Math.sin(t)", "t/(2*Math.PI)",
    [-6.28, 6.28]
)

derivative(curve_elem; kwargs...)

Create the derivative of a curve element.

ellipse(f1, f2, p; kwargs...)

Create an ellipse with two foci and a point on the ellipse.

functiongraph(f; kwargs...)

Create a function graph element from a Julia function or expression.

functiongraph3d(f; xlim, ylim, kwargs...)

Create a 3D function graph surface z = f(x, y).

Arguments

• f: function of two variables (Function, Expr, or String)
• xlim: optional x range as (xmin, xmax) (defaults to view range)
• ylim: optional y range as (ymin, ymax) (defaults to view range)

Example

fg = functiongraph3d("Math.sin(x)*Math.cos(y)")
fg = functiongraph3d("x*y"; xlim=(-3, 3), ylim=(-3, 3))

glider(x, y, curve_elem; kwargs...)

Create a glider point on a curve element at initial position (x, y).

grid(; kwargs...)

Create a grid element on the board.

The grid is a visual overlay of horizontal and vertical lines.

Example

g = grid()
g = grid(; face="line", majorStep=[1, 1])

group(elements; kwargs...)

Create a group element that groups several elements together for collective transformations.

elements should be a collection of JSXElement objects to group.

Example

p1 = point(0, 0)
p2 = point(1, 1)
l = line(p1, p2)
g = group(p1, p2, l)

hyperbola(f1, f2, p; kwargs...)

Create a hyperbola with two foci and a point on the hyperbola.

image(url, corner, dims; kwargs...)

Create an image element from a URL at the given corner with dimensions.

implicitcurve(f; kwargs...)

Create an implicit curve from a function f(x, y) = 0.

inequality(line_elem; kwargs...)

Create an inequality region from a line element.

input(x, y, value, label; kwargs...)

Create a text input at position (x, y) with initial value and label.

integral(curve_elem, a, b; kwargs...)

Create an integral of a curve between bounds a and b.

intersectioncircle3d(el1, el2; kwargs...)

Create a 3D intersection circle of two spheres or a sphere and a plane.

Arguments

• el1: first element (Sphere3D or Plane3D)
• el2: second element (Sphere3D or Plane3D)

Example

c1 = point3d(-1, 0, 0)
c2 = point3d(1, 0, 0)
s1 = sphere3d(c1, 2.0)
s2 = sphere3d(c2, 2.0)
ic = intersectioncircle3d(s1, s2; strokeColor="purple")

intersectionline3d(plane1, plane2; kwargs...)

Create a 3D intersection line of two planes.

Arguments

• plane1: first Plane3D element
• plane2: second Plane3D element

Example

p = point3d(0, 0, 0)
pl1 = plane3d(p, [1, 0, 0], [0, 1, 0]; range_u=(-3, 3), range_v=(-3, 3))
pl2 = plane3d(p, [1, 0, 1], [0, 1, 0]; range_u=(-3, 3), range_v=(-3, 3))
il = intersectionline3d(pl1, pl2; strokeColor="red")

legend(elements; kwargs...)

Create a legend element for the board.

labels is a vector of strings, and elements is a corresponding vector of elements whose appearance styles will label the legend entries.

Example

fg1 = functiongraph(sin; color="blue")
fg2 = functiongraph(cos; color="red")
leg = legend(fg1, fg2; labels=["sin", "cos"])

line(a, b; kwargs...)

Create a line through two points or defined by other parents.

line3d(p1, p2; kwargs...)

Create a 3D line through two points.

Example

p1 = point3d(0, 0, 0)
p2 = point3d(1, 1, 1)
l = line3d(p1, p2)

mesh3d(point, dir1, dir2, range1, range2; kwargs...)

Create a 3D wireframe mesh grid.

Arguments

• point: origin point as [x, y, z] array or Point3D element
• dir1: first spanning direction vector [dx, dy, dz]
• dir2: second spanning direction vector [dx, dy, dz]
• range1: range along first direction [min, max]
• range2: range along second direction [min, max]

Example

m = mesh3d([0, 0, 0], [1, 0, 0], [0, 1, 0], [-3, 3], [-3, 3];
    stepWidthU=1, stepWidthV=1)

normal(glider_elem; kwargs...)

Create a normal line at a glider point.

parabola(focus, directrix; kwargs...)

Create a parabola with focus and directrix.

parametricsurface3d(fx, fy, fz, u_range, v_range; kwargs...)

Create a 3D parametric surface from fx(u,v), fy(u,v), fz(u,v).

Arguments

• fx, fy, fz: functions of two parameters (Function, Expr, or String)
• u_range: parameter u range as [umin, umax]
• v_range: parameter v range as [vmin, vmax]

Example

# Sphere
ps = parametricsurface3d(
    "Math.sin(u)*Math.cos(v)",
    "Math.sin(u)*Math.sin(v)",
    "Math.cos(u)",
    [0, 3.14], [0, 6.28]
)

parent_to_js(x, elem_ids)

Convert a parent value to its JavaScript string representation.

Handles Numbers, Strings, Vectors/Tuples, JSXElement references, and JSFunction objects.

plane3d(point, dir1, dir2; range_u, range_v, kwargs...)

Create a 3D plane from a point and two direction vectors.

Arguments

• point: a point on the plane (Point3D element)
• dir1: first spanning direction vector [dx, dy, dz]
• dir2: second spanning direction vector [dx, dy, dz]
• range_u: optional parameter range for first direction (default: unbounded)
• range_v: optional parameter range for second direction (default: unbounded)

Example

p = point3d(0, 0, 0)
plane = plane3d(p, [1, 0, 0], [0, 1, 0], [-2, 2], [-2, 2];
    fillColor="blue", fillOpacity=0.2)

plane3d(p1, p2, p3; kwargs...)

Create a 3D plane from three points.

Example

p1 = point3d(0, 0, 0)
p2 = point3d(1, 0, 0)
p3 = point3d(0, 1, 0)
plane = plane3d(p1, p2, p3; fillColor="green", fillOpacity=0.2)

point(x, y; kwargs...)

Create a point at coordinates (x, y).

point3d(x, y, z; kwargs...)

Create a 3D point at coordinates (x, y, z).

Example

p = point3d(1, 2, 3; size=5, color="red")

polygon(points; kwargs...)

Create a polygon through the given vertices.

polygon3d(points; kwargs...)

Create a 3D polygon from a sequence of 3D points.

Arguments

• points...: three or more Point3D elements

Example

p1 = point3d(0, 0, 0)
p2 = point3d(1, 0, 0)
p3 = point3d(1, 1, 0)
p4 = point3d(0, 1, 0)
poly = polygon3d(p1, p2, p3, p4; fillColor="yellow", fillOpacity=0.3)

polyhedron3d(vertices, faces; kwargs...)

Create a 3D polyhedron from vertices and face definitions.

JSXGraph renders each face with shading based on the camera angle.

Arguments

• vertices: array of [x, y, z] coordinate arrays, or Point3D elements
• faces: array of faces, where each face is an array of vertex indices (0-based)

Example

# Tetrahedron
verts = [[0, 0, 0], [2, 0, 0], [1, 2, 0], [1, 1, 2]]
faces = [[0, 1, 2], [0, 1, 3], [1, 2, 3], [0, 2, 3]]
p = polyhedron3d(verts, faces; fillOpacity=0.8)

reflection(line_elem; kwargs...)

Create a reflection transformation across the given line element.

Example

p1 = point(0, 0)
p2 = point(1, 0)
l = line(p1, p2)
r = reflection(l)

regularpolygon(p1, p2, n; kwargs...)

Create a regular polygon with n sides from two points.

riemannsum(f, n, type; a, b, kwargs...)

Create a Riemann sum visualization.

rotation(center, angle; kwargs...)

Create a rotation transformation by angle (in radians) around a center point.

Example

c = point(0, 0)
r = rotation(c, π/4)

sector(center, p1, p2; kwargs...)

Create a sector from center through two boundary points.

segment(a, b; kwargs...)

Create a line segment between two points.

slider(pos1, pos2, range; kwargs...)

Create a slider between positions pos1 and pos2 with range [min, start, max].

slopefield(f; ...)
slopefield(f, xData; ...)
slopefield(f, xData, yData; kwargs...)

Create a slope field visualization.

Arguments

• f: Function f(x, y) returning a slope value (Function, Expr, or String)
• xData: Grid range for x as [xmin, step, xmax] (default: [-5, 1, 5])
• yData: Grid range for y as [ymin, step, ymax] (default: [-5, 1, 5])

Example

slopefield("x - y")  # uses default grid
slopefield("x - y", [-10, 0.5, 10], [-10, 0.5, 10])  # custom grid

sphere3d(center, radius_or_point; kwargs...)

Create a 3D sphere from a center point and radius (or a second point on the surface).

Arguments

• center: center point (Point3D element)
• radius_or_point: radius (Number) or a Point3D on the surface

Example

c = point3d(0, 0, 0)
s = sphere3d(c, 2.0; fillColor="blue", fillOpacity=0.3)

tangent(glider_elem; kwargs...)

Create a tangent line at a glider point.

tapemeasure(p1, p2; kwargs...)

Create a tape measure between two points.

text(x, y, content; kwargs...)

Create a text element at position (x, y) with the given content.

text3d(x, y, z, txt; kwargs...)

Create a 3D text label at position (x, y, z).

Arguments

• x, y, z: 3D coordinates for the text position
• txt: text content (String)

Example

t = text3d(1, 2, 3, "Hello 3D"; fontSize=20)

ticks(line_or_axis, tick_distance; kwargs...)

Create a ticks element on a line or axis.

line_or_axis is the parent line/axis element. tick_distance is the distance between major ticks (optional).

Example

ax = axis(point(0, 0), point(1, 0))
t = ticks(ax, 1.0)
t = ticks(ax, 1.0; minorTicks=4, drawLabels=true)

ticks(line_or_axis; kwargs...)

Create a ticks element with default tick distance on a line or axis.

Example

ax = axis(point(0, 0), point(1, 0))
t = ticks(ax)

transformation(type, params; kwargs...)

Create a generic transformation element.

type is one of "translate", "scale", "rotate", "reflect", "shear", "generic". params are the transformation parameters (interpretation depends on type).

Example

# Translation by (2, 3)
t = transformation("translate", 2, 3)

# Rotation by π/4 around the origin
t = transformation("rotate", π/4)

# Rotation by π/4 around point (1, 1)
t = transformation("rotate", π/4, 1, 1)

translation(dx, dy; kwargs...)

Create a translation transformation by vector (dx, dy).

Example

t = translation(2, 3)

vectorfield(f; ...)
vectorfield(f, xData; ...)
vectorfield(f, xData, yData; kwargs...)

Create a vector field visualization.

Arguments

• f: Function f(x, y) returning [vx, vy] (Function, Expr, or String)
• xData: Grid range for x as [xmin, step, xmax] (default: [-5, 1, 5])
• yData: Grid range for y as [ymin, step, ymax] (default: [-5, 1, 5])

Example

vectorfield(@jsf((x, y) -> [y, -x]))  # uses default grid
vectorfield(@jsf((x, y) -> [y, -x]), [-10, 0.5, 10], [-10, 0.5, 10])  # custom grid

vectorfield3d(fx, fy, fz, xrange, yrange, zrange; kwargs...)

Create a 3D vector field from three component functions fx(x,y,z), fy(x,y,z), fz(x,y,z).

Arguments

• fx, fy, fz: component functions (Function, Expr, or String) of three variables
• xrange: x sampling range as [start, steps, end]
• yrange: y sampling range as [start, steps, end]
• zrange: z sampling range as [start, steps, end]

Each range specifies [startValue, numberOfSteps, endValue], producing steps + 1 vectors along that axis.

Example

vf = vectorfield3d(
    "Math.cos(y)", "Math.sin(x)", "z",
    [-2, 5, 2], [-2, 5, 2], [-2, 5, 2];
    strokeColor="red", scale=0.5,
)

view3d(position, size, ranges; kwargs...)

Create a 3D viewport container with explicit positional arguments.

Arguments

• position: [x, y] bottom-left corner of the viewport on the 2D board
• size: [width, height] of the viewport
• ranges: [[xMin, xMax], [yMin, yMax], [zMin, zMax]] 3D axis ranges

Example

v = view3d([-6, -3], [8, 8], [[-5, 5], [-5, 5], [-5, 5]])

view3d(; position, size, xlim, ylim, zlim, kwargs...)

Create a 3D viewport with keyword arguments for axis ranges.

Arguments

• position: [x, y] bottom-left corner (default: [-6, -3])
• size: [width, height] of the viewport (default: [8, 8])
• xlim: x-axis range (default: (-5, 5))
• ylim: y-axis range (default: (-5, 5))
• zlim: z-axis range (default: (-5, 5))

Example

v = view3d(xlim=(-3, 3), ylim=(-3, 3), zlim=(-3, 3))

HTML_SIZE_THRESHOLD

Maximum content size (in bytes) for generated HTML, excluding inlined JSXGraph library assets. If the content exceeds this threshold, a warning is emitted suggesting the user reduce element count or switch to CDN-based asset loading.

Default: 1 MB (1048576 bytes).

CDN URL for the JSXGraph JavaScript library (minified, for RequireJS compatibility).

_asset_overhead()

Estimate the byte size of the inlined JSXGraph library assets (JS + CSS + wrapper tags).

_check_html_size(html, board, asset_mode)

Emit a warning if the generated HTML content (excluding library assets) exceeds HTML_SIZE_THRESHOLD (REQ-PERF-003).

_require_nodejs_ext(format)

Check that the NodeJS extension is loaded. Throws an informative error if not.

Resolve child element parents, injecting view ranges for functiongraph3d elements that don't specify their own x/y ranges.

html_fragment(board; kwargs...)

Generate an HTML fragment for a board (no DOCTYPE/head/body).

Equivalent to html_string(board; full_page=false, kwargs...).

html_page(board; kwargs...)

Generate a complete HTML page for a board.

Equivalent to html_string(board; full_page=true, kwargs...).

html_string(board; full_page, asset_mode)

Generate an HTML string for a board.

Arguments

• board::Board: The board to render
• full_page::Bool=true: Generate a complete HTML document (true) or embeddable fragment (false)
• asset_mode::Symbol=:inline: :inline embeds JS/CSS; :cdn references CDN URLs

Examples

board = Board("myboard", xlim=(-5,5), ylim=(-5,5))
html = html_string(board)                          # full page, inline assets
html = html_string(board; full_page=false)          # fragment
html = html_string(board; asset_mode=:cdn)          # CDN references

render_assets(io; mode, css_only)

Write JSXGraph library assets to io.

When mode is :inline, embeds the full JS and CSS content. When mode is :cdn, writes <link> and <script src="..."> tags referencing the jsdelivr CDN.

The css_only flag (default false) can be set to true to emit only the CSS stylesheet — useful in fragment mode where the JS library is loaded via a RequireJS-compatible script loader.

render_board_html(io, board; full_page, asset_mode)

Write the HTML for a board to io.

When full_page=true, generates a complete HTML5 document. When full_page=false, generates an embeddable HTML fragment.

In fragment mode (notebooks, Documenter.jl), the board initialization script is wrapped in a loader that handles RequireJS environments (where the CDN <script> tag registers JSXGraph as an AMD module instead of setting JXG globally).

render_board_js(io, board)

Write the JavaScript code that initializes a JSXGraph board to io.

save(filename, board; asset_mode, scale)

Save a board to a file.

Dispatches on the file extension:

• .html (default): writes a self-contained HTML document
• .svg: exports a static SVG image (requires NodeJS22jll)
• .png: exports a PNG image (requires NodeJS22jll)
• .pdf: exports a PDF document (requires NodeJS22jll)

Arguments

• filename::String: Output file path (.html, .svg, .png, .pdf)
• board::Board: The board to save
• asset_mode::Symbol=:inline: for HTML output — :inline embeds JS/CSS; :cdn references CDN URLs
• scale::Int=1: for PNG output — resolution multiplier (1 = native, 2 = Retina)

Examples

board = Board("myboard", xlim=(-5,5), ylim=(-5,5))
push!(board, point(1, 2))
save("plot.html", board)
save("plot_cdn.html", board; asset_mode=:cdn)
save("plot.svg", board)
save("plot.png", board)           # PNG export
save("plot_hd.png", board; scale=2) # 2× resolution PNG
save("plot.pdf", board)           # PDF export

show(io, _, board)

Display a Board as an HTML fragment for notebook environments (Jupyter, Pluto, VS Code).

Generates a unique display ID per call to avoid DOM conflicts when multiple cells render the same board. Uses CDN mode for compact output.

show(io, _, board)

Display a compact text summary of a Board in the REPL.

Format: Board("id", N elements, x=[xmin,xmax], y=[ymin,ymax], WxHpx)

open_in_browser(board::Board; asset_mode::Symbol=:inline) → String

Open a Board visualization in the default web browser.

Requires the DefaultApplication.jl package to be installed and loaded.

Option keys that are applied as CSS on the div container, not passed to JXG.JSXGraph.initBoard.

Default board options applied when creating a new Board.

board_options_to_js(options)

Convert a board options dictionary to a JSON string for use in JXG.JSXGraph.initBoard.

CSS-only keys (width, height, background) are filtered out. All other keys are passed through to the JavaScript object.

extract_css_options(options)

Extract CSS-only options from the board options dictionary.

Returns a dictionary containing only width, height, and background keys (with defaults of 500, 500, and no background if not specified).

merge_with_defaults(options)

Merge user-provided options over the default board options.

Mapping of Julia-friendly keyword aliases to JSXGraph attribute names.

Each entry maps an alias Symbol to a tuple of (targets, priority) where:

• targets is a Vector{String} of JSXGraph attribute names
• priority is :full (full-word alias) or :short (abbreviated alias)

Full-priority aliases take precedence over short-priority aliases. JSXGraph-native attribute names always take precedence over any alias.

color_to_css(c)

Convert a color value to a CSS color string.

No methods defined in the base module. JSXGraphColorsExt adds methods for Colors.jl types (RGB, RGBA, HSL, etc.) when Colors.jl is loaded.

convert_color_values(attrs)

Convert color values in attributes to CSS strings.

Iterates attribute values and converts any that have a color_to_css method defined (added by JSXGraphColorsExt when Colors.jl is loaded).

resolve_aliases(kwargs)

Resolve Plots.jl-compatible keyword aliases to JSXGraph attribute names.

Processes keyword arguments in three passes:

1. Collect JSXGraph-native string keys (always take precedence)
2. Apply full-priority aliases (skip if target already set)
3. Apply short-priority aliases (skip if target already set)

Unrecognized keywords pass through unchanged.

CDN URL for the JSXGraph CSS stylesheet (version-pinned via jsdelivr).

CDN URL for the JSXGraph JavaScript library (version-pinned via jsdelivr).

Version of the bundled JSXGraph JavaScript library.

jsxgraph_css()

Return the contents of the bundled jsxgraph.css file as a string.

The file is read from the Julia Artifacts system on first call and cached for subsequent calls.

jsxgraph_js()

Return the contents of the bundled jsxgraphcore.js file as a string.

The file is read from the Julia Artifacts system on first call and cached for subsequent calls.

+(board, elem)

Create a new board with the element added (non-mutating).

The original board is unchanged.

push!(board, elem)

Add one or more elements to a board (mutating). Returns the board.

push!(view, elem)

Add one or more 3D elements to a View3D (mutating). Returns the view.

board(f; ...)
board(f, id; kwargs...)

Create a board using Julia's do-block syntax.

Creates a Board with the given id and keyword arguments, passes it to the callback function f, and returns the populated board.

Arguments

• f::Function: callback that receives the board and populates it with elements
• id::String: board identifier (auto-generated if empty, default: "")
• xlim, ylim, axis, grid, width, height: forwarded to Board

Examples

b = board("myboard", xlim=(-5, 5), ylim=(-5, 5)) do b
    push!(b, point(1, 2))
    push!(b, point(3, 4))
    push!(b, line(point(0, 0), point(1, 1)))
end

# With default auto-generated id
b = board(xlim=(-10, 10)) do b
    push!(b, functiongraph(sin; color="blue"))
    push!(b, functiongraph(cos; color="red"))
end

implicit(F; xlim, ylim, kwargs...)

Create a board with an implicit curve F(x, y) = 0.

Arguments

• F: function or expression of two variables defining the implicit curve
• xlim: x-axis range (default: (-5, 5))
• ylim: y-axis range (default: (-5, 5))
• Additional keyword arguments are passed to the implicitcurve element

Examples

b = implicit(:((x, y) -> x^2 + y^2 - 1))
b = implicit(:((x, y) -> x^2 + y^2 - 4); color="green", xlim=(-3, 3), ylim=(-3, 3))

parametric(fx, fy, t_range; xlim, ylim, kwargs...)

Create a board with a parametric curve (fx(t), fy(t)) over t_range.

Arguments

• fx: function or expression for x-coordinate
• fy: function or expression for y-coordinate
• t_range: parameter range as (t_start, t_end)
• xlim: x-axis range (default: (-5, 5))
• ylim: y-axis range (default: (-5, 5))
• Additional keyword arguments are passed to the curve element

Examples

b = parametric(cos, sin, (0, 2π))
b = parametric(:(t -> 2cos(t)), :(t -> 3sin(t)), (0, 2π); color="blue")

plot(f, domain; kwargs...)

Create a board with a function graph in a single call.

Arguments

• f: Julia function or expression to plot
• domain: x-axis range as (xmin, xmax)
• Additional keyword arguments are passed to the functiongraph element

polar(r; ...)
polar(r, θ_range; xlim, ylim, kwargs...)

Create a board with a polar curve r(θ) over θ_range.

The polar curve is rendered as a parametric curve with x(θ) = r(θ)·cos(θ) and y(θ) = r(θ)·sin(θ).

Arguments

• r: function or expression for the radius as a function of angle
• θ_range: angle range as (θ_start, θ_end) (default: (0, 2π))
• xlim: x-axis range (default: auto-set to (-rmax, rmax) if possible)
• ylim: y-axis range (default: auto-set to (-rmax, rmax) if possible)
• Additional keyword arguments are passed to the curve element

Examples

b = polar(:(θ -> 1 + cos(θ)))           # cardioid
b = polar(:(θ -> θ), (0, 4π))           # spiral
b = polar(:(θ -> 2), (0, 2π))           # circle of radius 2

scatter(x, y; xlim, ylim, kwargs...)

Create a board with scatter points for each pair (x[i], y[i]).

Arguments

• x: vector of x-coordinates
• y: vector of y-coordinates
• xlim: x-axis range (default: auto-computed with 10% padding)
• ylim: y-axis range (default: auto-computed with 10% padding)
• Additional keyword arguments are passed to each point element

Examples

b = scatter([1, 2, 3, 4], [1, 4, 9, 16])
b = scatter([0.0, 1.0, 2.0], [0.0, 1.0, 0.0]; color="red", size=4)

view3d(f; kwargs...)

Create a 3D viewport using Julia's do-block syntax.

Examples

v = view3d(xlim=(-5, 5), ylim=(-5, 5), zlim=(-5, 5)) do v
    push!(v, point3d(1, 2, 3))
    push!(v, functiongraph3d("Math.sin(x)*Math.cos(y)"))
end

Mapping of known Julia math functions (as Function objects) to their symbol names.

CDN URL for the MathJS library (version-pinned via jsdelivr).

Mapping of Julia function names to MathJS math.* equivalents.

These functions are only available when MathJS integration is enabled via enable_mathjs!.

Version of the MathJS library used for CDN references.

Mapping of Julia math constants to JavaScript equivalents.

Mapping of Julia math function names to JavaScript Math.* equivalents.

Set of expression heads that cannot be transpiled to JavaScript.

Global flag controlling MathJS integration.

When enabled, the @jsf macro and julia_to_js function can transpile additional mathematical functions (e.g., gamma, erf, factorial) that require the MathJS library at runtime.

_validate_jsf(expr)

Validate that a Julia expression can be transpiled to JavaScript.

Recursively walks the AST and throws an error if any unsupported construct is found (e.g., try/catch, loops, comprehensions, multiple dispatch).

collect_jsf_deps(board)

Collect all transitive named JSFunction dependencies from a board's elements, returned in topological (definition) order.

disable_mathjs!()

Disable MathJS integration and revert to standard Math.* functions only.

enable_mathjs!()

Enable MathJS integration.

When enabled, @jsf and julia_to_js recognize additional mathematical functions (gamma, erf, factorial, etc.) that map to math.* calls in JavaScript. The generated HTML will automatically include the MathJS library from CDN.

Examples

enable_mathjs!()
f = @jsf x -> gamma(x)  # now works — produces "math.gamma(x)"

julia_to_js(expr)

Convert a Julia expression to a JavaScript string.

Handles arithmetic operators, math functions (→ Math.*), power (→ Math.pow), constants (π → Math.PI), and lambda expressions.

julia_to_js(f)

Convert a Julia Function to a JavaScript function string.

For known math functions (sin, cos, etc.), produces function(x){return Math.sin(x);}.

mathjs_enabled()

Return true if MathJS integration is currently enabled.

named_jsf(name, f)

Create a named JSFunction from an existing (anonymous) one.

Named functions are emitted as function name(...){...} declarations in the generated JavaScript, so that other JSFunction objects can reference them by name.

Examples

square = named_jsf(:square, @jsf(x -> x^2))

with_deps(f, deps)

Return a copy of f with the given named JSFunction dependencies attached. The rendering pipeline uses this information to emit named helper function definitions (in topological order) before the code that calls them.

Examples

square = named_jsf(:square, @jsf(x -> x^2))
shifted = with_deps(@jsf(x -> square(x) + 1), square)

@jsf expression

Transpile a Julia mathematical expression into a JSFunction object containing equivalent JavaScript code.

Supports arithmetic operators, ^ (power), comparison operators, ternary ifelse, standard math functions (sin, cos, tan, exp, log, sqrt, abs, floor, ceil, min, max, pi), and anonymous functions.

Examples

# Anonymous function → JSFunction
f = @jsf x -> sin(x) + x^2

# Use directly in element constructors
fg = functiongraph(@jsf x -> cos(x) * exp(-x))

# Multi-argument function
g = @jsf (x, y) -> x^2 + y^2

If the expression contains unsupported Julia constructs (e.g., try/catch, for loops, array comprehensions), a compile-time error is raised.

@named_jsf name(args...) = body

Syntactic sugar for creating a named JSFunction.

Equivalent to name = named_jsf(:name, @jsf(args -> body)).

Examples

@named_jsf square(x) = x^2
@named_jsf avg(a, b) = (a + b) / 2

+(board, obj)

Create a board from a recipe object using the + operator.

Example

b = Board(""; xlim=(-5,5))
b2 = b + my_triangle

_realize_one(spec, spec_map)

Convert a single ElementSpec into a JSXElement, substituting any ElementSpec parents with already-realised JSXElement objects tracked in spec_map.

This is an internal helper used by realize_specs.

plot!(board, obj; kwargs...)

Add elements to board by applying the @jsxrecipe registered for typeof(obj).

Arguments

• board::Board: target board (mutated in place)
• obj: any object whose type has a registered recipe
• kwargs...: forwarded to apply_recipe

Returns

The board, with the recipe's elements appended.

Throws

ArgumentError if no recipe is defined for typeof(obj).

Example

b = Board("")
plot!(b, Triangle((0,0), (3,0), (1.5,2.5)); color="red")

plot(board, obj; kwargs...)

Create a new board containing the elements produced by the @jsxrecipe registered for typeof(obj).

This non-mutating overload creates a fresh Board and populates it via plot!.

Arguments

• board::Board: source board (not modified — a copy is used)
• obj: any object whose type has a registered recipe
• kwargs...: forwarded to apply_recipe

Returns

A new Board with the recipe's elements appended.

Example

b = Board(""; xlim=(-5,5), ylim=(-5,5))
b2 = plot(b, Circle2D(0, 0, 2); color="blue")

realize_specs(specs)

Convert a vector of ElementSpec objects (as returned by apply_recipe) into concrete JSXElement objects.

Specs are processed in order; each spec may reference earlier specs as parents.

Returns

Vector{JSXElement} — the realised elements, ready to be added to a board.

Dark theme with light-colored elements on a dark background.

Default theme — empty, preserving JSXGraph native defaults.

Publication-quality theme: black/white with clean lines for academic papers.

Named theme registry mapping symbols to theme dictionaries.

Global current theme reference.

A theme is a nested dictionary mapping element type names to default attribute dictionaries.

Special keys:

• "global": defaults applied to all element types
• "board": defaults applied to board constructor options

_normalize_theme(raw)

Normalize a raw parsed dictionary into a Theme. Ensures all inner values are Dict{String, Any}.

apply_theme_defaults(type_name, user_attrs)

Merge theme defaults under user-provided attributes.

Priority (highest to lowest):

1. User-provided attributes (from kwargs + alias resolution)
2. Element-specific theme defaults
3. Global theme defaults

board_theme_defaults()

Return board-level theme defaults from the current theme's "board" key.

current_theme()

Return the currently active theme. Task-local themes (set via with_theme) take precedence over the global theme (set via set_theme!).

load_theme(filename)

Load a theme from a TOML or JSON file. Dispatches on file extension.

TOML format

[global]
strokeColor = "#000000"

[point]
size = 3
fillColor = "#ff0000"

[board]
background = "#ffffff"

JSON format

{
    "global": {"strokeColor": "#000000"},
    "point": {"size": 3, "fillColor": "#ff0000"},
    "board": {"background": "#ffffff"}
}

register_theme!(name, theme)

Register a custom theme in the global theme registry for later use with set_theme!(:name) or with_theme(:name).

Examples

my_theme = Theme(
    "point" => Dict{String,Any}("strokeColor" => "purple"),
)
register_theme!(:my_style, my_theme)
set_theme!(:my_style)

reset_theme!()

Reset the global theme to the default (empty) theme.

set_theme!(theme)

Set the global theme. Accepts a Theme dictionary or a built-in theme name (:default, :dark, :publication).

Examples

set_theme!(:dark)
set_theme!(THEME_PUBLICATION)

with_theme(f, theme)

Execute f() with a temporary theme active. The previous theme is restored after f returns, even if f throws an error.

Examples

with_theme(:dark) do
    b = Board("myboard")
    p = point(1, 2)  # gets dark theme defaults
    push!(b, p)
end