iink SDK Web

Is using myscript(iink) with next.js possible?

I want to integrate iink with my next.js project

My app is using typescript actually.


"use client"
import { useEffect, useRef } from "react";
import * as iink from "iink-js"
import Script from "next/script";
const MathInput = () => {
  const editorRef = useRef<HTMLDivElement>(null)
  const editorStyle = {
    'minWidth': '100px',
    'minHeight': '100px',
    'width': '100vw',
    'height': 'calc(100vh - 190px)',
    'touchAction': 'none',

  useEffect(() => {
    let editor: any = editorRef.current;
    editor = iink.register(editorRef.current, {
      recognitionParams: {
        type: 'TEXT',
        protocol: 'WEBSOCKET',
        server: {
          applicationKey: 'f',
          hmacKey: 'f'
        iink: {
          math: {
            mimeTypes: ['application/x-latex', 'application/vnd.myscript.jiix', 'application/mathml+xml']
          export: {
            jiix: {
              strokes: true
    window.addEventListener('resize', () => {

    return () => {
      window.removeEventListener('resize', () => { editor.resize() });
  }, []);
  function convert() {
    const Ed: any = editorRef.current
  return <>
    <header className="p-4 bg-neutral-100">
      <button className="bg-green-500 text-white px-3 py-2 ronded-lg" onClick={convert} >Convert</button>
    <div style={editorStyle} ref={editorRef} touch-action="none">


export default MathInput


 This is my full code

but It's not work as I expected and my custom convert button doesn't work either.



If I change type from 'TEXT' to 'MATH', It doesn't work either.

Your official Github provides react example only.

So where can i get the proper support for next.js project?

Sorry for my bad English.


1 Comment

Dear agent474,

Thank you for your question.

We don't have ready to use examples based on next.js project, so you should rather rely on our iinkJS examples to base your next.js project.

Regarding your convert issue, it is due to a network error, that seems related to the location in your code where you call the convert function.

If you want to implement a convert button, you can refer to this iinjKS example that implements such a button in WebSocket mode:


Best regards,


Login or Signup to post a comment