https://github.com/MyScript/MyScriptJS
:pencil2: :cloud: MyScriptJS is the fastest way to integrate rich handwriting recognition features in your webapp.
https://github.com/MyScript/MyScriptJS
cloud handwriting handwriting-recognition iink interactive-ink javascript vanillajs
Last synced: 8 months ago
JSON representation
:pencil2: :cloud: MyScriptJS is the fastest way to integrate rich handwriting recognition features in your webapp.
- Host: GitHub
- URL: https://github.com/MyScript/MyScriptJS
- Owner: MyScript
- License: other
- Archived: true
- Created: 2015-04-02T12:58:06.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2021-01-04T15:27:01.000Z (about 5 years ago)
- Last Synced: 2025-05-04T07:11:41.926Z (9 months ago)
- Topics: cloud, handwriting, handwriting-recognition, iink, interactive-ink, javascript, vanillajs
- Language: JavaScript
- Homepage: https://developer.myscript.com
- Size: 70 MB
- Stars: 353
- Watchers: 30
- Forks: 62
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - MyScriptJS
README
# MyScriptJS
[](https://badge.fury.io/js/myscript)
[](https://myscript.github.io/MyScriptJS/examples/)
[](https://developer.myscript.com/docs/interactive-ink/latest/web/myscriptjs/)
## :warning: This repository is archived :warning:
iinkJS grants you high integration flexibility by letting you choose your favorite framework or components. For this reason, we have decided to focus on iinkJS and to discontinue our ready-to-use Web components.
For more information, please see [documentation](https://developer.myscript.com/).
We also provide an example to integrate [iinkJS](https://github.com/MyScript/iinkJS) as webcomponent: [link](https://github.com/MyScript/web-integration-samples).
:construction:
> The fastest way to integrate rich **handwriting** features in your webapp.
MyScriptJS is a JavaScript library that can be used in every web application to bring handwriting recognition.
It integrates all you need:
* Signal capture for all devices,
* Digital ink rendering,
* Link to MyScript Cloud to bring handwriting recognition.
## Table of contents
* [Examples](https://github.com/MyScript/MyScriptJS#examples)
* [Features](https://github.com/MyScript/MyScriptJS#features)
* [Requirements](https://github.com/MyScript/MyScriptJS#requirements)
* [Installation](https://github.com/MyScript/MyScriptJS#installation)
* [Usage](https://github.com/MyScript/MyScriptJS#usage)
* [Documentation](https://github.com/MyScript/MyScriptJS#documentation)
* [Development](https://github.com/MyScript/MyScriptJS#development)
* [Support](https://github.com/MyScript/MyScriptJS#support)
* [Feedback](https://github.com/MyScript/MyScriptJS#sharing-your-feedback)
* [Contributing](https://github.com/MyScript/MyScriptJS#contributing)
## Examples
Discover Interactive Ink with MyScriptJS and its major features with our [text demo and tutorial](http://webdemo.myscript.com/views/text.html).
Try our two basic examples featuring [the text recognition](https://myscript.github.io/MyScriptJS//examples/v4/websocket_text_iink.html) and [the math recognition](https://myscript.github.io/MyScriptJS/examples/v4/websocket_math_iink.html).
[All our examples](https://myscript.github.io/MyScriptJS/examples/) with the source codes in [this directory](https://github.com/MyScript/MyScriptJS/tree/master/examples).
We also provide examples of integration with the major JavaScript frameworks:
| Framework | Link |
| --- | --- |
|
| [Example of React integration](https://github.com/MyScript/web-integration-samples/tree/master/react-integration-examples) |
| 
| [Example of Angular integration](https://github.com/MyScript/web-integration-samples/tree/master/angular-integration-examples) |
| 
| [Example of Vue integration](https://github.com/MyScript/web-integration-samples/tree/master/vue-integration-examples) |
## Features
* Text and Math support,
* Easy to integrate,
* Digital ink capture and rendering,
* Rich editing gestures,
* Import and export content,
* Styling,
* Typeset support,
* More than 200 mathematical symbols supported,
* 65 supported languages.
You can discover all the features on our Developer website for [Text](https://developer.myscript.com/text) and [Math](https://developer.myscript.com/math).
## Requirements
1. Have [npm](https://www.npmjs.com/get-npm), [yarn](https://yarnpkg.com/en/docs/install) or [bower](https://bower.io/#install-bower) installed.
2. Have a MyScript developer account. You can create one [here](https://developer.myscript.com/support/account/registering-myscript-cloud/).
3. Get your keys and the free monthly quota to access MyScript Cloud at [developer.myscript.com](https://developer.myscript.com/getting-started/web)
## Installation
MyScriptJS can be installed with the well known package managers `npm`, `yarn` and `bower`.
If you want to use `npm` or `yarn` you first have to init a project (or use an existing one).
```shell
npm init
OR
yarn init
```
You can then install MyScriptJS and use it as showed in the [Usage](https://github.com/MyScript/MyScriptJS#usage) section.
```shell
npm install myscript
OR
yarn add myscript
```
You can also install MyScriptJS using bower (with or without an existing project) and use it as showed in the [Usage](https://github.com/MyScript/MyScriptJS#usage) section replacing `node_modules` by `bower_components`.
```shell
bower install myscript
```
## Usage
1. Create an `index.html` file in the same directory.
2. Add the following lines in the `head` section of your file to use MyScriptJS and the css. We use [PEP](https://github.com/jquery/PEP) to ensure better browsers compatibilities. Note that you can also use it using dependencies from `node_modules` or `bower_components`:
```html
```
3. Still in the `head` section, add a `style` and specify the height and the width of your editor:
```html
#editor {
width: 100%;
height: 100%;
}
```
4. In the `body` tag, create a `div` tag that will contain the editing area:
```html
```
5. In JavaScript and within a `` tag placed before the closing tag `</body>`, create the editor using the `register` function, your editor html element and a simple configuration:
```javascript
const editorElement = document.getElementById('editor');
MyScript.register(editorElement, {
recognitionParams: {
type: 'TEXT',
server: {
applicationKey: '#YOUR MYSCRIPT DEVELOPER APPLICATION KEY#',
hmacKey: '#YOUR MYSCRIPT DEVELOPER HMAC KEY#'
}
}
});
```
6. Your `index.html` file should look like this:
```html
<html>
<head>
<link rel="stylesheet" href="node_modules/myscript/dist/myscript.min.css"/>
<script src="node_modules/myscript/dist/myscript.min.js">
#editor {
width: 100%;
height: 100%;
}
const editorElement = document.getElementById('editor');
MyScript.register(editorElement, {
recognitionParams: {
type: 'TEXT',
server: {
applicationKey: '#YOUR MYSCRIPT DEVELOPER APPLICATION KEY#',
hmacKey: '#YOUR MYSCRIPT DEVELOPER HMAC KEY#'
}
}
});