Web concepts

Before using the Interactive Ink SDK web client-side libraries, you need to be familiar with the following concepts and tools heavily used by the web libraries.

JavaScript dependencies management

MyScript API can be built and used thanks to other open sources libraries. Npm and Bower are used to manage those dependencies instead of managing them manually. A file descriptor lists all the dependencies, then the client tool downloads and locally installs the binaries (or runnable sources).

Npm is used for development tools dependencies. If you are not familiar with npm, please read the related documentation.

Bower is used for managing JavaScript front-end packages (e.g. Polymer and other polyfills). The usage of libraries makes the building of web pages easier. If you are not familiar with this tool, you can follow our step-by-step get started or read Bower get started. Even if its content is not maintained, MyScript web libraries still rely on it. This Youtube video explains why. As soon as Polymer 3 is released, MyScript web-components will move to npm.


A polyfill is a browser fallback, made in JavaScript, that enables functionalities expected in modern browsers to work in older ones (e.g. to support pointer events in browsers like Firefox or Safari). More about polyfill concept in Wikipedia.

As capturing handwriting is key for an API like ours, we recommend using Pointer Events Polyfill that is the most complete polyfill for Pointer Event Specification according to us. This W3C standard gives a homogenous API for JavaScript developers to grab user input event, should they use a mouse, a stylus or a touch capable surface to write. Whatever the input is, events are captured the same way, making the development of libraries such as MyScript’s easier.

If you plan to use the web components APIs, we recommend using webcomponentsjs polyfills. See below section for more details.

Consider reading this Sitepoint article if the concept of polyfill is still unclear.

Web Components specifications

Web components are a set of web platform APIs that allows you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets run on the Web Component standards, work across modern browsers and can be used with any JavaScript library or framework that supports HTML.

Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior.

Web components are based on four main specifications:

Custom Elements

With custom elements, web developers can create new HTML tags, beef up existing HTML tags or extend the components other developers have authored. The API is the foundation of web components. It brings a web standard-based way to create reusable components using nothing more than vanilla JS/HTML/CSS. The result is less code, modular code, and more re-use in our apps. This article is a must-read to understand custom elements. Read carefully the section about the life cycle of a component.

Shadow DOM

The shadow DOM specification defines how to use encapsulated style and markup in web components.

HTML imports

The HTML imports specification defines the inclusion and re-use of HTML documents in other HTML documents.

HTML Template

The HTML template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.

If you are not familiar with web components, this introduction is the right place to learn more.

Polymer and browser support

Polymer is a JavaScript framework build maintained by Google that simplifies the creation and manipulation of web components. MyScript web components use Polymer. This Google library comes with a set of polyfills intended to work in the latest versions of evergreen browsers. See below for the complete browser support matrix:

Polyfill IE11+ Chrome* Firefox* Safari* Chrome Android* Mobile Safari*
Custom Elements ✓ ✓ ✓ ✓ ✓ ✓
HTML Imports ✓ ✓ ✓ ✓ ✓ ✓
Shady CSS/DOM ✓ ✓ ✓ ✓ ✓ ✓

*Indicates the latest version of the browser

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