Embed MathType Hand in a web page

Use this guide when you want to embed the MathType Hand component into a web page so users can enter mathematical expressions by handwriting and retrieve the recognized MathML.

Before you begin

Requirements

Make sure you have:

• A web application where you can include JavaScript.
• Access to the MathType Hand script.
• A valid MathType license for production use.

Applies to

MathType for HTML editors · MathType Generic Integration · MathType Hand

Steps

Create a container

Create an HTML element that will host the handwriting canvas.

<div id="handContainer"></div>

The handwriting canvas automatically fills the dimensions of its parent container. Define the container size using CSS if needed. For example:

<div
  id="handContainer"
  style="width:500px;height:300px">
</div>

Load the MathType Hand script

Include the MathType Hand JavaScript library.

<script src="https://www.wiris.net/demo/hand/hand.js"></script>

For production deployments, load the script from your own MathType installation whenever possible.

Initialize MathType Hand

Create a new Hand instance and insert it into the container.

var hand;

window.onload = function () {

  hand = com.wiris.js.JsHand.newInstance();

  hand.insertInto(
    document.getElementById("handContainer")
  );

};

Retrieve the recognized MathML

Call getMathML() to retrieve the recognized expression.

const mathml = hand.getMathML();

To display an existing formula in the handwriting editor, use:

hand.setMathML(mathml);

Listen for recognition events (optional)

You can listen for handwriting events to react whenever the recognized expression changes.

hand.addHandListener({

  contentChanged: function () {

    console.log(hand.getMathML());

  }

});

Additional events are available through the JavaScript GUI API.

Start your application

Load or reload the page containing the handwriting editor.

Verify it worked

Check that:

• The handwriting canvas is displayed.
• Handwritten expressions are recognized.
• getMathML() returns valid MathML.
• Previously generated MathML can be loaded again using setMathML().

Options and variations

Customize the handwriting experience

MathType Hand supports several customization parameters, including:

• Handwriting color.
• Stroke width.
• Preview zoom.
• Read-only mode.
• Recognition constraints.

Preserve handwriting strokes

If you want to preserve the original handwritten input in addition to the recognized MathML, use the handwriting APIs described in the JavaScript GUI API reference.

Common errors

The handwriting canvas is not displayed

Verify that:

• The Hand script is loaded correctly.
• The container element exists.
• The container has a visible size.

No MathML is returned

Verify that:

• Handwriting recognition has completed.
• The expression can be recognized.
• The Hand instance has been initialized successfully.

Recognition quality is lower than expected

Consider restricting the recognition domain by configuring symbol and structure constraints.

Related articles

• Configure Hand recognition constraints.
• MathType Hand parameters.
• JavaScript GUI API reference.