Quick Start



Quickly get started creating your own INK plugins by following these easy steps.

  1. Install the INK CLI tool inkplugin globally using npm install -g inkplugin

  2. Create an INK Plug-in project using inkplugin create <your-project-name>

  3. Start writing your plug-in code in this main.js using our INK APIs.

Note

Under the engines section in package.json, the CLI tool will automatically add the latest version of the INK Editor Support. Feel free to change this according to your need.

In its simplest form, the plug-in main entry JS file looks like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
importScripts('./inkapi.js');

INKAPI.ready(() => {
  const UI= INKAPI.ui;
  const IO= INKAPI.io;
  const Editor= INKAPI.editor;

  //your code here

  console.log("Hello, INK Plugin World!");

});

Note

Because each INK plug-in runs inside a separate worker, we use importScript to import INK APIs.

In the above example, you’ll notice that we import inkapi.js in order to provide the INK API globally. Once the INK API is ready to use, you can take advantage of its ready function to initiate the plug-in code. Additionally, you’ll also notice some API namespaces that are available through the INK API.

How to Add a Menu Item

Now, let’s add a menu item in the INK application using the UI API Namespace:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
importScripts('./inkapi.js');

INKAPI.ready(() => {
  const UI= INKAPI.ui;

  //your code here
  UI.menu.addMenuItem(clickHandler, "File", "Export", "as Demo HTML");

});

function clickHandler(){
  //do something on menu click
}

The above code adds a menu item inside the INK export menu. It also binds the menu option’s click handler with the callback function.

Next, let’s retrieve the INK Editor content and save it to disk as HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
importScripts('./inkapi.js');

INKAPI.ready(() => {
  const UI= INKAPI.ui;

  //your code here
  UI.menu.addMenuItem(clickHandler, "File", "Export", "as Demo HTML");

});

async function clickHandler(){

  //do something on menu click
  const Editor= INKAPI.editor;
  const IO= INKAPI.io;

  const htmlString = await Editor.getHTML(); //retrieve editor content in html format.

  IO.saveFile(htmlString, 'html');  //open save dialog with only html file extension

}

And just like that, our HTML export plug-in is ready to use! (simple, right?) At this point, it’s time to package the plug-in for distribution so that others can enjoy it as well.

How to Package Your Plug-in

To package your plug-in, use the INK CLI inkplugin package command in our project root directory:

inkplugin package

This command will create a packaged plugin file which is also know as Dye file. This file will be used for installing your plugin into INK editor.

How to Install Your Plug-in

It’s super easy to install a plug-in Dye file in the INK Editor. Just drag and drop your Dye file into the INK Editor. Then, INK will prompt you to confirm. When this happens, click on “Install Now” and you’re done!

Alternatively, you can manually install your plug-in by opening the Plug-in Sidebar on the left side of the editor. Then, click on the “Add Plugin” option. This will open up a dialog box where you can select your Dye file.

After completing the plug-in installation, check that your plug-in created the as Demo HTML entry in the export menu and try to export some content.

Note

  • More in INK API Namescapes under the APIs section.

  • More on the INK CLI Tool under the Command Line Tools section.