v1.12.0

Starter Templates

HTML Templates

There are several ways to include JSXGraph in an HTML file. The most common method is to load the library from a Content Delivery Network (CDN). This approach is simple and ensures that the latest version is always available.

Alternatively, JSXGraph can be locally hosted, meaning the library files are downloaded and served from the same server as the website. This method offers full control over the version used and also works offline.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My JSXGraph Example</title>
    <script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
    <link rel="stylesheet" type="text/css"
          href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
</head>
<body>
    <div id="box" class="jxgbox" style="width:500px; aspect-ratio: 1/1;"></div>
    <script>
        var board = JXG.JSXGraph.initBoard(
            'box', {
                boundingbox: [-10, 10, 10, -10], 
                axis:true
            });

        // Insert JSXGraph code here!

    </script>
</body>
</html>

HTML template – JSXGraph hosted via CDN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My JSXGraph Example</title>
    <link rel="stylesheet" type="text/css" href="jsxgraph.css">
    <script src="jsxgraphcore.js"></script>
</head>
<body>
    <div id="box" class="jxgbox" style="width:500px; aspect-ratio: 1/1;"></div>
    <script>
        var board = JXG.JSXGraph.initBoard(
                'box', {
                    boundingbox: [-10, 10, 10, -10],
                    axis:true
                });

        // Insert JSXGraph code here!

    </script>
</body>
</html>

To include JSXGraph locally in your HTML file, place the following three files in the same folder:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My JSXGraph Example</title>
    <style>
        @import url("https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css");
    </style>
</head>
<body>
    <div id="box" class="jxgbox" style="width:500px; aspect-ratio: 1/1;"></div>

    <script type="module">
        import JXG from 'https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.mjs';
        var board = JXG.JSXGraph.initBoard(
                'box', {
                    boundingbox: [-10, 10, 10, -10],
                    axis:true
                });

        // Insert JSXGraph code here!
        
    </script>
</body>
</html>

HTML template – JSXGraph import (ES6)

iFrame Integration

Integrating a JSXGraph figure into an iframe involves embedding the JSXGraph code in a standalone HTML file. This file is then referenced via the src attribute of the iframe to display the interactive content.

The iframe creates a separate execution environment, which significantly improves security by isolating the embedded content from the main page. This isolation helps prevent script conflicts, unintended interactions, or potential code injection.

Security can be further strengthened by using the sandbox attribute, which allows fine-grained control over what the iframe is permitted to do—for instance, blocking script execution, form submissions, or access to browser APIs. This makes sandboxed iframes a particularly robust option when embedding third-party or user-generated content.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My JSXGraph Example</title>
</head>
<body style="background-color: #eeffff">
<iframe
        src="./iframe-src.template.html"
    style="width: 500px; height: 500px; overflow:hidden; border: none;"
    sandbox="allow-scripts"
    allow="fullscreen *;"
></iframe>
</body>
</html>

HTML template with iFrame

iFrame Source – JSXGraph Hosted Via CDN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My JSXGraph Example</title>
    <script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
    <link rel="stylesheet" type="text/css"
          href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="box" class="jxgbox" 
     style="width: 100%; height: 100%; display: block; object-fit: fill; box-sizing: border-box;"></div>
<script>
    var board = JXG.JSXGraph.initBoard(
            'box', {
                boundingbox: [-10, 10, 10, -10],
                axis:true
            });

    // Insert JSXGraph code here!

</script>
</body>
</html>

iFrame Source – JSXGraph hosted via CDN

Display Engine for LaTeX and MathML

JSXGraph supports rendering mathematical expressions using both MathJax and KaTeX. These libraries can be used to display LaTeX-formatted equations inside JSXGraph text elements or labels for high-quality mathematical typesetting.

MathJax can easily be integrated into JSXGraph to display mathematical formulas within labels or texts. To use it, include the MathJax library in your HTML file and enable the useMathJax attribute when creating elements.

1

var A = board.create('point', [-4,  5], { name: '$$A$$', useMathJax: true });

JSXGraph will then automatically render LaTeX-style expressions with MathJax, allowing for high-quality mathematical notation.

To enable MathJax rendering for all text elements on the board, use the following global option before initializing the board:

1

JXG.Options.text.useMathJax = true;

This ensures that every text element created in JSXGraph will automatically be processed by MathJax without the need to set the option individually for each element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My JSXGraph Example</title>
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" 
            id="MathJax-script" async></script>
    <script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
    <link rel="stylesheet" type="text/css"
          href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
</head>
<body>
    <div id="box" class="jxgbox" style="width:500px; aspect-ratio: 1/1;"></div>
    <script>
        JXG.Options.text.useMathJax = true; // Enable MathJax for all JSXGraph elements!
        var board = JXG.JSXGraph.initBoard(
            'box', {
                boundingbox: [-10, 10, 10, -10], 
                axis:true
            });
        var A = board.create('point', [-4,  5], { name: '$$A_{\\max}$$' });

        // Insert JSXGraph code here!

    </script>
</body>
</html>

HTML template with MathJax

KaTeX can also be integrated into JSXGraph to display mathematical formulas within labels or texts. To use it, include the KaTeX library in your HTML file and enable the useKatex attribute when creating text elements.

1

var A = board.create('point', [-4,  5], { name: '$$A$$', useKatex: true });

Jo enable KaTeX rendering for all text objects on the board, use the following global option:

1

JXG.Options.text.useKatex = true;

This guarantees that all text elements generated in JSXGraph are automatically rendered by KaTeX, eliminating the need to activate the option for each object separately.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My JSXGraph Example</title>
    <script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
    <link rel="stylesheet" type="text/css"
          href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css" integrity="sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js" integrity="sha384-cMkvdD8LoxVzGF/RPUKAcvmm49FQ0oxwDF3BGKtDXcEc+T1b2N+teh/OJfpU0jr6" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/contrib/auto-render.min.js" integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous"
            onload="renderMathInElement(document.body);"></script>
</head>
<body>
<div id="box" class="jxgbox" style="width:500px; aspect-ratio: 1/1;"></div>
<script>
    JXG.Options.text.useKatex = true; // Enable KaTeX for all JSXGraph elements!
    var board = JXG.JSXGraph.initBoard(
            'box', {
                boundingbox: [-10, 10, 10, -10],
                axis:true
            });
    var A = board.create('point', [-4,  5], { name: '$$A_{\\max}$$' });

    // Insert JSXGraph code here!

</script>
</body>
</html>

HTML template with KaTeX

JSXGraph Filters

In Moodle, JSXGraph visualizations can be easily integrated using the JSXGraph filter, which allows embedding interactive constructions directly within course content.

For more information about the JSXGraph filters, see Plugins.

Reference JSXGraph within the jsxgraph tag using the constant BOARDID for initializing the board.

1
2
3
4
5
6
7
8
9

<jsxgraph width="100%" aspect-ratio="1 / 1" useGlobalJS="false">
    var board = JXG.JSXGraph.initBoard(BOARDID, {
            boundingbox: [-10, 10, 10, -10],
            axis:true
    });

    // Insert JSXGraph code here!

</jsxgraph>