Embedding Jupyter notebook in website

General
1

Hi,

I have done a few courses on Coursera and found the experience very good. As a student, I was able to open a Jupyter notebook and work with it. How can I integrate Jupyter notebook in a website? I want to use this for educational purposes for our visitors. Can you point me to a guidance, please?

thanks,

Naveen

2

If you want to have users be able to open a Jupyter notebook and work with it, the easiest thing is rely on MyBinder.org to serve the session with the content you specify via a Github repository or other type of data information repository-type that MyBinder.org allows. Other examples are Zenodo, Figshare, or GitLab and more.
Then you could just put the link on your page and direct the user to click on it. Like so:

Click this badge to launch Jupyter for an amazing demonstration: Binder

If you click on that on this page, it will spin up a session served via MyBinder.org with the environment and notebook specified here.

You can use whatever you want to link to the launch URL. (Behind-the-scenes, here I used markdown but you can do the same thing with plain HTML on your page.) It doesn’t have to be a badge. You can link the launch URL to whatever you want on your page. It is just like an href in HTML-speak, so you could attach it to anything where’d you normally attach a link for a new page. So it could be text or a picture or a button, etc…

If you like the badges, you can even make custom launch badges in the Jupyter Binder style here. For example, this one was made via that way:

badge

Found out more about making a Binder-ready repository here and in video form here.

1 Like
3

Another option would be to embed the executable cells directly into the site. I wrote a tutorial about how to do this using nbinteract

1 Like
4

Another angle, which is not yet fully-cooked for “seamless” (or at least, “less-seamed”) embedding is JupyterLite, which can run quite a bit of IPython, numpy, and friends directly in the browser, no need for external services (aside from, at present, some fairly hefty use of some CDNs, by default).

We’ve got a bit of (un)building yet to do, but would love more feedback on this use case in this issue.

1 Like
5

Hi Team,

Is it correct approach to import @jupyter/* npm packages and bring up Jupyter components like notebook editor in the react based web application pages and customize the notebook editor?

Thanks