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

For toolbars, go to Note Toolbar's main settings (in v1.27 or later), and use More options → Copy developer ID.

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.

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');