Show HN: Collaborative Jupyter Whiteboards

4 points

4 years ago

I found a common occurrence in data science type of meetings is someone screen-shares their Jupyter notebook either by Zoom, Hangouts, or conference room display and then starts scrolling through it explaining their tables, plots, markdown, Latex, etc. When I want to ask a question about a plot that the presenter scrolled past, there's a lot of "can you scroll up a little, no too far, back down a little". If I want to point to an area of a plot or column in a table, I can do it in Zoom, but it's all out of place once the notebook is scrolled. Usually someone has to ask the presenter to zoom in to see some tiny Matplotlib font.

This led me to start looking into multiplayer versions of Jupyter that strive to be like Google Docs. There's proprietary ones like CoCalc and DeepNote, then there's open-source work underway to add real time collaboration to JupyterLab using Yjs. All of these are geared towards collaborative editing of the notebook code, but I really needed and saw a use for was collaborative viewing of the results contained in the notebook. Since notebooks usually have access to lots of valuable data, IT can be prickly about opening up the network so that others can access one of these types of notebook instances for collaborative editing. I wanted to quickly take my notebook running locally or firewalled behind some corporate network and turn it into a shareable URL with a whiteboarding canvas that people could interact with.

What I came up with uses nbconvert to render the notebook to HTML, tldraw overlaid on top of the HTML to provide whiteboarding, and Yjs to handle synchronizing state between meeting participants. Tldraw lets everyone add freehand drawings, text, and sticky notes. You can point to things, draw, and create diagrams right on the notebook content that's being discussing instead of creating a separate blank whiteboard from Zoom, Miro, FigJam, or whatever. To turn a notebook into a whiteboard, you can add it through the site or better yet use the JupyterLab extension for one click conversion.

Each participants scroll position is added to their Yjs awareness, then a shared map keeps track of who is the scroll leader. If I want to ask my question about that plot you scrolled past, I click to become the scroll leader and then everone else has their scroll position sync with mine. If the presenter showed a plot that I didn't have enough time to parse, I can break away from syncing their scroll position and go back to review it.

Nbconvert renders everything exactly as it looks in your notebook app into a read-only HTML version and is what GitHub uses for notebooks. Interactive plots from Bokeh, Holoviews, etc can still work if you trust the JS, and since editing notebooks while showing them during a meeting usually doesn't go well, read-only is probably good enough (eager to hear feedback on this point though). The nice thing is that nbconvert works with any ipynb file, so this approach is compatible with notebooks created in JupyterLab, VSCode, Colab, SageMaker, CoCalc, or DeepNote. Like nbviewer.org, I don't store any ipynb notebook files. The rendered HTML is cached (like they do) so that nbconvert doesn't have to run each time a participant joins a room.

Tldraw was on the front page here a few months back and has a great design that lets you use whatever CRDT you want. For the CRDT I used Yjs since I was familiar with it from working on RTC in JupyterLab.

You can try it out the core functionality without creating an account by checking out at one of the public notebooks at https://jupyterspot.com. For example, there's a notebook showing what Stable Diffusion thinks a collaborative Jupyter whiteboarding app looks like here: https://jupyterspot.com/notebook?id=3de4ed2c-e20d-4096-b34f-...

Also, sponsor these folks who made it possible on GitHub: https://github.com/sponsors/steveruizok https://github.com/sponsors/dmonad