Building your Web component
This page illustrates how to use the
iinkJS library to build your own Web component.
This guide assumes that you are already familiar with
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 grants you high integration flexibility by letting you choose your framework.
This section proposes an example of webcomponent wrapper for
You can learn from it to build you own component with your preferred framework.
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.
The whole example code is available on GitHub. It relies on two main files that you should particularly focus on:
iinkElementclass that extends the
src/iinkElement.jsfile. It actually defines the Web component and contains the
iinkJSwrapping. It configures and registers the
editor, displays the component and contains the exported result callback.
index.htmlfile 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.
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.
host in the src/iinkElement.js : to
Step 3: Type the following in your webcomponent-example root folder to install the dependency:
Step 4: Run a local development server that serves the example located in
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!