Templating#
Voilà gridstack#
gridstack.js is a jQuery plugin for widget layouts. This enables multi-column drag and drop grids and customizable layouts suitable for Bootstrap v3. It also works with knockout.js and touch devices.
The Gridstack Voilà template uses the metadata of the notebook cells to design the notebook’s layout. It is supposed to support the entire specification for the outdated Jupyter Dashboards.

voila-vuetify#
voila-vuetify is a template for using Voilà with the Material Design Component Framework Vuetify.js.
Installation#
$ pipenv install bqplot ipyvuetify voila-vuetify==voila-vuetify 0.0.1a8
Usage#
To use voila-vuetify
in a notebook, you first have to import ipyvuetify
:
import ipyvuetify as v
Then you can create a layout, e.g. with:
v.Tabs(_metadata={'mount_id': 'content-main'}, children=[
v.Tab(children=['Tab1']),
v.Tab(children=['Tab2']),
v.TabItem(children=[
v.Layout(row=True, wrap=True, align_center=True, children=[
v.Flex(xs12=True, lg6=True, xl4=True, children=[
fig, slider
]),
v.Flex(xs12=True, lg6=True, xl4=True, children=[
figHist2, sliderHist2
]),
v.Flex(xs12=True, xl4=True, children=[
fig2
]),
])
]),
v.TabItem(children=[
v.Container(children=['Lorum ipsum'])
])
])
You can use bqplot_vuetify_example.ipynb with:
$ pipenv run voila --template vuetify-default bqplot_vuetify_example.ipynb
Then your standard browser will open the URL http://localhost:8866/
and show
you the plots in Responsive Material Design.
Example for Voilà-vuetify with the monitor resolution of a laptop MDPI screen:

Example for Voilà-vuetify with the monitor resolution of an iPhone X:

voila-debug#
voila-debug is a template for displaying debug information when working on Voilà applications.
Installation#
$ pipenv install voila-debug
Usage#
You can use the template debug.ipynb with:
$ pipenv run voila --template=debug --VoilaExporter.template_file=debug.tpl
This will open your default browser with the URL localhost:8866
.
Then you can take a closer look at how it works at
http://localhost:8866/voila/render/docs/jupyter/dashboards/voila/debug.ipynb
.

In addition to an example widget, it contains a code cell for exiting the kernel:
import os
def kill_kernel(change):
os._exit(0)
button = widgets.Button(description="Kill Kernel")
button.on_click(kill_kernel)
button
voila-reveal#
voila-reveal is a template for slideshows based on RevealJS.
Installation#
$ pipenv install voila-reveal
Usage#
You can use the template with:
$ pipenv run voila --template=reveal reveal.ipynb
Additional options can be used to override the default settings, e.g. to change
the default value for transition Fade
to Zoom
with:
$ pipenv run voila --template=reveal --VoilaConfiguration.resources="{'reveal': {'transition': 'zoom'}}" reveal.ipynb
If configuration options are to be saved permanently, a conf.json
file can
be created in share/jupyter/voila/templates/reveal/
:
{
"traitlet_configuration": {
"resources": {
"reveal": {
"scroll": false,
"theme": "simple",
"transition": "zoom"
}
}
}
}
You can then turn your notebook into a slideshow in
. In a cell toolbar you can choose between- Slide
left to right
- Sub-Slide
top to bottom
- Fragment
stops inside a slide
- Notes
Speaker notes opened in a new window when the presenter press the
t
key
If you want to publish your slideshow on binder, you must write the following tag in the metadata of the notebook in :
"rise": {
"autolaunch": true
}
You can also use the chalkboard reveal plugin in the metadata of the notebook:
"rise": {
"enable_chalkboard": true
}
Create your own templates#
A Voilà template is a folder that is located in the virtual environment at
share/jupyter/voila/templates
and for example, contains the following:
/Users/veit/.local/share/virtualenvs/jupyter-tutorial--q5BvmfG/share/jupyter/voila/templates/mytheme
├── conf.json
├── nbconvert_templates
│ └── voila.tpl
├── static
│ ├── mytheme.js
│ └── mytheme.css
└── templates
├── 404.html
├── browser-open.html
├── error.html
├── page.html
└── tree.html
conf.json
Configuration file that e.g. refers to the basic template:
{"base_template": "default"}
nbconvert_templates
Custom templates for nbconvert nbconvert.
static
Directory for static files.
templates
Custom tornado templates.