This page focuses on the role of the editor object, the central point to interact with content.

Input capture

Incremental input

Interactive Ink SDK typically processes user input in real time. Once strokes are captured, iinkJS handles the communication with the server. The protocol used (REST or WebSocket) depends on the configuration. 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.

Custom capturing

For most integration use cases, the input capture provided is enough but for your custom need you may want to inject the strokes yourself. This can be done by calling the following methods of the iinkJS object:

  • pointerDown() - When the pointer first touches the surface.
  • pointerMove() - When the pointer moves while staying in contact with the surface.
  • pointerUp() - When the pointer is lifted from the surface.

Each of these methods requires you to provide:

  • x and y - The coordinates of the pointer on the surface
  • t - The timestamp of the pointer event
  • p - The pressure information associated to the event (normalized between 0 and 1)
  • pointerId - An identifier for this pointer.


  • The timestamp is typically the time in ms since Jan 1st, 1970. You can set it to -1 to let iink SDK generate one for you based on the current time of the system.
  • Interactive Ink SDK does not use the pressure information. It is stored in the model and can be retrieved at export or when implementing your own inking. If you don’t have or need this information, you can set it to 0.
  • If you only have one pointer simultaneously active, you can pass a pointer id of -1.

Series of events

In some cases, you may want to send a set of strokes to the engine in a single pass, for instance if you import ink from outside of the iink model or if you want to extract a math equation from a digital ink drawing.

Interactive Ink SDK provides a method to input in a single pass a series of pointer events, pointerEvents(), that take in parameter an array of PointerEvent objects.

When calling pointerEvents(), it is possible to set the optional second parameter processGestures to false to explicitly prevent gesture detection for this input.
// Build the pointer events array
const strokes = [{
    "pointerType": "PEN",
    "pointerId": 1,
    "x": [273, 278, 281],
    "y": [121, 128, 133],
    "t": [3185.7900000000004, 3213.8150000000005, 3222.5350000000003],
    "p": [1.0, 1.0, 1.0]
    "pointerType": "PEN",
    "pointerId": 1,
    "x": [173, 178, 181],
    "y": [221, 228, 233],
    "t": [6185.7900000000004, 6213.8150000000005,6222.5350000000003],
    "p": [1.0, 1.0, 1.0]

const processGestures = false;
editor.pointerEvents(strokes, processGestures);


Interactive Ink SDK supports all the standard gestures defined as part of Interactive Ink.

There is nothing particular to do to benefit from gestures apart from using the WebSocket protocol as the gestures are not available with REST. The SDK will take care of detecting and applying the effect of the gestures from the provided input without any plumbing needed.

Other edit operations

The following operations can be directly made on the content of a part via a iinkJS object:

  • Undo
  • Redo
  • Clear

Three steps are required to plug buttons to the commands of the editor.

Add controls to the DOM:

  <div id="controls">
    <button id="undo" disabled></button>
    <button id="redo" disabled></button>
    <button id="clear" disabled></button>

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

    const editorElement = document.getElementById('editor');
    const undoElement = document.getElementById('undo');
    const redoElement = document.getElementById('redo');
    const clearElement = document.getElementById('clear');


Call the editor’s controls on click:

undoElement.addEventListener('click', () => {
  redoElement.addEventListener('click', () => {
  clearElement.addEventListener('click', () => {

Listen to the editor’s change event to update the context:

editorElement.addEventListener('changed', (event) => {
    undoElement.disabled = !event.detail.canUndo;
    redoElement.disabled = !event.detail.canRedo;
    clearElement.disabled = !event.detail.canRedo;
If you need to integrate iink SDK undo/redo with your own undo/redo stack, refer to this page (advanced)

Monitoring changes in the model

Various events are sent by the DOM Element attached to the editor and let you as a developer to plug some custom logic when they occur.

  • loaded: Fired when the editor is fully loaded.
  • changed: Fired when the editor state change, e.g. when undo/redo is available or not.
  • converted: Fired when the editor content is converted.
  • exported: Fired when the editor content export is available.
  • idle: Fired when the editor idle state changes, when asked.
  • error: Fired when an error occurs.
  • undo: Triggered when undo() is called.
  • redo: Triggered when redo() is called.
  • clear: Triggered when clear() is called.
  • convert: Triggered when convert() is called.
  • export: Triggered when export_() is called.

The method waitForIdle() provides by iinkJS will raise an idle event when server and browser processing are over. This may be useful for instance in the case you want some synchronous recognition.

The following example let you explore by yourself how to handle the error event. Same logic could be applied with any other event.

Smart guide

As you may have seen, when using the WebSocket protocol, the editor includes an helper called smart guide that appears as soon as writings are detected. The smart guide enables different actions. It shows in real time a preview of the converted text. It offers you the possibility to change a word using suggestions; it is as simple as clicking on a word and clicking on the suggestion. It also allows you to convert, copy or delete your text, which are available using the actions button on the right.

In iinkJS the smart guide is enabled by default if the type of the recognition is TEXT.

Three parameters are available to modify the default smart guide behaviour.

Smart guide could be disabled by setting the attribute smartGuide to false in text parameter of the configuration pass to the Register function.

recognitionParams: {
    iink: {
        text: {
          smartGuide: false

If you want the smart guide to disappear after a specific duration (no fade-out by default), you can use smartGuideFadeOut and his two properties, enable and duration. By default, the duration is set to 10000 milliseconds.

recognitionParams: {
    iink: {
        text: {
          smartGuideFadeOut: {
            enable: true,
            duration: 10000

Debug mode

As a developer you can have a better understanding of the internal behavior of iinkJS with debug mode.

The example below explain how to access LoggerConfig and change the level of log to the desired one.

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