Developer IDs

A developer ID is a unique identifier that that is assigned to every toolbar and item.

These IDs can be used to uniquely style toolbars or items, or reference them from the API, without worrying if their names might change.

Get a Developer ID

Toolbar IDs

1. Go to Note Toolbar's main settings (in v1.27 or later), hover over a toolbar.
2. More options (...) → Copy developer ID.

Item IDs

For toolbar items, go to each item's settings, and use More actions (...) → Copy developer ID.

CSS example

Color a specific toolbar icon using a CSS snippet:

/* for IDs that start with a letter */
body span#a7cae1b8-ee47-4b88-af17-5084d46393b5 svg { color: #c16e67; }
/* for IDs that start with a number, escape the first character; see note below */
body span#\36 5b1545c-6dd8-496c-9ae9-5f613d6b3f40 svg { color: #c16e67; }

Note

Escape the first character with a \3 and a space if the ID starts with a number as per the above example:

6 → \36

You don't need to do this if the ID starts with a letter. All IDs in v1.30.08 and later for newly-generated toolbars and items start with a letter.

API examples

// update this item's icon
const item = ntb.getItem('112c7ed3-d5c2-4750-b95d-75bc84e23513');
item.setIcon('alert');

// or fetch the HTML element (for non-floating-button toolbars)
const itemEl = activeDocument.getElementById('112c7ed3-d5c2-4750-b95d-75bc84e23513');

---

Return to: Note Toolbar API