Jupyter Notebook - A web-based notebook environment for interactive computing
—
The frontend plugin system provides JupyterLab extensions that enhance the notebook interface with notebook-specific functionality. These TypeScript/JavaScript plugins integrate with the JupyterLab frontend architecture to provide features like checkpoint indicators, kernel status, output scrolling, and UI enhancements.
The frontend application framework provides the main application class and shell interface for the notebook frontend.
class NotebookApp extends JupyterFrontEnd<INotebookShell> {
/**
* Main frontend application class for Jupyter Notebook.
*
* Extends JupyterFrontEnd to provide notebook-specific functionality
* while maintaining compatibility with the JupyterLab ecosystem.
*/
constructor(options?: NotebookApp.IOptions);
readonly name: string = 'Jupyter Notebook';
readonly namespace: string;
readonly version: string;
readonly restored: Promise<void>;
get info(): JupyterLab.IInfo;
get paths(): JupyterFrontEnd.IPaths;
registerPluginModule(mod: NotebookApp.IPluginModule): void;
registerPluginModules(mods: NotebookApp.IPluginModule[]): void;
}
interface INotebookShell {
/**
* Shell interface for notebook application.
*
* Defines the structure and behavior of the notebook UI shell,
* managing layout, widgets, and user interface components.
*/
}
class NotebookShell implements INotebookShell {
/**
* Default shell implementation for notebook interface.
*
* Provides the concrete implementation of the notebook shell
* with specific layout and widget management for notebooks.
*/
}Interface and services for opening files and managing navigation within the notebook application.
interface INotebookPathOpener {
/**
* Service for opening paths in the notebook application.
*
* Provides functionality to open files, directories, and notebooks
* with customizable options for window targeting and parameters.
*/
open(options: INotebookPathOpener.IOpenOptions): WindowProxy | null;
}
namespace INotebookPathOpener {
interface IOpenOptions {
/**
* Options for opening paths in the application.
*/
prefix: string; // URL prefix including base URL
path?: string; // Path to open (e.g., 'setup.py', 'notebooks/example.ipynb')
searchParams?: URLSearchParams; // Extra search parameters for URL
target?: string; // Browsing context name for window.open
features?: string; // Features parameter for window.open
}
}
const INotebookPathOpener: Token<INotebookPathOpener>;
/**
* Dependency injection token for path opener service.
*
* Used to register and inject the path opener service throughout
* the application for consistent file and directory opening behavior.
*/The main collection of JupyterLab plugins that provide notebook-specific functionality.
const plugins: JupyterFrontEndPlugin<any>[];
/**
* Array of all notebook-specific frontend plugins.
*
* This default export contains all the plugins that should be
* registered with the JupyterLab application to provide full
* notebook functionality.
*/Main lab extension plugins that provide notebook-specific functionality in JupyterLab.
// Interface Switcher Plugin
const interfaceSwitcher: JupyterFrontEndPlugin<void>;
/**
* Plugin to add custom toolbar items to the notebook page.
*
* Provides interface switching functionality between Notebook, JupyterLab,
* and NbClassic when available. Adds commands and toolbar buttons for
* opening current notebook in different interfaces.
*/
// Launch Tree Plugin
const launchNotebookTree: JupyterFrontEndPlugin<void>;
/**
* Plugin to add a command to open the Jupyter Notebook Tree.
*
* Adds a command to launch the file browser in a new tab,
* providing navigation from notebook to file browser interface.
*/namespace CommandIDs {
const launchNotebookTree: string; // 'jupyter-notebook:launch-tree'
const openNotebook: string; // 'jupyter-notebook:open-notebook'
const openLab: string; // 'jupyter-notebook:open-lab'
const openNbClassic: string; // 'jupyter-notebook:open-nbclassic'
}interface ISwitcherChoice {
command: string;
commandLabel: string;
commandDescription: string;
buttonLabel: string;
urlPrefix: string;
}// Plugins are typically registered by importing and adding to JupyterLab
import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application';
import plugins from '@jupyter-notebook/notebook-extension';
// Register all notebook plugins
const app = new JupyterFrontEnd();
plugins.forEach(plugin => {
app.registerPlugin(plugin);
});// Plugins integrate with JupyterLab's command system
const app: JupyterFrontEnd = /* ... */;
// Commands added by plugins are accessible through the app
await app.commands.execute('notebook:toggle-full-width');
await app.commands.execute('notebook:close-and-halt');
await app.commands.execute('notebook:open-tree-tab');
await app.commands.execute('notebook:edit-metadata');// Plugins declare dependencies on JupyterLab services
const examplePlugin: JupyterFrontEndPlugin<void> = {
id: 'example-plugin',
autoStart: true,
requires: [INotebookTracker, ITranslator],
optional: [ICommandPalette, ISettingRegistry],
activate: (
app: JupyterFrontEnd,
tracker: INotebookTracker,
translator: ITranslator,
palette?: ICommandPalette,
settings?: ISettingRegistry
) => {
// Plugin implementation using injected services
}
};import { INotebookPathOpener } from '@jupyter-notebook/application';
// Inject the path opener service
class MyWidget extends Widget {
constructor(private pathOpener: INotebookPathOpener) {
super();
}
openNotebook(path: string) {
// Open a notebook in a new tab
this.pathOpener.open({
prefix: '/notebooks',
path: path,
target: '_blank'
});
}
openDirectory(path: string) {
// Open file browser for a directory
this.pathOpener.open({
prefix: '/tree',
path: path,
searchParams: new URLSearchParams({ view: 'tree' })
});
}
}import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application';
import { INotebookShell } from '@jupyter-notebook/application';
const customPlugin: JupyterFrontEndPlugin<void> = {
id: 'my-custom-notebook-plugin',
description: 'Custom notebook functionality',
autoStart: true,
requires: [INotebookShell],
activate: (app: JupyterFrontEnd, shell: INotebookShell) => {
console.log('Custom notebook plugin loaded');
// Add custom functionality
app.commands.addCommand('custom:my-command', {
label: 'My Custom Command',
execute: () => {
console.log('Custom command executed');
}
});
// React to shell changes
shell.currentChanged.connect(() => {
console.log('Current widget changed');
});
}
};
export default customPlugin;// Access services provided by notebook plugins
import { JupyterFrontEnd } from '@jupyterlab/application';
import { INotebookTracker } from '@jupyterlab/notebook';
class NotebookManager {
constructor(private app: JupyterFrontEnd) {}
getCurrentNotebook() {
// Access the current notebook through the tracker
const tracker = this.app.serviceManager.get('notebook-tracker') as INotebookTracker;
return tracker.currentWidget;
}
async executeCommand(command: string) {
// Execute notebook-specific commands
return await this.app.commands.execute(command);
}
isFullWidth(): boolean {
// Check if full-width mode is enabled
return this.app.commands.isToggled('notebook:toggle-full-width');
}
}Install with Tessl CLI
npx tessl i tessl/pypi-notebook