Getting started

This article should help you build a vanilla or any framework web application with math or text handwriting recognition embedded, in less than 5 minutes.

What is iinkJS?

iinkJS is the core of the MyScript browser technology. It is a graphical library that makes the integration of handwriting recognition and interactive ink easier in any web application. It displays a capturing and a SVG based rendering zone. It takes care of the communication with the server too.

iinkJS can be used with any web framework.

As recognition and conversion are processed on the server, it brings some constraints to ensure an optimal user experience. You need a high speed internet connection (latency is the key, as exchanged messages are relatively small except during jiix exports). For content styling, you have to use parameters and JavaScript objects instead of CSS, as the server needs to know the exact user positions.

Supported features

The following features of interactive ink are supported :

Browser support

iinkJS supports the latest version of all major browsers: Safari 10+ and the evergreen Chrome, Firefox and Edge.


This guide assumes that you are already familiar with key web-concepts like JavaScript dependencies management and polyfills.

npm and Node.js have to be installed on your working environment.

This guide and relative libraries have been tested on Windows, macOS and Linux.


Use an existing project or start a fresh one with the command below:

npm init

Type the following in your developing folder to install the dependency:

npm install iink-js

Recopy and read index.html

Recopy the content of index.html into the folder where the npm install command was launched.

As iinkJS is relying on either MyScript Cloud or MyScript Server, you have to provide an url and credentials to the server. The default url for MyScript Cloud is The credentials come as applicationKey and hmacKey properties that you should update with your own keys in the index.html.

Before using those API, you have to be registered on MyScript Cloud to get both an application key and an hmac key.

We recommend you to read the source code, as the comments might help you understand the logic. The following contains the different steps of the example:

  • import a pointer event polyfill,
  • import iinkjs javascript and css,
  • create the required DOM elements:
    • buttons for the editor’s controls,
    • an element to register an editor
  • register the editor to its DOM element with iinkJS,
  • bind the buttons events to the editor’s controls,
  • listen editor’s events to update buttons state.

Start using it

Launch a webserver serving the directory containing the dependencies and the index.html file with for example python -m SimpleHTTPServer in python v2 or python -m http.server in python v3.

Open the page in your browser ( if you used the previous command)

Understanding iinkJS architecture

iinkJS is a graphical JavaScript library. Rich content and behavior are bound to the DOM element provided to the library during a creation phase. This element is being called “editor” in the documentation. It is the central point to interact with content.

If you are already familiar with iink, please note web libraries allow you to manipulate only one content part at a time. The editing zone captures and renders the user input as the user writes on it. Depending on the configuration, a canvas or a SVG element is created.

Once strokes are captured, iinkJS handles the communication with the server. The protocol used (REST or WebSocket) depends on the configuration. The library handles identification and communication with the server. It also detects errors and attempt retries for you. Once a recognition result is received, the display is updated and rich events are sent to enable custom integration and interaction with your application.

See below the architecture of iinkJS:

[Not supported by viewer]
DOM Element
[Not supported by viewer]
[Not supported by viewer]
[Not supported by viewer]
[Not supported by viewer]
[Not supported by viewer]
MyScript Cloud or 
MyScript Server
[Not supported by viewer]

An editor is always attached to a DOM element, where all the DOM nodes required for stroke capture and rendering are done. To work properly, you have to inject the right configuration and provide the Cloud with urls and credentials. As recognition is done on the server side, you have to provide styling information to the editor, that will propagate it to the server. The editor also allows you to import and export ink data in it.

Creating an editor and attaching it to the DOM

To use iinkJS, you need to install the lib with npm and import it. We also recommend you to import a pointer event polyfill like PEP.

  <script src=""></script>
  <script type="text/javascript" src="../../dist/iink.min.js"></script></head>

In the webpage where you want your user to write, add a div tag:

<div id="editor" touch-action="none"></div>

Then you need to register the editor with the DOM Element you have created and a valid configuration object. All the options and default values are described in the DefaultConfiguration.js file.

const editorElement = document.getElementById('editor');
const configuration = {
  recognitionParams: {
    type: 'TEXT',
    protocol: 'WEBSOCKET',
    server: {
      applicationKey: 'YOUR APPLICATION KEY',
      hmacKey: 'YOUR HMAC KEY'
iink.register(editorElement, configuration);

A working version of this example is available online.

Configuring Math recognition

Another variant of this example configured with Math is also available. Configuration and usage are pretty close.

Reference documentation

Other optional attributes, methods and events are listed and documented in the reference documentation. The next sections will drive you through the most important points.

We use cookies to ensure that we give you the best experience on our website Read the privacy policy