Getting Started

This guide builds a minimal counter plugin — a button that increments a number. It is simple enough to complete in under ten minutes and demonstrates the core SDK concepts you will use in every plugin.

Prerequisites

• Node.js 18 or later
• An Internote account (to access the editor)

Step 1: Scaffold the Project

npm create internote-plugin@latest my-counter
cd my-counter

The scaffolding tool creates this structure:

my-counter/
├── manifest.json        Plugin metadata and Chalk element schema
├── src/
│   ├── index.html       Plugin entry point (loaded into the sandbox iframe)
│   └── main.js          Plugin logic (imports the SDK)
├── dist/                Built output (generated on npm run build)
└── package.json

Step 2: Explore the Manifest

Open manifest.json. It describes your plugin to the registry and to the Chalk parser:

{
  "id": "my-counter",
  "name": "Counter",
  "version": "1.0.0",
  "author": "your@email.com",
  "description": "A simple incrementing counter",
  "permissions": [],
  "chalk": {
    "element": "counter",
    "attributes": {
      "start": {
        "type": "number",
        "label": "Starting value",
        "default": 0
      },
      "label": {
        "type": "string",
        "label": "Button label",
        "default": "Count"
      }
    }
  }
}

The chalk.element field is the name educators use in Chalk. The chalk.attributes field declares what attributes the element accepts and their types — the Chalk parser validates against this.

Step 3: Explore the Entry File

Open src/main.js:

import { internote } from '@internote/plugin-sdk'

let count = 0

internote.onInitialize(({ attrs, width, height }) => {
  count = attrs.start ?? 0

  document.body.innerHTML = `
    <style>
      body { display: flex; flex-direction: column; align-items: center;
             justify-content: center; height: ${height}px; margin: 0;
             font-family: sans-serif; }
      button { padding: 8px 20px; font-size: 16px; cursor: pointer; }
      p { font-size: 32px; font-weight: bold; margin-top: 12px; }
    </style>
    <button id="btn">${attrs.label ?? 'Count'}</button>
    <p id="display">${count}</p>
  `

  document.getElementById('btn').addEventListener('click', () => {
    count++
    document.getElementById('display').textContent = count
  })

  internote.ready()
})

internote.onUnload(() => {
  // No resources to clean up in this example
})

Three things to notice:

• onInitialize receives your resolved attrs — attrs.start is the number the educator wrote in Chalk
• internote.ready() is called after the first render is painted — the host shows a loading state until this fires
• onUnload is where you cancel animation loops, disconnect observers, and release resources

Step 4: Start the Dev Server

npm run dev

The dev server starts on port 4444 by default. You will see:

Plugin dev server running
Manifest:  http://localhost:4444/my-counter/manifest.json
Entry:     http://localhost:4444/my-counter/index.html

Step 5: Load the Plugin in the Editor

Because Internote is a web application, there is no local internote runtime to run against — the editor itself is your testing environment. The dev CLI bridges the gap: npm run dev registers your local plugin with the editor so it appears as a loadable plugin in your account during development.

Open a new internote in the editor. The CLI prints a local plugin identifier you use as the src in your @plugin directive:

@plugin(src: /Users/jackhgns/projects/my-counter/manifest.json)

scene{
    Click the button to increment the counter.
}[
    counter(start: 0; label: Click me)
]

The editor reads the manifest from the file path, registers the counter element, validates the attrs, and renders the plugin iframe. You should see your button.

Step 6: Debugging

The plugin runs in a sandboxed iframe. To open DevTools for the plugin frame specifically, right-click inside the plugin element in the editor and choose Inspect Plugin Frame. This opens a DevTools panel scoped to the sandbox — you can use the console, set breakpoints in your plugin code, and inspect the DOM the plugin has rendered.

The editor also shows a plugin error state with the message when your plugin calls internote.error() or throws an uncaught exception, so you do not need DevTools open to catch crashes during normal testing.

Step 7: Make a Change

Edit src/main.js — add a Reset button. The dev server watches for changes; refresh the editor to pick them up.

Next Steps

You now have a working plugin loading in the editor. Read the pages below to learn each SDK capability in depth.