Skip to main content

🪐 ⚛️ Components

Jupyter UI provides a comprehensive set of React.js components for building interactive data applications. As a React.js developer, you just write a few lines of code to get a live notebook, cell, terminal, or any Jupyter component in your application.

Packages Overview​

Jupyter UI is organized into several packages:

PackageDescriptionnpm
@datalayer/jupyter-reactCore React components for Jupyternpm
@datalayer/jupyter-lexicalRich document editor with executable Jupyter cellsnpm
@datalayer/jupyter-embedDrop-in embed script for any websitenpm

@datalayer/jupyter-react Components​

The main package provides the following components:

Core Components​

ComponentDescription
JupyterReactThemeTheme provider for Jupyter configuration and styling
CellSingle executable code or markdown cell
NotebookFull Jupyter notebook with all features
ConsoleInteractive REPL-style console
TerminalFull terminal emulator
OutputDisplay Jupyter outputs (text, images, HTML, etc.)

File & Navigation Components​

ComponentDescription
File BrowserBrowse and manage files on Jupyter server
File ManagerAdvanced file management interface
ViewerRead-only notebook viewer

Kernel Components​

ComponentDescription
KernelKernel management and status
Kernel SelectorSelect from available kernels
Kernel StatusDisplay kernel connection status
Kernel VariablesInspect kernel variables
Kernel LogsView kernel output logs

UI Components​

ComponentDescription
ButtonJupyter-styled buttons
JupyterLab AppFull JupyterLab as a React component
CommandsCommand palette integration
DialogModal dialogs
SettingsSettings editor
CodeMirrorCode editor component

Quick Example​

import { JupyterReactTheme, Cell, useJupyter } from '@datalayer/jupyter-react';

function App() {
  const { defaultKernel } = useJupyter({
    jupyterServerUrl: 'http://localhost:8888',
    jupyterServerToken: 'your-token',
    startDefaultKernel: true,
  });

  return (
    <JupyterReactTheme>
      {defaultKernel && (
        <Cell kernel={defaultKernel} source="print('Hello, Jupyter!')" />
      )}
    </JupyterReactTheme>
  );
}
Jupyter UI Notebook

Features​

note

The Jupyter UI components support:

  • State Management: Predefined Zustand actions for reactive state
  • Single React Tree: Components integrate into your application's React tree
  • IPyWidgets: Full support for interactive widgets
  • Collaboration: Real-time collaborative editing (RTC)
  • Theming: Works with Primer React, Material-UI, and custom themes
  • In-Browser Kernels: Pyodide and JupyterLite support
  • Authentication: Jupyter token-based authentication
  • Terminals: Full terminal emulator support