# How to custom cell

**URL:** <https://discourse.jupyter.org/t/how-to-custom-cell/1280>\
**Category:** JupyterLab\
**Tags:** how-to\
**Created:** [June 5, 2019, 4:35pm UTC](https://discourse.jupyter.org/t/how-to-custom-cell/1280 "2019-06-05T16:35:59Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![yunair](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/yunair/32/1912_2.png) [@yunair](https://discourse.jupyter.org/u/yunair)\
**Post date:** [June 5, 2019, 4:35pm UTC](https://discourse.jupyter.org/t/how-to-custom-cell/1280/1 "2019-06-05T16:35:59Z")

</div>

I want to custom my own cell and implment it run logic. But I don’t know how to do it.  
Could you give me a demo or a doc to implement it?

---

<div class="post-metadata">

**Author:** ![jasongrout](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/jasongrout/32/371_2.png) [@jasongrout](https://discourse.jupyter.org/u/jasongrout)\
**Post date:** [June 10, 2019, 4:34pm UTC](https://discourse.jupyter.org/t/how-to-custom-cell/1280/2 "2019-06-10T16:34:03Z")

</div>

We don’t have very comprehensive docs for this right now. (Perhaps you could be the one to write a tutorial?)

Basically, you’ll need to write a JupyterLab extension that provides your custom cell class to the notebook. You can do this by providing an extension that overrides the default cell provider at [https://github.com/jupyterlab/jupyterlab/blob/adf2f3f421906bfb61255fa74f783d33d6def7f6/packages/notebook-extension/src/index.ts#L277-L289](https://github.com/jupyterlab/jupyterlab/blob/adf2f3f421906bfb61255fa74f783d33d6def7f6/packages/notebook-extension/src/index.ts#L277-L289). You’d probably inherit from the notebook panel content factory at [https://github.com/jupyterlab/jupyterlab/blob/adf2f3f421906bfb61255fa74f783d33d6def7f6/packages/notebook/src/panel.ts#L294-L305](https://github.com/jupyterlab/jupyterlab/blob/adf2f3f421906bfb61255fa74f783d33d6def7f6/packages/notebook/src/panel.ts#L294-L305) (which itself inherits from the notebook content factory at [https://github.com/jupyterlab/jupyterlab/blob/adf2f3f421906bfb61255fa74f783d33d6def7f6/packages/notebook/src/widget.ts#L774](https://github.com/jupyterlab/jupyterlab/blob/adf2f3f421906bfb61255fa74f783d33d6def7f6/packages/notebook/src/widget.ts#L774)) and override the [createCodeCell](https://github.com/jupyterlab/jupyterlab/blob/adf2f3f421906bfb61255fa74f783d33d6def7f6/packages/notebook/src/widget.ts#L783) method.

We’re happy to answer questions you may have.

---

<div class="post-metadata">

**Author:** ![yunair](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/yunair/32/1912_2.png) [@yunair](https://discourse.jupyter.org/u/yunair)\
**Post date:** [June 12, 2019, 3:42am UTC](https://discourse.jupyter.org/t/how-to-custom-cell/1280/3 "2019-06-12T03:42:06Z")

</div>

Is this mean I can change exist cell behavior rather than create a new cell ?  
So, I can write a JupyterLab extension to find code cell then change it behavior?

---

<div class="post-metadata">

**Author:** ![jasongrout](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/jasongrout/32/371_2.png) [@jasongrout](https://discourse.jupyter.org/u/jasongrout)\
**Post date:** [July 27, 2019, 5:17am UTC](https://discourse.jupyter.org/t/how-to-custom-cell/1280/4 "2019-07-27T05:17:42Z")

</div>

The extension I mention above would actually be the one supplying new code cells to JupyterLab wherever they were needed.

---

<div class="post-metadata">

**Author:** ![Rakesh\_Nair](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/rakesh_nair/32/1429_2.png) [@Rakesh\_Nair](https://discourse.jupyter.org/u/Rakesh_Nair)\
**Post date:** [February 12, 2020, 8:35am UTC](https://discourse.jupyter.org/t/how-to-custom-cell/1280/5 "2020-02-12T08:35:55Z")

</div>

Hey @jasongrout I want try and do this too and will try and follow your steps listed, but just wondering if there any tutorials or docs that have been created in the last few months? ( I see the original post was from 8 months ago)

Having sifted through all the jupyterlab documents in the past 2 weeks, the most useful code examples so far for me has been [https://github.com/jtpio/jupyterlab-extension-examples](https://github.com/jtpio/jupyterlab-extension-examples)

Thanks  
Raks

---

<div class="post-metadata">

**Author:** ![jasongrout](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/jasongrout/32/371_2.png) [@jasongrout](https://discourse.jupyter.org/u/jasongrout)\
**Post date:** [February 12, 2020, 9:37am UTC](https://discourse.jupyter.org/t/how-to-custom-cell/1280/6 "2020-02-12T09:37:26Z")

</div>

> [@Rakesh\_Nair](#):
>
> the most useful code examples so far for me has been [GitHub - jupyterlab/extension-examples: JupyterLab Extensions by Examples](https://github.com/jtpio/jupyterlab-extension-examples)

Oh wow, that looks like a really nice resource!

I don’t know of other comprehensive tutorials covering this case that have been written.

---

<div class="post-metadata">

**Author:** ![mrznone](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/mrznone/32/2274_2.png) [@mrznone](https://discourse.jupyter.org/u/mrznone)\
**Post date:** [June 19, 2020, 4:54am UTC](https://discourse.jupyter.org/t/how-to-custom-cell/1280/7 "2020-06-19T04:54:03Z")

</div>

Any luck on this? I am trying to do the similar thing.

---

<div class="post-metadata">

**Author:** ![Fei\_Chen](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/fei_chen/32/5723_2.png) [@Fei\_Chen](https://discourse.jupyter.org/u/Fei_Chen)\
**Post date:** [November 17, 2021, 9:24am UTC](https://discourse.jupyter.org/t/how-to-custom-cell/1280/8 "2021-11-17T09:24:51Z")

</div>

Hello, any tutorial about adding new cell type for jupter notebook?

---

<div class="post-metadata">

**Author:** ![ragokan](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/ragokan/32/8200_2.png) [@ragokan](https://discourse.jupyter.org/u/ragokan)\
**Post date:** [October 24, 2022, 7:22pm UTC](https://discourse.jupyter.org/t/how-to-custom-cell/1280/9 "2022-10-24T19:22:40Z")

</div>

I am also still looking for adding new Cell Type, any updates?

---

<div class="post-metadata">

**Author:** ![0Hughman0](https://avatars.discourse-cdn.com/v4/letter/0/2bfe46/32.png) [@0Hughman0](https://discourse.jupyter.org/u/0Hughman0)\
**Post date:** [July 14, 2023, 9:18am UTC](https://discourse.jupyter.org/t/how-to-custom-cell/1280/10 "2023-07-14T09:18:38Z")

</div>

Maybe one of the core devs can comment, but as far as I can tell this is something that would be very challenging to do.

The cell types are relatively hard coded (as ‘code’, ‘markdown’ and ‘raw’) at this point, so it would require a lot of work to loosen this up.

For example, the context menu in which you select a given cell type is hard coded:

> <https://github.com/jupyterlab/jupyterlab/blob/f8226e7e4efd8fadebc1eee7b003fad33615fa5c/packages/notebook/src/default-toolbar.tsx#L368>

Similarly the method on the Notebook class that actually creates the Cell widget (`Notebook._insertCell`) only works for the three cell types:

> <https://github.com/jupyterlab/jupyterlab/blob/25e52500908e3237006f5f9dc7588ae68b1927e9/packages/notebook/src/widget.ts#L636>

As this is a private method, at present it would be hard to create a subclass of `Notebook` to override this behaviour.

To make this easy I think would take a fairly significant overhaul of the way the `Notebook` interacts with the `contentFactory`:

> <https://github.com/jupyterlab/jupyterlab/blob/adf2f3f421906bfb61255fa74f783d33d6def7f6/packages/notebook/src/widget.ts#L774>

And would be very hard to achieve with an extension.

* * *

I think depending on what you want, you might be able to achieve something similar by adding a custom mimetype and renderer:

> <https://github.com/jupyterlab/extension-examples/tree/main/mimerenderer>
>
> //github.com/jupyterlab/extension-examples/tree/main/mimerenderer

Or if your widget doesn’t need to actually be part of the notebook file, there is a way to insert new widgets into the NotebookPanel:

[https://jupyterlab.readthedocs.io/en/stable/extension/notebook.html#adding-a-widget-to-the-notebook-header](https://jupyterlab.readthedocs.io/en/stable/extension/notebook.html#adding-a-widget-to-the-notebook-header)