🧪 Cell Component

This component displays a Jupyter Cell.

With a Jupyter server

function CellExample() {
  const { defaultKernel } = useJupyter({
    jupyterServerUrl: "https://oss.datalayer.run/api/jupyter-server",
    jupyterServerToken: "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
    startDefaultKernel: true,
  });

  return (
    <JupyterReactTheme>
      {defaultKernel && <Cell kernel={defaultKernel} />}
    </JupyterReactTheme>
  );
}

Live Editor

<Cell
  source={`import sys
print(f"{sys.platform=}")

import numpy as np
import matplotlib.pyplot as plt
x1 = np.linspace(0.0, 5.0)
x2 = np.linspace(0.0, 2.0)
y1 = np.cos(2 * np.pi * x1) * np.exp(-x1)
y2 = np.cos(2 * np.pi * x2)
fig, (ax1, ax2) = plt.subplots(2, 1)
fig.suptitle('A tale of 2 subplots')
ax1.plot(x1, y1, 'o-')
ax1.set_ylabel('Damped oscillation')
ax2.plot(x2, y2, '.-')
ax2.set_xlabel('time (s)')
ax2.set_ylabel('Undamped')
plt.show()
`}
/>

Result

Loading...

With in-browser Kernel

You can use an in-browser kernel by setting the lite property in useJupyter hook:

function CellLiteExample() {
  const { defaultKernel } = useJupyter({
    lite: true,
    startDefaultKernel: true,
  });

  return (
    <JupyterReactTheme>
      {defaultKernel && (
        <Cell
          kernel={defaultKernel}
          source={`import sys
print(f"{sys.platform=")}

#...`}
        />
      )}
    </JupyterReactTheme>
  );
}