# Brainstorming for a more detailed extension development tutorial

**URL:** <https://discourse.jupyter.org/t/brainstorming-for-a-more-detailed-extension-development-tutorial/2493>\
**Category:** JupyterLab\
**Created:** [October 23, 2019, 3:19pm UTC](https://discourse.jupyter.org/t/brainstorming-for-a-more-detailed-extension-development-tutorial/2493 "2019-10-23T15:19:23Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![2ndworld](https://avatars.discourse-cdn.com/v4/letter/2/c89c15/32.png) [@2ndworld](https://discourse.jupyter.org/u/2ndworld)\
**Post date:** [October 23, 2019, 3:19pm UTC](https://discourse.jupyter.org/t/brainstorming-for-a-more-detailed-extension-development-tutorial/2493/1 "2019-10-23T15:19:23Z")

</div>

Hello,  
I am asking for input about what you’d like to see covered in a tutorial about jupyterlab extension development.

[https://jupyterlab.readthedocs.io/en/stable/developer/extension\_tutorial.html](https://jupyterlab.readthedocs.io/en/stable/developer/extension_tutorial.html) is great to get started, but after studying it, me personally, I am stuck with every step that goes beyond opening a widget.

My plan is to build something along the lines of [https://reactjs.org/tutorial/tutorial.html](https://reactjs.org/tutorial/tutorial.html) that shows the main concepts and patterns to use with this framework. Just a few keywords, which I’d like to document for myself and everybody else: toolbars, drag&drop, custom events, modal dialogs, phosphorjs, build process, …

What are the topics that you are struggling with during jupyterlab extension development?

Once I have sufficient input, proving that others than myself are interested in such a tutorial, I’ll setup a scaffold of some more-or-less useful extension that should finally demonstrate solutions to many of our collected problems. If you already have such a demonstration project, please let me know, and we could collaborate, or maybe you have already achieved more than what I plan?

---

<div class="post-metadata">

**Author:** ![manics](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/manics/32/85_2.png) [@manics](https://discourse.jupyter.org/u/manics)\
**Post date:** [October 24, 2019, 10:05pm UTC](https://discourse.jupyter.org/t/brainstorming-for-a-more-detailed-extension-development-tutorial/2493/2 "2019-10-24T22:05:13Z")

</div>

The biggest frustration I’ve had is not being able to browse the JupyterLab “object model”. In Jupyter Notebooks you can open your browser’s JavaScript console, dig through the live notebook object, figure out what properties and methods exist, and develop your extension based on what you’ve found.

I’ll not aware of how to do that in JupyterLab, which means I can only manipulate what I already know about, I can’t interactively browse and figure things out.

Sorry if this doesn’t actually answer your question 😀

---

<div class="post-metadata">

**Author:** ![choldgraf](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/choldgraf/32/1264_2.png) [@choldgraf](https://discourse.jupyter.org/u/choldgraf)\
**Post date:** [October 24, 2019, 11:00pm UTC](https://discourse.jupyter.org/t/brainstorming-for-a-more-detailed-extension-development-tutorial/2493/3 "2019-10-24T23:00:53Z")

</div>

I think that something like this is would be a **huge** help to the community of potential developers in JupyterLab.

For me, identifying a few key things that one might want to do with an extension (e.g. open a window and display some JS viz, run code in the background and display a result, trigger a download, etc), and providing separate walkthrough tutorials for each one would be quite helpful.

And as others have noted - a tutorial that’s explicitly aimed at helping people understand the underlying model of JupyterLab would be great.

---

<div class="post-metadata">

**Author:** ![AdriaanRol](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/adriaanrol/32/1058_2.png) [@AdriaanRol](https://discourse.jupyter.org/u/AdriaanRol)\
**Post date:** [October 25, 2019, 6:46am UTC](https://discourse.jupyter.org/t/brainstorming-for-a-more-detailed-extension-development-tutorial/2493/4 "2019-10-25T06:46:56Z")

</div>

I would really like to understand how you can create an extension that allows interacting with a running kernel.

It seems like a very basic functionality to be able to interact with a running kernel in order to create either basic live monitors or widgets like iPywidgets for the classic notebook interface.

I’ve asked a question about it before [How to create a jupyter-lab extension that interacts with a running kernel](https://discourse.jupyter.org/t/how-to-create-a-jupyter-lab-extension-that-interacts-with-a-running-kernel/2037) but either I am missing something obvious or it is not really clear where this is documented.

---

<div class="post-metadata">

**Author:** ![jtp](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/jtp/32/19100_2.png) [@jtp](https://discourse.jupyter.org/u/jtp)\
**Post date:** [October 25, 2019, 8:36am UTC](https://discourse.jupyter.org/t/brainstorming-for-a-more-detailed-extension-development-tutorial/2493/5 "2019-10-25T08:36:05Z")

</div>

> [@manics](#):
>
> The biggest frustration I’ve had is not being able to browse the JupyterLab “object model”. In Jupyter Notebooks you can open your browser’s JavaScript console, dig through the live notebook object, figure out what properties and methods exist, and develop your extension based on what you’ve found.

For this an IDE with good TypeScript support helps:

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/jupyter/original/2X/8/8e3bdf81e85ec544bc940d30f6b8edc4ec84e982.png)

Another thing that helps is placing breakpoints in the browser dev tools and then use the console to inspect objects:

![image](https://canada1.discourse-cdn.com/flex031/uploads/jupyter/original/2X/4/4c44ffbd2539514251dedefdaa2c87a7cf38b717.png)

Although that requires knowing which file to open.

---

<div class="post-metadata">

**Author:** ![fcollonval](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/fcollonval/32/801_2.png) [@fcollonval](https://discourse.jupyter.org/u/fcollonval)\
**Post date:** [October 26, 2019, 3:31pm UTC](https://discourse.jupyter.org/t/brainstorming-for-a-more-detailed-extension-development-tutorial/2493/6 "2019-10-26T15:31:01Z")

</div>

That repository can bring some information:

> **[MMesch/labextension\_tutorial](https://github.com/MMesch/labextension_tutorial)**
>
> Jupyterlab Extensions for the Impatient. Contribute to MMesch/labextension\_tutorial development by creating an account on GitHub.

  
Unfortunately it isn’t up-to-date with Jupyterlab latest version.

---

<div class="post-metadata">

**Author:** ![2ndworld](https://avatars.discourse-cdn.com/v4/letter/2/c89c15/32.png) [@2ndworld](https://discourse.jupyter.org/u/2ndworld)\
**Post date:** [October 28, 2019, 3:33pm UTC](https://discourse.jupyter.org/t/brainstorming-for-a-more-detailed-extension-development-tutorial/2493/7 "2019-10-28T15:33:38Z")

</div>

Dear all,  
thank you very much for your input.

@manics, I think your point is one of the most important issues. It is absolutely necessary to browse JupyterLab objects at runtime in order to learn what is going on as long as the documentation lags behind development of new features. jtp’s reminder of typescript interpreters in the IDE helps to some extent, but compile time tab completion doesn’t replace runtime inspection.

> [@manics](#):
>
> I can only manipulate what I already know about, I can’t interactively browse and figure things out.

Yes, this is THE issue of JupyterLab!!

@choldgraf, these points, display js viz, background computation, async result are something I had in mind, and some of the easier topics that I’ll be able to implement and document on my own.

@AdriaanRol, interacting with a running kernel is definitely an interesting point that I’ll add. I found some links on this, and also the tutorial cited by fcollonval includes an example. What do you think about that example, what details do you think are missing there?

@fcollonval, thank you for pointing to that tutorial. I’d like to address all those topics, and the easiest way might be to start our work based on that tutorial. Unfortunately it doesn’t include a license description, so that we’ll need to redo everything except for the underlying ideas.

To all, as I said, I am a new hobby extension developer for JupyterLab, maybe with less experience than each of you. I’ll need help. Who is willing to contribute what?  
In my opinion, it is most important to solve the runtime inspection of JupyterLabs objects in the debug console as pointed out by @manic. If it is already possible, someone has to document it so that manic, myself and everybody else is able to use it to speed up our developments.  
I’ll first address @choldgraf’s points, because I feel competent enough to do so.

Please raise your hand if you can contribute some examples, documentation, solutions to the questions that came up above.  
And please continue to describe what you’d like to find in a JuypterLab tutorial.

---

<div class="post-metadata">

**Author:** ![fcollonval](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/fcollonval/32/801_2.png) [@fcollonval](https://discourse.jupyter.org/u/fcollonval)\
**Post date:** [November 1, 2019, 2:13pm UTC](https://discourse.jupyter.org/t/brainstorming-for-a-more-detailed-extension-development-tutorial/2493/8 "2019-11-01T14:13:42Z")

</div>

> Unfortunately it doesn’t include a license description, so that we’ll need to redo everything except for the underlying ideas.

@2ndworld I requested the author of the jupyterlab (outdated) tutorial. He did it granting full permission to reuse the material written there: [add a license · Issue #2 · MMesch/labextension\_tutorial · GitHub](https://github.com/MMesch/labextension_tutorial/issues/2) 🙂

---

<div class="post-metadata">

**Author:** ![2ndworld](https://avatars.discourse-cdn.com/v4/letter/2/c89c15/32.png) [@2ndworld](https://discourse.jupyter.org/u/2ndworld)\
**Post date:** [November 1, 2019, 2:51pm UTC](https://discourse.jupyter.org/t/brainstorming-for-a-more-detailed-extension-development-tutorial/2493/9 "2019-11-01T14:51:53Z")

</div>

Thank you for your comments. Considering all previous discussions on difficulties implementing specific tasks, these three inputs don’t reflect the apparent demand for documentation.  
I tried to make clear, that I cannot complete such documentation on my own and asked for help with no reply.

So, I have eventually decided not to continue using JupyterLab, but instead work with Kendo UI for the web interface.

---

<div class="post-metadata">

**Author:** ![fcollonval](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/fcollonval/32/801_2.png) [@fcollonval](https://discourse.jupyter.org/u/fcollonval)\
**Post date:** [November 10, 2019, 4:58pm UTC](https://discourse.jupyter.org/t/brainstorming-for-a-more-detailed-extension-development-tutorial/2493/10 "2019-11-10T16:58:20Z")

</div>

For the record, several issues on this exists on the Jupyterlab repository. And most notably [https://github.com/jupyterlab/jupyterlab/issues/7273#issuecomment-552187600](https://github.com/jupyterlab/jupyterlab/issues/7273#issuecomment-552187600) resulted in @jtpio starting a new repository to start working on such documentation (thx a lot for the initiative): [https://github.com/jtpio/jupyterlab-extension-tutorial](https://github.com/jtpio/jupyterlab-extension-tutorial).

---

<div class="post-metadata">

**Author:** ![nscozzaro](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/nscozzaro/32/804_2.png) [@nscozzaro](https://discourse.jupyter.org/u/nscozzaro)\
**Post date:** [November 25, 2019, 6:24pm UTC](https://discourse.jupyter.org/t/brainstorming-for-a-more-detailed-extension-development-tutorial/2493/11 "2019-11-25T18:24:01Z")

</div>

I’m new to typescript, so one of the parts that has slowed me down with extension development is understanding the usage of namespaces, interfaces, factories, etc.  
My suggestion is to add some sections to the tutorial that discuss the usage of these (potentially unfamiliar) concepts as they relate to extension-building. Someone may fairly say “this is a JupyterLab extension tutorial, not a typescript tutorial,” but my suggestion is just to provide just some quick explanation of what angle bracket \< \> syntax like this means, for example:

> <https://github.com/jupyterlab/jupyterlab/blob/7a6356480e61570d7c957088e39b9617088c8fe8/packages/notebook/src/widgetfactory.ts#L21-L24>

  
Or namespaces/interfaces like this:  

> <https://github.com/jupyterlab/jupyterlab/blob/78e7bf2d6848fe22f2b59200c832e60f83b6ad22/packages/settingeditor/src/settingeditor.tsx#L337-L341>

---

<div class="post-metadata">

**Author:** ![fcollonval](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/fcollonval/32/801_2.png) [@fcollonval](https://discourse.jupyter.org/u/fcollonval)\
**Post date:** [April 19, 2020, 8:24am UTC](https://discourse.jupyter.org/t/brainstorming-for-a-more-detailed-extension-development-tutorial/2493/12 "2020-04-19T08:24:12Z")

</div>

⚠ The [extension examples](https://github.com/jupyterlab/extension-examples) landed on the jupyterlab GitHub group 🥳