Embed Jupyter HTML output in a web page

Question

I want to embed the HTML output of Jupyter, in my own web page. The reason for this is primarily, so that I can use Jupyter from my own webapp - and also access my research notebooks from anywhere in the world - via the internet.

A typical use case scenario would be that I click on a button on my page, and an iframe will be inserted in my page; Jupyter will then be launched at the backend (if not already running), and the output of Jupyter will be 'piped' to the iframe - so that I can use Jupyter from within my page.

The naive solution it appeared, was to use <iframe>, but there were two problems:

1. The iframe cross domain policy problem
2. Jupyter generated a one time authentication token when first launched

Is there anyway I can overcome these issues, so I can embed the output of Jupyter in my own web page?

Answer 1

you need to check nbconvert - https://github.com/jupyter/nbconvert

there you have 2 options.

1. to use command line to run notebook and then to let some web server to server .html
2. to use python, and nbconvert library

here is short code : if you want to show already generated:

from nbconvert.preprocessors import ExecutePreprocessor import nbformat from nbconvert import HTMLExporter from nbconvert.preprocessors.execute import CellExecutionError src_notebook = nbformat.reads(ff.read(), as_version=4) #where ff is file opened with some open("path to notebook file")
html_exporter = HTMLExporter() html_exporter.template_file = 'basic' #basic will skip generating body and html tags.... use "all" to gen all.. (body, resources) = html_exporter.from_notebook_node(src_notebook) print(body) #body have html output

if you want also to run notebook, then :

from nbconvert.preprocessors import ExecutePreprocessor import nbformat from nbconvert import HTMLExporter from nbconvert.preprocessors.execute import CellExecutionError src_notebook = nbformat.reads(ff.read(), as_version=4) #where ff is file opened with some open("path to notebook file")
ep = ExecutePreprocessor(timeout=50, kernel_name='python3') ep.preprocess(src_notebook, {}) html_exporter = HTMLExporter() html_exporter.template_file = 'basic' #basic will skip generating body and html tags.... use "all" to gen all.. (body, resources) = html_exporter.from_notebook_node(src_notebook) print(body) #body have html output

Answer 2

You can directly do that using the html_embed pre-processor:

$ jupyter nbconvert  --to html_embed  Annex.ipynb
[NbConvertApp] Converting notebook Annex.ipynb to html_embed
/usr/local/lib/python3.6/site-packages/nbconvert/filters/datatypefilter.py:41: UserWarning: Your element with mimetype(s) dict_keys(['image/pdf']) is not able to be represented.
  mimetypes=output.keys())
[NbConvertApp] Writing 2624499 bytes to Annex.html

Strangely, I could not find a direct reference in the manual from nbconvert.

Answer 3

You can use ipython nbconvert - -to html notebook.ipynb to obtain the html code for the same. Here is a guide on how to do it Blogging with the IPython notebook - see here

If your website is writing in python the use python embed docs Also this Tutorial - see here

or use kyso.io Here is how to embed Jupyter using Kyso platform - see here

(disclaimer - I’m a founder of kyso)