block by 1wheel 7361276a2af10ca48ec9550c33bbdad5

Hot Reloading JS in Colab

Editing front-end code in colab is tricky - you can’t keep the code on the same screen as the output and you’re stuck typing in a giant text block:

This page shows how to set up a better, hot reloading dev environment. Code is edited locally, uploaded to a public server and polled for changes in the colab iframe.

First, add a python function for js to call and embed some HTML in the colab:

import IPython
from google.colab import output

def get_py_data(number):

output.register_callback('get_py_data', get_py_data)

HTML = '''
  <link rel='stylesheet' href=''>
  <script src=''></script>
  <div id='buttons'></div>
  <div id='graph'></div>

  <script>window.__hotReloadTimeoutMS = 250</script>
  <script src=''></script>

Next, run this command locally to watch for changes and upload them to the public server:

ls *.* | entr rsync -a "$PWD"

You could also directly edit the files on the server with vim or vscode.

In the colab iframe, watch-files.js checks for changes to every 250ms. If the file has changed, it is eval’d and your changes are immediately visible.

Future work

I think there’s a way to package this up as a python library that can run inside of colab. I just can’t figure out the right place to put code that:

SSH into colab might work (and could replacing polling with web sockets!) but that requires sending traffic through ngrok — not good for private data.

Other things that would be nice: