GeoGebra component

geogebra-component.js provides a custom HTML element for embedding GeoGebra applets.

Usage

Include the GeoGebra deployggb.js script and geogebra-component.js in your page:

<html>
    <head>
        …
        <script src="https://www.geogebra.org/scripts/deployggb.js"></script>
        <script src="geogebra-component.js" defer></script>
    </head>

    <body>
        …
    </body>
</html>

Write a <geogebra-applet> element wherever you want a GeoGebra applet to appear.

Attributes on the element configure how it appears.

Use event listeners and property getters/setters to interact with the applet after it loads.

Full API reference

Examples

Click a button to add a point
Object events
Show the selected object

<geogebra-applet showtoolbar appname="graphing" width="700" height="500" coordsystem="-8,8,-5,5">
    A = (1,1)
    B = (2,3)
    l = Line(A,B)
</geogebra-applet>

<geogebra-applet material="https://www.geogebra.org/m/sA5Mb4vd"></geogebra-applet>