How to embed an interactive Jupyter notebook into html?

Question

I am trying to create a web application that allows users to create and share Jupyter notebooks.

Currently, I have JupyterHub up and running and am able to spawn new servers for individual servers.

However, I do not know how to embed a Jupyter notebook into a html page. I have tried nbconvert, but that gives me a static rendering of the noteboo. What I need is a dynamic notebook that users can edit and run.

I plan to store notebooks in GitHub and allow users to view them through the web application.

I have seen something similar to this in the website Quantopian. (Ex : Quantopian notebook). How do I achieve something similar to this on the front-end side of things?

Any help would be greatly appreciated!

Answer 1

To embed the Jupyter environment, you may consider to use an iframe.

• Note that current browsers require correct configuration of the Content Security Policy (CSP) of your applications (your custom-Jupyter) to run.
• You can activate the Developer's console in your browser (e.g. in Chrome) to check the CSP errors that may occur.
• There are two issues (the one and the other) in Github which responses show you how to deal with that configuration.

To read and store your notebooks in Github, you probably need to check other projects such as mybinder and Everware, and/or modify the source code of your custom-Jupyter.

• You may check a "cost estimation" example using mybinder. The mybynder is configured to show an specific Github repository. It starts a docker single-user Jupyter server and shows an interactive session in your browser. There are other examples here and here.
• The source code of mybinder is in Github
• I think you may consider the Everware project (in beta at this moment) too. The source code is in Github.