Building your Web component

This page illustrates how to use the iinkJS library to build your own Web component.

Using iinkJS to build your component

This guide assumes that you are already familiar with iinkJS library. Web components offer an easy solution to add handwriting in a web application. Add a tag in your HTML page and set your credentials, to access handwriting recognition with rich editing and import/export features. You will then be able to style it and access advanced features available through the iinkJS library. iinkJS grants you high integration flexibility by letting you choose your framework.

Example based on Open Web Components

This section proposes an example of webcomponent wrapper for iinkJS library. You can learn from it to build you own component with your preferred framework.

Understanding the example

Our example follows the open-wc recommendations. Open Web Components present guides, tools, and libraries for web components. So, you might want to read this guide before digging into our code sample. It also relies on lit-html implementation with the lit-element base class. lit-html lets you write HTML templates in JavaScript, then efficiently render those templates together with data to create and update DOM.

The whole example code is available on GitHub. It relies on two main files that you should particularly focus on:

the iinkElement class that extends the LitElement located in src/iinkElement.js file. It actually defines the Web component and contains the iinkJS wrapping. It configures and registers the editor, displays the component and contains the exported result callback.
the index.html file illustrates how to use the Web component to recognize text and display the result in JIIX format.

We recommend you read the source code to understand the logic and be able to customize the component according to your need. This will also help you to learn how to build a component based on another framework.

Playing with the example

Before using this example, you should be registered on MyScript Cloud and have both an application key and an hmac key.

In order to set it up, here is how to proceed:

Step 1: Clone the MyScript Git repository and navigate to the root of the webcomponent example folder:

git clone https://github.com/MyScript/web-integration-samples.git
cd webcomponent-example/

Step 2: Replace the applicationKey and the hmacKey in the index.html file by your own ones.

Update the host in the src/iinkElement.js : to cloud.myscript.com:

    host: 'cloud.corp.myscript.com',

Step 3: Type the following in your webcomponent-example root folder to install the dependency:

npm install

Step 4: Run a local development server that serves the example located in demo/index.html

npm start

Open the http://localhost:8000/demo/index.html example into your browser. It is now ready to recognize the text you write and display the result in JIIX format!