How to embed an interactive Jupyter notebook into html?

javascript html frontend web-frontend
mintchip36 picture mintchip36 · Jul 29, 2017 · Viewed 9.6k times · Source

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

Jaime picture Jaime · Jul 29, 2017

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.

Related questions

Get form data in ReactJS

I have a simple form in my render function, like so: render : function() { return ( <form> <input type="text" name="email" placeholder="Email" /> <input type="password" name="password" placeholder="Password" /> <button type="button" onClick={…

Read More
Insert HTML with React Variable Statements (JSX)

I am building something with React where I need to insert HTML with React Variables in JSX. Is there a way to have a variable like so: var thisIsMyCopy = '<p>copy copy copy <strong>strong …

Read More
How to get all the values of input array element jquery

Here is my html input elements <input type="text" name="pname[]" value="" /> <input type="text" name="pname[]" value="" /> <input type="text" name="pname[]" value="" /> <input type="text" name="pname[]" value="" /> <input …

Read More