Introducing the “Side-by-Side Colab” Chrome Extension: a better display for Google Colab code outputs

image generated with OpenAI’s DALL-E

Google Colab has become a cornerstone in the world of data science, machine learning, and many other fields that rely on Python programming. Its ease of use, free access to GPUs, and collaborative features make it a go-to platform for many. However, despite its many benefits, there’s been a persistent challenge: the default layout for code output. Typically, outputs in Google Colab are displayed below the code cells, which can be inconvenient, especially in notebooks with extensive output or when you want to compare the output directly with the code.

This is where the “Side-by-Side Colab” Chrome Extension comes into play! I’ve developed this extension to enhance your Google Colab experience by displaying code outputs in a separate column, right alongside the code cells. This layout change makes it easier to read and compare your code and its output, streamlining the coding process and reducing the need for constant scrolling.

What Does the Extension Do?

The “Side-by-Side Colab” extension reorganizes the Google Colab interface, placing the output of each code cell in a column directly next to the cell itself. This layout provides a more intuitive and efficient way to view both your code and its results simultaneously (as shown below).

How to Install and Use the Extension

1. Download the Necessary Files: Visit the GitHub repository at Side-by-Side Colab and download the three files present there — a CSS file, a JavaScript file, and a JSON file.
2. Prepare the Files: Place these downloaded files into a directory on your system. Remember the location, as you’ll need it in the following steps.
3. Open Chrome Extensions: Launch Google Chrome, navigate to Settings, and then go to the Extensions section.
4. Enable Developer Mode: At the top right corner of the Extensions page, you’ll find a toggle to enable Developer Mode. Turn this on.
5. Load the Extension: Click on the ‘Load unpacked’ button, then select and upload the directory where you placed the downloaded files.
6. Restart Google Colab: Finally, reopen Google Colab, and you’ll see the changes take effect.

I invite you to install and use the “Side-by-Side Colab” Chrome Extension. Your feedback and contributions are invaluable in making this tool better for everyone. Feel free to star, fork, or contribute to the repository.