Jupyterlab : How to insert custom elements / buttons / commands in the Cell-Toolbar or Notebook-Panel

This is the cell toolbar

In the settings you can add/remove commands

But there is no clear indication of what can be added there and how.

The same process applies to "Cell Toolbar" (the toolbar that each cell has) or the "Notebook Panel" (the toolbar that applies to the entire notebook). Just select one or the other in the "Settings"

I will respond using one specific example.

---

1. Find the command

Option A

If you have ipylab extension installed, do this

from ipylab import JupyterFrontEnd
app = JupyterFrontEnd()

print(app.version)

app.commands.list_commands()

Option B

I haven't found a way to list all the available commands in your setup of Jupyterlab.

Here is a list https://jupyterlab.readthedocs.io/en/latest/user/commands.html#commands-list

But if you have added extensions, your extension-commands are not there.

In my case I had this Notebook toolbar

There there is a command (apply black formatter). I wanted a button that applyies the formatter just to a cell, not the whole notebook.

I found it here

To find out what clicking there was doing I opened the "Developer Tools" of the Browser (normally F12) and selected that menu option.

Copy the element and you get

<li tabindex="0" role="menuitem" class="lm-Menu-item" data-type="command" data-command="jupyterlab_code_formatter:black"><div class="f1vya9e0 lm-Menu-itemIcon"></div><div class="lm-Menu-itemLabel">Apply Black Formatter</div><div class="lm-Menu-itemShortcut"></div><div class="lm-Menu-itemSubmenuIcon"></div></li>

The command we are looking for is data-command="jupyterlab_code_formatter:black"

---

2. Find the Icon.

Path 1

You can use text instead, but Icons are quicker to 'read' :O)

We do the same (click the element from Web developer tools) with the existing black-formatter icon.

And extract the code

<jp-button class="jp-ToolbarButtonComponent" aria-pressed="false" aria-disabled="false" title="Format notebook" tabindex="-1" current-value="" appearance="stealth" minimal=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1792 1792" data-icon="jupyterlab_code_formatter:format_all"><path xmlns="http://www.w3.org/2000/svg" class="jp-icon3" d="M1473 929q7-118-33-226.5t-113-189t-177-131T929 325q-116-7-225.5 32t-192 110.5t-135 175T317 863q-7 118 33 226.5t113 189t177.5 131T862 1467q155 9 293-59t224-195.5t94-283.5zM1792 0l-349 348q120 117 180.5 272t50.5 321q-11 183-102 339t-241 255.5T999 1660L0 1792l347-347q-120-116-180.5-271.5T116 852q11-184 102-340t241.5-255.5T792 132q167-22 500-66t500-66z" fill="#626262"></path></svg></jp-button>

The icon is data-icon="jupyterlab_code_formatter:format_all"

Path 2

look inside https://github.com/jupyterlab/jupyterlab/blob/main/packages/ui-components/src/icon/iconimports.ts

---

3. Edit the Settings

Add the command and the icon. Item type: command

Go back to the notebook, select a code cell.

Buala!

We have a button to apply black code formatter to the cell (the last one)

Docs:

• https://github.com/jupyterlab/extension-examples/blob/main/commands/README.md
• https://jupyterlab.readthedocs.io/en/latest/user/interface_customization.html
• For JupyterLab commands: https://jupyterlab.readthedocs.io/en/latest/user/commands.html#commands-list
• For extension commands you can list all commands programmatically from https://github.com/jtpio/ipylab
• https://github.com/jupyterlab/jupyterlab/issues/13962