Jupyter Graffiti

Create interactive screencasts inside Jupyter Notebook that anybody can play back.

Ever wanted to offer someone a hands-on "live" demo in Jupyter Notebook? Using Graffiti you can add floating tips along with optional recorded movies anywhere in your Notebooks. Demonstrate whatever you want, highlight what's important-- all narrated by you! Since the movie plays back in and on the Notebook, the viewer can pause any time, dive into your code and try things out exactly as you had them when you were recording, and then resume play.

Is this project up to date?

Yes, Graffiti is maintained and kept up to date by its author. Please file issues as you see them or submit PRs. It's most recently been updated for security and to eliminate lodash dependencies, on January 2, 2023.

** Update 1/11/2024: Graffiti has been upgraded to run in Jupyter Notebooks V7, but in "classic" mode. You will have to run your notebooks in Classic mode to use Graffiti until it gets completely rewritten for JupyterLab. I am not intending to make that update unless I hear back from the community that it's desired. **

Try Graffiti Out! Try These Live Demos:

• <a href="https://mybinder.org/v2/gh/willkessler/jupytergraffiti/master?urlpath=/tree/samples%2Fgeneral%2FGraffiti%20Basic%20Demo.ipynb">General Demo</a>
• <a href="https://mybinder.org/v2/gh/willkessler/jupytergraffiti/master?urlpath=/tree/samples%2Fudacity%2Fc%2B%2B_nanodegree%2FFor%20Loops.ipynb">Udacity C++ Nanodegree Example: "For Loops"</a>
• <a href="https://mybinder.org/v2/gh/willkessler/jupytergraffiti/master?urlpath=/tree/samples%2Fudacity%2Fc%2B%2B_nanodegree%2FPointers.ipynb">Udacity C++ Nanodegree Example: "Pointers"</a>
• <a href="https://mybinder.org/v2/gh/willkessler/jupytergraffiti/master?urlpath=/tree/samples%2Fudacity%2Fdata_structures_nanodegree%2FImplement%20a%20stack%20using%20an%20array.ipynb">Udacity Data Structures and Algorithms Nanodegree Example: "Implementing a Stack using an Array"</a>

Please wait about 30 seconds for the demonstration to spin up at mybinder.org. (Thanks to the folks at MyBinder for this awesome service).

Or, Watch Regular Recorded Video Demos:

• <a target="_blank" href="https://youtu.be/3hGD0PiPuhI">Gentle Introduction To Graffiti</a> (Start here)
• <a target="_blank" href="https://www.youtube.com/watch?v=8gDmr5MiIVA">How to make Graffiti movies.</a>
• <a target="_blank" href="https://www.youtube.com/watch?v=Mwh5rCRXar4">How to make a Graffiti tooltip in code</a>
• <a target="_blank" href="https://www.youtube.com/watch?v=PUD-Juu0ZQE&t=9s">Using Graffiti extras like in-line terminals and auto-saving code cells.</a>
• <a target="_blank" href="https://www.youtube.com/watch?v=hjU0gmis078">Adding a recording to a Show/Hide solution button.</a>
• <a target="_blank" href="https://www.youtube.com/watch?v=3Zu2Wu44N_I&t=1s">How Graffiti in-line shells are recorded into movies.</a>
• <a target="_blank" href="https://www.youtube.com/watch?v=vBNHcqJCW-Q">Accessing and using the Graffiti API</a>

What exactly can you record in the Graffiti?

• Recorded audio (e.g. voice narration), captured with your laptop's microphone while making your recording
• Mouse movement and scrolling in the Notebook
• Selecting and editing inside code cells
• The output of any code cell executions
• Inlined terminals (shells) whose activities you can also record.
• You can also draw and highlight over sections you think are important, or create handwritten notes.
• Support for the <a href="https://github.com/QuantStack/xeus-cling">C++ kernel</a> and the <a href="https://github.com/IRkernel/IRkernel">R kernel</a> are included in addition to the Python kernel.

But, does this extension work in Jupyter Lab?

No, it only works in Jupyter Notebook classic. It would be quite complex to port to Lab as it has an entirely different internal API. However, if anybody in the community wants to see a port and collaborate, please reach out.

Learn More On Using Graffiti:

• <a target="_blank" href="https://drive.google.com/file/d/1eEga9NJ4ak8RZh28co4CZRck-4TrdjsE/view">How to make Graffiti movies</a>
• <a target="_blank" href="https://drive.google.com/file/d/1VP5U8xOYsS9rRM4-nc7IjKiLkubBu5Q3/view">How to make a Graffiti tooltip in code</a>
• <a target="_blank" href="https://drive.google.com/file/d/1y3bXMF5nvUYP9E67SATotRw8m_TRjg4O/view">Accessing and using the Graffiti API</a>
• <a target="_blank" href="https://drive.google.com/file/d/1i6QuWlHfLNu62d0l1CIteiP-1yNqaHuY/view">Using Graffiti extras like in-line terminals and auto-saving code cells</a>
• <a target="_blank" href="https://drive.google.com/file/d/1N2gyzCN14b1vTwZBxNjsgNhZklku-qq4/view">Adding a recording to a Show/Hide solution button</a>
• <a target="_blank" href="https://drive.google.com/file/d/1ROb1dCp-w4Js0P77-YcqRWHf0Y0hh0c8/view">How Graffiti in-line shells are recorded into movies</a>

You can also visit the <a href="user_manual/UserManual.ipynb">User Manual<a> for more detailed instructions on how to use Graffiti.

Advantages of Graffiti Over Traditional Screencasts

• You can save any number of Graffitis in a Notebook.
• You don't need any special software or hardware (other than this library and Chrome/Firefox) to create and save Graffitis.
• Viewers can pause recorded playback any time, scrub forward and backward, and interact with the Notebook during playback at any point. No need to watch a whole recorded screencast first, and then switch context to a Notebook; students can explore right along with you in the same environment you recorded in. When you pause playback, you're still in a live Notebook, so you can play around.
• Jupyter Graffiti is easy to set up: either use the Python library or build the Docker image with the included Jupyter extension. (At Udacity, Jupyter Notebook Workspaces use the extension. See below how to install it). Or, you can skip installation entirely (see below).
• All data, including audio, is stored in compressed plain text in a directory separate from your Notebook files, for easy portability and storage in any version control system e.g. git/github.
• Unlike streamed video, you don't need a video server or hosted YouTube videos, and you can watch the videos even without an internet connection or over narrow bandwidth, because the files are very small.

Using Graffiti with ZERO installation

You can skip installation entirely if you want, by using the Binder demo link above. Just upload whatever Notebook you want to add Graffiti to the demo Jupyter Notebook server, activate Graffiti (see below), make some recordings, and then download the jupytergraffiti_data folder along with your Graffiti-ized Notebook from the binder Notebook server. To make this easier, we've installed nbzip into the Binder demo server. Just go to the server's tree, visit the jupytergraffiti_data folder and click the folder download link. For more details on how this works you can refer to <a href="https://github.com/data-8/nbzip">nbzip's</a> documentation.

You can then commit the jupytergraffiti_data folder and your Notebook to your own github repo and set up a link to it on Binder to share your Graffiti without requiring that the recipient have Graffiti installed.

Graffiti Software Installation-- Putting Graffiti onto your own System(s)

Uploading and downloading to/from Binder isn't optimal of course; it's probably better to get Graffiti going on your own computers.

There are four ways to install Jupyter Graffiti: using pip or conda, using a Python library, using a Docker image, or installing a plugin into your Jupyter Notebook server.

Installation Option #1: Use pip or conda (Easiest Option)

Just do:

pip install jupytergraffiti

or

conda install -c willkessler jupytergraffiti

This assumes you have pip or pip3, or conda as well as Jupyter Notebook, already installed.

PLEASE NOTE: Due to changes in Jupyter, the inline terminals will not work with any version of Jupyter less than 6.1.6. Please run: conda update --prefix ~/anaconda3 anaconda and conda upgrade jupyter to ensure that you have the latest version, which at the time of the last update to this README is v6.2.0.

Installation Option #2: Run Jupyter Notebook with a Docker Image Containing Graffiti (Slightly More Complex Option)

Make sure to install Docker on your system first (unless you've already installed it).

Then enter this command in a terminal on your computer:

./jupytergraffiti/build_and_run.sh

This will build and start up a Docker container running the Jupyter Server and the Jupyter Graffiti extension, with the container's home directory being mounted where your Jupyter Notebook(s) are located, and serving Notebooks over port 8888.

The advantage of using the Docker container is that Jupyter Graffiti is always loaded automatically, so you don't have to execute import jupytergraffiti in the Notebook just to play back Graffitis (but you will need to run it to access the Graffiti API).

using the Docker container also ensures you're running a recent version of Jupyter Not