Front end API

This page details the subset of the front end API, which is required to add the AlgebraKiT functionality to your front end web page.

AlgebraKIT global

AlgebraKiT’s frontend API is exposed by the global AlgebraKIT object. You need to create this object yourself and set its configuration parameters before you include the script tag that downloads the javascript code from This script adds the functionality to AlgebraKIT that allows you to inject widgets, listen to events and execute commands.


You can set general configuration in AlgebraKIT.config.
widgets Optional configuration settings per widget type. See the widget overview for a list of supported widget types and their configuration parameters.
proxy If set, the widgets will communicate with AlgebraKIT’s web service through this local proxy to prevent cross-origin communication.
theme An optional identifier to a predefined theme, which defines the style and design of the widgets.


        AlgebraKIT = {
            config: {
                widgets : [{
                    name: 'akit-formula-editor', 
                    handwriting: 'MyScript'
                proxy: 'proxy/algebrakit',
                theme: 'my-custom-theme'
    <!--Load main widget functionality *after* setting configuration  -->
    <script href=""></script>

Exposed API

The following functionality is added to AlgebraKIT:
addListener Add a listener to one of the events that are generated by AlgebraKIT widgets.
command Send a command to a specific widget instance. See widget overview for the commands that are supported by each widget type.
getWidgets Retrieve a list of all created widget instances.
injectWidgets Find any widget tags in the DOM and inject the appropriate widgets.
removeWidget Ends interaction of a widget, removes it from the DOM and performs clean up.
render Search and render expressions written in latex or MathML.

addListener(widgetId, eventName, callback)

Register a listener to one of the supported events for a single widget instance. The widget id can be retrieved either from AlgebraKIT.injectWidgets() or from AlgebraKIT.getWidgets(). The callback function has signature function(eventName, eventData).

Supported events

event name event data description
exercise-created none Sent after the widget is injected in the page. Default the widget is in an inactive state until the student activates it by clicking on the widget.
exercise-activated none Sent after the exercise was activated, either automatically (if configured) or manually by the student.
exercise-evaluate inputExp: input expression
inputStatus: input evaluation
exerciseState: exercise status
Sent after every submitted input of the student.
exercise-hint none Sent whenever the student requests a hint.
exercise-finished none Sent when student has successfully finished the exercise.


Returns a list with general data for all created widget instances.

Widget data

id Widget instance id, required for some other functions in this API.
tag The widget tag reveals the widget type. See the widget overview for the available tags.
attributes The HTML attributes given on this widget instance.
node The HTML node that contains the widget.


Searches for widget tags within the childs of node and creates the corresponding widget instances. Returns a Promise for an array of general info for each of the generated instances. See getWidgets() for an overview what data is included.

If node is not given, the whole document is searched.

removeWidget(widgetId, removeNode)

Disables and removes the widget from the DOM. If removeNode is false, the DOM is restored to its original state. This means that the AlgebraKIT tags is replaced and a future call to injectWidgets() would create the widget again. If removeNode is true, the tag is also removed.

You should always use this function to remove a widget from a page and not just empty the parent node. The reason is that some widgets create additional elements on the page, such as a handwriting widget or mobile formula palette on the bottom of the page. removeWidget() makes sure these elements are removed as well.


Searches for latex expressions or <mathml> nodes within node, or in the whole document if node is absent. Latex expressions are text enclosed within single or double dollar signs. Where a single dollar sign denotes inline rendering and double dollar signs denote so called ‘display view’ rendering.

Latex requires the Katex library to be present, whereas MathML requires MathJax. Both are free and open source tools. Katex renders (much) quicker than MathJax, which can be important for tablets and mobile devices if pages contain many mathematical expressions. On the other hand, the quality of the rendered expression by MathJax is better. MathJax is also accessible and compatible with screen readers.

about algebrakit contact us
Demo +31 624827648
Privacy Policy Eindhoven, the Netherlands
Copyright AlgebraKiT 2018