Index of /besson/publis/how-to-customize-title-of-jupyter-notebook.git

[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  - Root of the website (in English or in French)
[TXT]README.md2018-02-25 00:18 6.5KSome details about this page
[IMG]latest_demo.png2018-02-09 15:33 66K 
[IMG]home_view.png2017-05-13 18:44 60K 
[IMG]editing_a_notebook.png2017-05-13 18:44 90K 
[IMG]demo_on_uLogMe.png2017-05-13 18:44 110K 
[   ]custom.js2018-02-25 00:14 1.5K 
[   ]_config.yml2017-03-17 17:29 25  
[   ]LICENSE2016-10-28 19:37 1.1K 
[TXT]How-to-customize-title-of-jupyter-notebook.tex2017-05-13 02:48 7.9K 
[   ]How-to-customize-title-of-jupyter-notebook.pdf2018-02-09 15:33 230K 
# "How to customize [Jupyter notebooks]( document titles ?"

## New tutorial :sparkles:
By using [the latest features]( from Jupyter Notebook, you can use [this script `custom.js`](custom.js) to perform this hack easily:

// custom.js script for Jupyter Notebook
// (C) Lilian Besson, 2018
// See
// MIT License,

// Fourth solution, using deprecated __defineSetter__ method... simple and pretty!
document.__defineSetter__('title', function(val) {
    // document.title = val + " — Jupyter Notebook";   // WARNING Would be recursive!
    console.log("Setting window's title to:", val);
    document.querySelector('title').childNodes[0].nodeValue = val + " — Jupyter Notebook";

You can [download this raw `custom.js` file]( and save it to `~/.jupyter/custom/custom.js` (create the folder if needed):

mkdir -p ~/.jupyter/custom/
cd ~/.jupyter/custom/
cat custom.js  # just check the content by yourself, never trust a stranger from Internet!
# relaunch Jupyter notebook!

See the difference (before, without "Jupyter Notebook" display in the window's title | after, with "Jupyter Notebook" in the title):



## Previous tutorial

> This small document is here to *quickly* and *clearly* explain how to do the following tweak for *every* page that the [Jupyter]( application displays in your browser :
> >  « How to ensure that the title of the web page (`document.title` in the DOM) finishes with `" - Jupyter Notebook"` ? »
> These explanations were up-to date on May 12th of 2017, with [Jupyter Notebook]( package at  [version 5.0.0](


The following explanations assume you have a local installation of Jupyter Notebook. If this is not the case, [follow this tutorial](

Typically, this Python package will be installed in `/usr/local/lib/python3.5/dist-packages/notebook/` on a Debian/Ubuntu machine, and probably on a similar location for Mac OS X, and you can figure it out on Windows. Let call that path `PATH/`.

## First modification : HTML templates

- Go in `PATH/templates/`
- Edit, probably with `sudo` rights, the following templates:
- + `view.html` on line #6, add "`- File View`" after `{{page_title}}` and before `</title>`.
  + `tree.html` on line #3, add "`- File Tree`" after `{{page_title}}` and before `{` `%` `endblock` `%` `}`.
  + `terminal.html` on line #3, add "`- Terminal`" after `{{page_title}}` and before `{` `%` `endblock` `%` `}`.
  + `edit.html` on line #3, add "`- Editor`" after `{{page_title}}` and before `{` `%` `endblock` `%` `}`.
  + `page.html` on line #7, add "` - Jupyter Notebook`" after `{` `%` `endblock` `%` `}` and before `</title>`.
- Be sure to save all the changes, and that's it for this step.

> Of course, if the line number don't match, just search for the pattern, and edit on the first line that contains it !

## Second modification : Javascript files

- Go in `PATH/notebook/static/notebook/js/`
- Edit, probably with `sudo` rights, the following scripts:
- + `main.min.js ` (and maybe `main.js`) : on line #32216 (or nearby!), add "` + ' - Jupyter Notebook'`" after "`document.title = nbname`"...  :warning: that file is HUGE, so try to use a solid text editor to edit it! (for instance, [GNU nano](
  + `savewidgets.js` : on line #139, add "` + ' - Jupyter Notebook'`" after "`document.title = nbname`"

## Cautious!
These changes **have to be done** again if you update (`pip install --upgrade`) Jupyter Notebook...


## Demos ?
Here are some screenshots showing that these small modifications worked:

### Editing a notebook : before and after
![Editing a notebook : before and after](editing_a_notebook.png)

### Home view : before and after
![Home view : before and after](home_view.png)


> You can also [see the useless PDF version of this webpage](How-to-customize-title-of-jupyter-notebook.pdf)... If you want!

## Questions

### Bonus question : *why would you want to do **that** ?*

- Simple and honest answer : I am constantly using my [uLogMe]( software to watch and monitor the *title* of the active window on my laptops, and I wanted to store the time spent editing Jupyter notebooks under a special category ("Notebooks") and not under the general browsing time.

  ![Demo on my uLogMe application](demo_on_uLogMe.png)

- Fun answer : ... I am always curious about how a certain piece of software works, and I love tweaking "just a little bit" open-source pieces of code!

### Interesting question : *why writing a tutorial and not a Jupyter Notebook extension (`nbextension`) ?*

- Simple answer : I think (or though) it would be hard, as the changes explained below concern just a line or two in a few files, but on the core files of the software...
- Boring answer : I don't have time to produce a well-done nb extension, and maintain it...


## :scroll: License ? [![GitHub license](](
[MIT Licensed]( (file [LICENSE](LICENSE)).
© [Lilian Besson](, 2017-18.

[![Ask Me Anything !](](

[![ForTheBadge built-with-swag](](

[![ForTheBadge uses-badges](](
[![ForTheBadge uses-git](](