Skip to Content
NotebooksNotebook rendering

Notebook rendering

The <NotebookRenderer /> component reads a .ipynb file from public/ and renders it as a static, read-only Jupyter-style document. Code is highlighted with shiki , markdown cells are rendered with react-markdown, and outputs (stdout, dataframes, plots, errors) are shown inline.

Usage

content/my-page.mdx
import { NotebookRenderer } from '@/components/notebook/NotebookRenderer'
 
<NotebookRenderer src="/example.ipynb" />

Live example

Below is public/example.ipynb rendered with the component:

python/example.ipynb
In [2]
bash
pwd
'/workspace/workdisk3/rudhra/Desktop/experiments/deep_learning_practice/docs/docs/public'
In [1]
python
!pwd
/workspace/workdisk3/rudhra/Desktop/experiments/deep_learning_practice/docs/docs/public
In [1]
python
import numpy as np
import matplotlib.pyplot as plt

# Generate x values from 0 to 4π
x = np.linspace(0, 4 * np.pi, 1000)
y = np.sin(x)

# Plot
plt.figure(figsize=(10, 4))
plt.plot(x, y, color='royalblue', linewidth=2)
plt.title('Sine Wave')
plt.xlabel('x (radians)')
plt.ylabel('sin(x)')
plt.axhline(0, color='gray', linewidth=0.8, linestyle='--')  # zero line
plt.grid(True, alpha=0.3)
plt.tight_layout()
plt.show()
cell output
In [2]
python
import pandas as pd

# --- 1. Create a DataFrame from a dictionary ---
data = {
    'Name':   ['Alice', 'Bob', 'Charlie', 'Diana'],
    'Age':    [25, 30, 35, 28],
    'City':   ['New York', 'London', 'Paris', 'Toronto'],
    'Score':  [88.5, 92.0, 79.3, 95.1]
}

df = pd.DataFrame(data)
print(df)
      Name  Age      City  Score
0    Alice   25  New York   88.5
1      Bob   30    London   92.0
2  Charlie   35     Paris   79.3
3    Diana   28   Toronto   95.1
5MD

Making the Most of your Colab Subscription

6MD

Google Colab is available in VS Code!

Try the new Google Colab extension for Visual Studio Code. You can get up and running in just a few clicks:

  • In VS Code, open the Extensions view and search for 'Google Colab' to install.
  • Open the kernel selector by creating or opening any .ipynb notebook file in your local workspace and either running a cell or clicking the Select Kernel button in the top right.
  • Click Colab and then select your desired runtime, sign in with your Google account, and you're all set!

See more details in our announcement blog here.

7MD

Access Popular LLMs via Google-Colab-AI Without an API Key

8MD

Users with Colab's paid plans have free access to most popular LLMs via google-colab-ai Python library. For more details, refer to the getting started with google colab ai.

In [ ]
python
from google.colab import ai
response = ai.generate_text("What is the capital of France?")
print(response)
10MD

Faster GPUs

Users who have purchased one of Colab's paid plans have access to faster GPUs and more memory. You can upgrade your notebook's GPU settings in Runtime > Change runtime type in the menu to select from several accelerator options, subject to availability.

The free of charge version of Colab grants access to Nvidia's T4 GPUs subject to quota restrictions and availability.

You can see what GPU you've been assigned at any time by executing the following cell. If the execution result of running the code cell below is "Not connected to a GPU", you can change the runtime by going to Runtime > Change runtime type in the menu to enable a GPU accelerator, and then re-execute the code cell.

In [ ]
python
gpu_info = !nvidia-smi
gpu_info = '\n'.join(gpu_info)
if gpu_info.find('failed') >= 0:
  print('Not connected to a GPU')
else:
  print(gpu_info)
12MD

In order to use a GPU with your notebook, select the Runtime > Change runtime type menu, and then set the hardware accelerator to the desired option.

13MD

More memory

Users who have purchased one of Colab's paid plans have access to high-memory VMs when they are available. More powerful GPUs are always offered with high-memory VMs.

You can see how much memory you have available at any time by running the following code cell. If the execution result of running the code cell below is "Not using a high-RAM runtime", then you can enable a high-RAM runtime via Runtime > Change runtime type in the menu. Then select High-RAM in the Runtime shape toggle button. After, re-execute the code cell.

In [ ]
python
import psutil

ram_gb = psutil.virtual_memory().total / 1e9
print('Your runtime has {:.1f} gigabytes of available RAM\n'.format(ram_gb))

if ram_gb < 20:
  print('Not using a high-RAM runtime')
else:
  print('You are using a high-RAM runtime!')
15MD

Longer runtimes

All Colab runtimes are reset after some period of time (which is faster if the runtime isn't executing code). Colab Pro and Pro+ users have access to longer runtimes than those who use Colab free of charge.

Background execution

Colab Pro+ users have access to background execution, where notebooks will continue executing even after you've closed a browser tab. This is always enabled in Pro+ runtimes as long as you have compute units available.

16MD

Relaxing resource limits in Colab Pro

Your resources are not unlimited in Colab. To make the most of Colab, avoid using resources when you don't need them. For example, only use a GPU when required and close Colab tabs when finished.

If you encounter limitations, you can relax those limitations by purchasing more compute units via Pay As You Go. Anyone can purchase compute units via Pay As You Go; no subscription is required.

17MD

Send us feedback!

If you have any feedback for us, please let us know. The best way to send feedback is by using the Help > 'Send feedback...' menu. If you encounter usage limits in Colab Pro consider subscribing to Pro+.

If you encounter errors or other issues with billing (payments) for Colab Pro, Pro+, or Pay As You Go, please email colab-billing@google.com.

18MD

More Resources

Working with Notebooks in Colab

Working with Data

Machine Learning Crash Course

These are a few of the notebooks from Google's online Machine Learning course. See the full course website for more.

Using Accelerated Hardware

19MD

Machine Learning Examples

A few featured examples:

Supported outputs

  • stream — stdout and stderr text
  • execute_result / display_data for:
    • image/png and image/jpeg (base64)
    • image/svg+xml
    • text/html (e.g. pandas DataFrames)
    • application/json
    • text/plain fallback
  • error — ANSI codes are stripped from tracebacks

Notes

  • Static renderer — cells are never executed.
  • Light and dark color schemes are applied automatically via prefers-color-scheme.
Last updated on
HiglassArcs