Skip to main content

To sketch high performing, interactive visualizations running in the browser and drawing inspiration from p5js

Project description

Panel Sketch Logo

✏ ️ Panel Sketch


The purpose of the panel-sketch package is to make it easy for Pythonistas to quickly sketch interactive visualizations and other applications running in

  • The browser - also without a Python backend
  • The Jupyter Notebook.
  • Your favorite editor or IDE.

It is heavily inspired by p5js, p5js sketches and pyp5js but not limited to the p5js universe.

You can also think of it as a Code Sandbox or JS Fiddle but for #Python 🐍.

Check out the panel-sketch examples on Binder

Jupyter Notebook Jupyter Labs Panel Apps
Binder Binder Binder

Panel Sketch Reference Example

It leverages Python to Javascript frameworks. Currently Pyodide and Transcrypt. But potentially also Brython or similar in the future.


The panel-sketch python package and repository is open source and free to use (MIT License).


With pip

pip install panel-sketch


from panel_sketch import Sketch

import panel as pn
args={"r": 10, "g": 200, "b": 40} # This will give us the color for our sketch
sketch_python = """

from pyp5js import *

t = 0

def setup():
    createCanvas(600, 600)
    fill(window.args.r, window.args.g, window.args.b)

def draw():
    global t
    background(10, 10)
    fill(window.args.r, window.args.g, window.args.b)

    xAngle = map(mouseX, 0, width, -4 * PI, 4 * PI, True)
    yAngle = map(mouseY, 0, height, -4 * PI, 4 * PI, True)
    for x in range(0, width, 30):
        for y in range(0, height, 30):

            angle = xAngle * (x / width) + yAngle * (y / height)

            myX = x + 20 * cos(2 * PI * t + angle)
            myY = y + 20 * sin(2 * TWO_PI * t + angle)

            ellipse(myX, myY, 10)

    t = t + 0.01
sketch = Sketch(object=sketch_python, template="pyp5js", compiler="pyodide", args=args)

Basic Example

Reference Guides

Sketch Reference Example



Gallery App


Additional Resources

You can find more inspiration via the links below.


When I get the time I would like to

  • Add basic template examples.
  • Enable using the content of notebook cells instead of a string to instantite Sketch.
  • Add more notebook examples
  • Enable easy import and export of sketches
  • Find out how I can serve the target js modules in notebook (Enable Transcrypt in Notebook).
  • Support alternatives to p5js like three.js
  • (re-)align with pyp5js
  • Add example app to
  • Support extensions to p5js like m5.js
  • Create youtube tutorial video
  • Add badges for 100% test coverage etc.
  • Distribute as conda package

Change Log

  • 20210410: First Release to PyPi.

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

panel-sketch-20210411.2.tar.gz (25.3 kB view hashes)

Uploaded source

Built Distribution

panel_sketch-20210411.2-py3-none-any.whl (31.7 kB view hashes)

Uploaded py3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page