Project Jupyter offers a complete suite of open-source tools for the scientific computing community, reaching from the exploratory phase of a project to the presentation of the results. In this last but not least phase is where Voilà takes place, turning a technical document such as Notebook into an interactive presentation or a stand-alone web app ready to be shared with non-technical readers. You can learn more about Voilà in this blog post.

Voilà is an easy-to-use command-line tool that shines in its simplicity and flexibility. All its versatility comes from a custom template system built upon Jinja templates that allows everyone to create a custom UI to share Jupyter Notebooks. Examples of the versatility provided for the template system are voila-reveal and voila-gridstack.

Voila-gridstack is a Voilà template started by Bartosz Telenczuk to turn notebooks into dashboards following the specification introduced by the legacy jupyter-dashboards project. The idea behind is to be able to change the layout of the cells to re-configure your dashboards using drag-and-drop. Once you have your desired layout, its configuration stays in the metadata of the notebook. This makes it simple to carry around or share the notebook and its layout configuration.

With the release of JupyterLab 3.0, we wanted to update the voila-gridstack template by adding an editor for JupyterLab.

Configure your layout

The first way to open the voila-gridstack editor is by right-clicking on the notebook and selecting open with “Voilà Gridstack”. The editor is itself a JupyterLab Document Widget, which can be seen as another view of the same notebook document. The editor can also be launched from the classic notebook with a toolbar button.

Once the editor is open, every cell is decorated with a toolbar as a drag-and-drop handle and a button to remove the cell from the dashboard. When removing a cell, it is just marked as hidden in the metadata but it is not deleted from the notebook file. Besides, handles are provided for resizing cells in the layout.

When opening the editor for the first time in a new notebook, the metadata of the notebook is modified to follow jupyter-dashboards’ specification. By default, you will see an empty editor. To add new cells just drag them from the notebook view. It is not possible to add cells from another notebook.

Finally, you can save the layout into the metadata of the notebook by clicking the “save” button or with the ctrl+s shortcut and then it’s time to hit the render button and Voilà! You will see your layout as a stand-alone web app.

Try it online!

You can try the jupyterlab-gridstack extension online without installing anything by just clicking on the following image:

Installation

Voila-gridstack is available as a conda package, and you can easily install it by typing the following command in a conda environment:

mamba install -c conda-forge jupyterlab voila-gridstack

Acknowledgements

The development of Voilà and related packages at QuantStack is sponsored by Bloomberg.

The example notebook used as an example in this post was one of the example notebooks of the legacy Jupyter dashboards project.

About the authors

Carlos Herrero is a Computer Engineer passionate about AI and its applications to robotics. Currently working at QuantStack helping to develop Open Source projects.

Jeremy Tuloup is a Scientific Software Developer at QuantStack, working on JupyterLab, Voilà, and various other projects within the Jupyter ecosystem.