🪐 🌐 Jupyter Embed

This page demonstrates how to embed Jupyter components into any web page using @datalayer/jupyter-embed.

Simply include the jupyter-embed.lazy.js javascript and add HTML elements with the appropriate data attributes. The examples below showcase various embedding options like cell, notebook and output display and can be executed in live.

Made with ❤️ by Datalayer - Part of the Jupyter UI repository (MIT License).

🔢 Code Cell

Basic Python Cell

An interactive code cell that can execute Python code.


# Calculate the first 100 Fibonacci numbers
def fibonacci(n):
    fib = [0, 1]
    for i in range(2, n):
        fib.append(fib[i-1] + fib[i-2])
    return fib[:n]

print(fibonacci(100))

<div 
  data-jupyter-embed
  data-jupyter-embed="cell"
  data-jupyter-height="200px"
  data-jupyter-auto-execute="true"
>
  <code data-jupyter-source-code>
# Calculate the first 100 Fibonacci numbers
def fibonacci(n):
    fib = [0, 1]
    for i in range(2, n):
        fib.append(fib[i-1] + fib[i-2])
    return fib[:n]

print(fibonacci(100))
  </code>
</div>

Auto-executing Cell

A cell that automatically executes when loaded.


import sys
print(f"Python version: {sys.version}")

Markdown Cell

A markdown cell for rich text content.


  # Welcome to Jupyter Embed!
  
  This is a **markdown** cell with:
  
  - Rich formatting
  - Lists
  - And more!
  
  > 👉 Double-click me to edit.

📤 Output Display

Live Python Execution

Execute Python code and display the output. This example creates a 3D surface plot with matplotlib.


import numpy as np
import matplotlib.pyplot as plt

# Create data
x = np.linspace(-5, 5, 50)
y = np.linspace(-5, 5, 50)
X, Y = np.meshgrid(x, y)
Z = np.sin(np.sqrt(X**2 + Y**2))

# Create 3D plot
fig = plt.figure(figsize=(8, 6))
ax = fig.add_subplot(111, projection='3d')
surf = ax.plot_surface(X, Y, Z, cmap='viridis', alpha=0.8)
ax.set_xlabel('X axis')
ax.set_ylabel('Y axis')
ax.set_zlabel('Z axis')
ax.set_title('3D Surface: sin(√(x² + y²))')
fig.colorbar(surf)
plt.show()

<div 
  data-jupyter-embed="output"
  data-jupyter-height="200px"
  data-jupyter-auto-run="true"
>
  <code data-jupyter-source-code>
import numpy as np
import matplotlib.pyplot as plt

# Create data
x = np.linspace(-5, 5, 50)
y = np.linspace(-5, 5, 50)
X, Y = np.meshgrid(x, y)
Z = np.sin(np.sqrt(X**2 + Y**2))

# Create 3D plot
fig = plt.figure(figsize=(8, 6))
ax = fig.add_subplot(111, projection='3d')
surf = ax.plot_surface(X, Y, Z, cmap='viridis', alpha=0.8)
ax.set_xlabel('X axis')
ax.set_ylabel('Y axis')
ax.set_zlabel('Z axis')
ax.set_title('3D Surface: sin(√(x² + y²))')
fig.colorbar(surf)
plt.show()
  </code>
</div>

Static Pre-computed Output

Display pre-rendered output without executing code. Useful for showing results without a kernel.

💻 Terminal

Interactive Terminal

A full terminal session connected to the Jupyter server.

<div 
  data-jupyter-embed
  data-jupyter-embed="terminal"
  data-jupyter-height="300px"
  data-jupyter-color-mode="dark"
></div>

📓 Notebook

Notebook from Path

Load a notebook from the Jupyter server by path.

<div 
  data-jupyter-embed
  data-jupyter-embed="notebook"
  data-jupyter-path="test.ipynb"
  data-jupyter-height="300px"
  data-jupyter-show-toolbar="true"
></div>

Inline Notebook

Embed a notebook with inline content.

Notebook Viewer (Read-only)

Display a notebook in read-only mode without editing capabilities.

<div data-jupyter-embed="viewer" data-jupyter-height="400px">
  <script type="application/json">
    {
      "cells": [
        {
          "cell_type": "markdown",
          "source": ["# My Notebook"]
        },
        {
          "cell_type": "code",
          "source": ["print('Hello!')"]
        }
      ],
      "metadata": {},
      "nbformat": 4,
      "nbformat_minor": 4
    }
  </script>
</div>

🚧 Console

⚙️ Configuration

Global Configuration

Configure the Jupyter server connection via a script tag or data attributes.

<!-- Option 1: Data attributes on the script tag -->
<script 
  src="jupyter-embed.lazy.js"
  data-jupyter-server-url="https://oss.datalayer.run/api/jupyter-server"
  data-jupyter-token="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
  data-jupyter-auto-start-kernel="true"
></script>

<!-- Option 2: JSON configuration -->
<script type="application/json" data-jupyter-embed-config>
{
  "serverUrl": "https://oss.datalayer.run/api/jupyter-server",
  "token": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
  "defaultKernel": "python3",
  "lazyLoad": true,
  "theme": "light"
}
</script>

🔌 Programmatic API

JavaScript API

Use the JavaScript API for advanced control.

// Configure the connection
JupyterEmbed.configureJupyterEmbed({
  serverUrl: 'https://oss.datalayer.run/api/jupyter-server',
  token: '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6',
  defaultKernel: 'python3',
  lazyLoad: true
});

// Manually initialize embeds
JupyterEmbed.initJupyterEmbeds();

// Initialize embeds added after page load (e.g., in SPA)
JupyterEmbed.initAddedJupyterEmbeds(container);

// Render a component programmatically
const element = document.getElementById('my-cell');
JupyterEmbed.renderEmbed(element, {
  type: 'cell',
  source: 'print("Hello!")',
  autoExecute: true
});

// Clean up
JupyterEmbed.destroyJupyterEmbeds();