Convert Figma logo to code with AI

voila-dashboards logovoila

Voilà turns Jupyter notebooks into standalone web applications

5,429
504
5,429
315

Top Related Projects

Create beautiful, publication-quality books and documents from computational content.

34,470

Streamlit — A faster way to build and share data apps.

21,327

Data Apps & Dashboards for Python. No JavaScript Required.

19,285

Interactive Data Visualization in the browser, from Python

4,617

Panel: The powerful data exploration & web app framework for Python

32,030

Build and share delightful machine learning apps, all in Python. 🌟 Star to support our work!

Quick Overview

Voila is a Python library that turns Jupyter notebooks into standalone web applications and dashboards. It allows users to create interactive data visualizations and applications without writing traditional web development code, leveraging the power of Jupyter widgets and the familiarity of the notebook environment.

Pros

  • Easy to use for those familiar with Jupyter notebooks
  • Supports a wide range of Jupyter widgets and custom extensions
  • Enables rapid prototyping and deployment of data-driven applications
  • Integrates well with existing Python data science ecosystems

Cons

  • Limited customization options compared to full-fledged web frameworks
  • Performance can be slower than purpose-built web applications
  • Debugging can be challenging due to the abstraction layer
  • May require additional setup for more complex deployments

Code Examples

  1. Basic Voila usage:
# In a Jupyter notebook
import ipywidgets as widgets
import matplotlib.pyplot as plt

@widgets.interact(x=widgets.IntSlider(min=-10, max=10, step=1, value=0))
def plot(x):
    plt.figure(figsize=(10, 5))
    plt.plot(range(-10, 11), [i**2 + x for i in range(-10, 11)])
    plt.title(f'y = x^2 + {x}')
    plt.show()
  1. Using Voila with custom widgets:
import ipywidgets as widgets
from IPython.display import display

class CustomWidget(widgets.DOMWidget):
    _view_name = widgets.Unicode('CustomView').tag(sync=True)
    _view_module = widgets.Unicode('custom').tag(sync=True)
    value = widgets.Unicode('').tag(sync=True)

w = CustomWidget()
display(w)
  1. Voila configuration in notebook metadata:
{
  "voila": {
    "theme": "dark",
    "template": "gridstack",
    "strip_sources": true
  }
}

Getting Started

  1. Install Voila:
pip install voila
  1. Create a Jupyter notebook with interactive widgets.

  2. Run Voila from the command line:

voila your_notebook.ipynb
  1. Access the Voila dashboard in your web browser at the provided URL.

Competitor Comparisons

Create beautiful, publication-quality books and documents from computational content.

Pros of Jupyter Book

  • Generates comprehensive, structured documentation and books from Jupyter Notebooks
  • Supports integration with Sphinx for advanced customization and extensions
  • Allows for version control and collaborative editing of content

Cons of Jupyter Book

  • Steeper learning curve for complex configurations and customizations
  • Requires more setup and configuration compared to Voila's simplicity
  • Less suitable for creating interactive dashboards or applications

Code Comparison

Jupyter Book configuration (in _config.yml):

title: My Jupyter Book
author: Your Name
logo: path/to/logo.png
execute:
  execute_notebooks: auto

Voila configuration (in voila.json):

{
  "template": "gridstack",
  "theme": "dark",
  "strip_sources": true
}

While Jupyter Book focuses on creating structured documentation and books from Jupyter Notebooks, Voila is designed for turning notebooks into standalone web applications and dashboards. Jupyter Book offers more extensive documentation features, while Voila excels in creating interactive, user-friendly interfaces with minimal configuration.

34,470

Streamlit — A faster way to build and share data apps.

Pros of Streamlit

  • Easier to get started with, requiring less boilerplate code
  • More built-in widgets and components for rapid prototyping
  • Active community and extensive documentation

Cons of Streamlit

  • Less flexibility in layout and design compared to Voila
  • Can be slower for larger applications due to its stateless nature
  • Limited support for custom JavaScript integrations

Code Comparison

Streamlit:

import streamlit as st

st.title("Hello World")
name = st.text_input("Enter your name")
st.write(f"Hello, {name}!")

Voila:

from ipywidgets import widgets
from IPython.display import display

title = widgets.HTML("<h1>Hello World</h1>")
name_input = widgets.Text(description="Enter your name")
output = widgets.HTML()

def update_output(change):
    output.value = f"<p>Hello, {change.new}!</p>"

name_input.observe(update_output, names="value")
display(title, name_input, output)

This comparison highlights the simplicity of Streamlit's syntax for creating interactive elements, while Voila requires more verbose code but offers greater customization potential.

21,327

Data Apps & Dashboards for Python. No JavaScript Required.

Pros of Dash

  • More extensive documentation and larger community support
  • Built-in components for creating interactive UI elements
  • Seamless integration with Plotly for advanced data visualization

Cons of Dash

  • Steeper learning curve, especially for those new to web development
  • Requires more boilerplate code for simple applications
  • Less flexibility in using existing Jupyter notebooks

Code Comparison

Voila example:

from ipywidgets import interact
import matplotlib.pyplot as plt

@interact(x=(-10, 10, 0.1))
def plot(x):
    plt.plot([0, x], [0, x**2])
    plt.ylim(0, 100)

Dash example:

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.graph_objs as go

app = dash.Dash(__name__)
app.layout = html.Div([
    dcc.Slider(id='x-slider', min=-10, max=10, step=0.1, value=0),
    dcc.Graph(id='plot')
])

@app.callback(Output('plot', 'figure'), Input('x-slider', 'value'))
def update_plot(x):
    return go.Figure(data=[go.Scatter(x=[0, x], y=[0, x**2])], layout=dict(yaxis=dict(range=[0, 100])))

if __name__ == '__main__':
    app.run_server(debug=True)
19,285

Interactive Data Visualization in the browser, from Python

Pros of Bokeh

  • More mature and feature-rich library with extensive documentation
  • Supports interactive visualizations directly in the browser
  • Offers greater customization options for advanced users

Cons of Bokeh

  • Steeper learning curve, especially for beginners
  • Requires more code to create basic dashboards
  • Less seamless integration with Jupyter notebooks

Code Comparison

Voila:

import ipywidgets as widgets
from IPython.display import display

slider = widgets.IntSlider(description='Value')
display(slider)

Bokeh:

from bokeh.plotting import figure, show
from bokeh.models import Slider
from bokeh.layouts import column

p = figure()
slider = Slider(start=0, end=100, value=50, step=1, title="Value")
show(column(slider, p))

Summary

Voila is simpler to use and integrates seamlessly with Jupyter notebooks, making it ideal for quick prototyping and data exploration. Bokeh, on the other hand, offers more advanced features and customization options, making it suitable for creating complex, interactive visualizations and dashboards. The choice between the two depends on the specific requirements of your project and your level of expertise in data visualization.

4,617

Panel: The powerful data exploration & web app framework for Python

Pros of Panel

  • More flexible and powerful for creating complex interactive dashboards
  • Supports a wider range of plotting libraries and widget types
  • Better integration with data analysis workflows and existing Python code

Cons of Panel

  • Steeper learning curve due to more extensive API
  • Potentially slower initial rendering compared to Voila
  • Requires more setup and configuration for deployment

Code Comparison

Panel:

import panel as pn
import numpy as np

def plot(n):
    return pn.pane.Matplotlib(plt.plot(np.random.randn(n)))

pn.interact(plot, n=pn.widgets.IntSlider(start=1, end=100))

Voila:

import ipywidgets as widgets
import matplotlib.pyplot as plt
import numpy as np

@widgets.interact(n=widgets.IntSlider(min=1, max=100))
def plot(n):
    plt.plot(np.random.randn(n))

Both Panel and Voila are powerful tools for creating interactive dashboards from Jupyter notebooks. Panel offers more flexibility and integration with various plotting libraries, while Voila provides a simpler approach with faster initial rendering. The choice between them depends on the specific requirements of your project and your familiarity with their respective APIs.

32,030

Build and share delightful machine learning apps, all in Python. 🌟 Star to support our work!

Pros of Gradio

  • Easier to set up and use, with a simpler API for creating interfaces
  • Supports a wider range of input/output types, including audio and video
  • Built-in sharing functionality for quick demos and collaboration

Cons of Gradio

  • Less customizable and flexible compared to Voila's widget system
  • May not integrate as seamlessly with existing Jupyter notebooks
  • Limited support for complex layouts and dashboard-style applications

Code Comparison

Gradio example:

import gradio as gr

def greet(name):
    return f"Hello, {name}!"

iface = gr.Interface(fn=greet, inputs="text", outputs="text")
iface.launch()

Voila example:

import ipywidgets as widgets
from IPython.display import display

def greet(name):
    print(f"Hello, {name}!")

name_input = widgets.Text(description="Name:")
greet_button = widgets.Button(description="Greet")
greet_button.on_click(lambda _: greet(name_input.value))
display(name_input, greet_button)

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

voila

Documentation Binder Discourse Join the Gitter Chat

Rendering of live Jupyter notebooks with interactive widgets.

Introduction

Voilà turns Jupyter notebooks into standalone web applications.

Unlike the usual HTML-converted notebooks, each user connecting to the Voilà tornado application gets a dedicated Jupyter kernel which can execute the callbacks to changes in Jupyter interactive widgets.

  • By default, Voilà disallows execute requests from the front-end, preventing execution of arbitrary code.
  • By default, Voilà runs with the strip_sources option, which strips out the input cells from the rendered notebook.

Installation

Voilà can be installed with the mamba (or conda) package manager from conda-forge

mamba install -c conda-forge voila

or from PyPI

pip install voila

JupyterLab preview extension

Voilà provides a JupyterLab extension that displays a Voilà preview of your Notebook in a side-pane.

Starting with JupyterLab 3.0, the extension is automatically installed after installing voila with pip install voila.

If you would like to install the extension from source, run the following command.

jupyter labextension install @voila-dashboards/jupyterlab-preview

Usage

As a standalone tornado application

To render the bqplot example notebook as a standalone app, run voila bqplot.ipynb. To serve a directory of jupyter notebooks, run voila with no argument.

For example, to render the example notebook bqplot.ipynb from this repository with Voilà, you can first update your current environment with the requirements of this notebook (in this case in a conda environment and render the notebook with

mamba env update -f .binder/environment.yml
cd notebooks/
voila bqplot.ipynb

For more command line options (e.g., to specify an alternate port number), run voila --help.

As a server extension to notebook or jupyter_server

Voilà can also be used as a Jupyter server extension, both with the notebook server or with jupyter_server.

To install the Jupyter server extension, run

jupyter serverextension enable voila
jupyter server extension enable voila

When running the Jupyter server, the Voilà app is accessible from the base url suffixed with voila.

Documentation

To get started with using Voilà, check out the full documentation:

https://voila.readthedocs.io/

Examples

The following two examples show how a standalone Jupyter notebook can be turned into a separate app, from the command-line integration.

Rendering a notebook including interactive widgets and rich mime-type rendering

Voilà basics

Rendering a notebook making use of a custom widget library (bqplot)

Voilà bqplot

Showing the source code for a Voilà notebook

The sources of the Jupyter notebook can be displayed in a Voilà app if option strip_sources is set to False.

Voilà sources

Voilà dashboards with other language kernels**

Voilà is built upon Jupyter standard formats and protocols, and is agnostic to the programming language of the notebook. In this example, we present an example of a Voilà application powered by the C++ Jupyter kernel xeus-cling, and the xleaflet project.

Voilà cling

The Voilà Gallery

The Voilà Gallery is a collection of live dashboards and applications built with Voilà and Jupyter widgets.

Most of the examples rely on widget libraries such as ipywidgets, ipyleaflet, ipyvolume, bqplot and ipympl, and showcase how to build complex web applications entirely based on notebooks.

New examples can be added to the gallery by following the steps listed in the voila-gallery/gallery repository.

Development

See CONTRIBUTING.md to know how to contribute and set up a development environment.

Related projects

Voilà depends on nbconvert and jupyter_server.

License

We use a shared copyright model that enables all contributors to maintain the copyright on their contributions.

This software is licensed under the BSD-3-Clause license. See the LICENSE file for details.