And Voici!

Scaling Jupyter dashboards up to the millions.

Duc Trung Le
Jupyter Blog

--

Voici (meaning “here is” in French) is a novel project reshaping Jupyter-based interactive dashboards by combining Voilà and JupyterLite features. It facilitates the creation of dynamic, in-browser environments for data visualization and exploration.

Built upon the foundations of Voilà, Voici inherits the ability to convert any Jupyter notebook into a standalone user-friendly dashboard. While the simplicity and extensibility of Voilà are kept intact, Voici adopts the in-browser execution model of JupyterLite, replacing the client-server approach.

Dashboards generated by Voici are simply a collection of static files. Deploying and scaling such dashboards is straightforward since there is no need to allocate computational resources in the backend.

Voici dashboards are extraordinarily scalable compared to their “Voilà” counterparts, since they don’t require a container per user session.

Voilà and Voici, as their name suggests, share a lot of commonalities like the CLI, the configuration options, and the templating system. The difference in their execution model results in a distinction: Voilà can hide the source code from the browser, displaying only the rendered dashboard, whereas Voici exposes the entire notebook content to the front end.

From a notebook to a Voici dashboard

Installation and first-time use

You can install Voici using pip:

pip install voici

Or using conda/mamba:

mamba install voici -c conda-forge

Upon installation, the Voici command-line utility becomes available and can be used as a drop-in replacement for the voila command. For example, you can generate static dashboards from a notebook or a directory of notebooks like this:

# Build a single dashboard
voici my-notebook.ipynb
# Build a directory of notebooks
voici notebooks/
# Build a dashboard with a dark theme and voila-gridstack template
voici my-notebook.ipynb --template gridstack --theme dark

Once the dashboards are built in the _output directory, you can simply serve the static web page with your favorite web server. For example, using CPython’s simple HTTP server:

python -m http.server -d _output
A Voici dashboard using the dark theme

For the configurations of the themes, templates, or the tree page, you can refer to the Voilà documentation for available options. The Voici-specific configurations can be found in the Voici documentation.

Deploy Voici dashboard

Besides the static site hosting services, it is also possible to deploy Voici dashboards to GitHub Pages directly from your repository or to embed them into Sphinx documentation.

Publishing Voici dashboards on GitHub Pages

Creating your deployment on GitHub Pages is straightforward with the help of a template repository available on GitHub. You can follow the instructions from the following video:

The dashboard will be built by the CI action and published on the corresponding GitHub page of your repository.

Embedding Voici dashboards in Sphinx documentation

jupyterlite-sphinx is a Python package that allows embedding Jupyterlite in Sphinx documentation using simple directives. It is used in the documentation of major projects like scikit-image or ipywidgets.

In addition to JupyterLite applications, this package also supports embedding Voici dashboards with the voici directive:

.. voici:: my_notebook.ipynb
:height: 600px
:prompt: Try Voici!
:prompt_color: #dc3545

With this directive, the Voici dashboard will be generated automatically with the Sphinx documentation, and the dashboard will be loaded as per user request.

A Voici dashboard embedded in Sphinx documentation

Voici gallery

The Voici gallery is a collection of dashboards built with Voici, it aims to provide a source of inspiration for crafting complex dashboards entirely based on the Jupyter ecosystem.

Voici Gallery home page

If you’ve created an interesting dashboard and would like to share it with a wider audience, don’t hesitate to submit a pull request here to have it included in the list of examples!

Future development

Voici is rapidly evolving, with many improvements already in the works such as:

  • Better integration with JupyterLab and JupyterLite to preview and generate Voici dashboards from their user interface.
  • Provide more user-friendly tools to easily deploy Voici dashboards to other platforms like GitLab and HuggingFace,…

User feedback from the community also plays a big role in the project roadmap. Explore Voici and share your thoughts with us using the project’s GitHub issues!

About the authors

Martin Renou is a Technical Director at QuantStack and a maintainer of Project Jupyter. Among other projects Martin is a core team member of the ipywidgets project and maintains many Jupyter widget packages such as ipyleaflet, ipydatagrid, ipygany, ipycanvas, and bqplot. He is a co-creator of the Voilà dashboarding system, and the xeus-python kernel.

Le Duc Trung is a Scientific Software Developer at QuantStack. He works on several projects within the Jupyter ecosystem, from the main projects like JupyterLab, Voilà, and ipywidgets to various JupyterLab extensions and widgets.

--

--