JavaScript & Extensions

Browser-side components and notebook extensions for Bridget

JavaScript Modules

Bridget includes browser-side JavaScript modules that handle:

  • Communication: Bridge protocol between Python and browser
  • Import transformation: Converting ES6 imports to dynamic imports
  • HTMX integration: Python-callable wrappers for HTMX API
  • State management: Notebook state tracking and synchronization
  • Logging: Unified logging across JS and Python

These modules are automatically bundled and loaded by the Bridge system.

For maintainers: See nbs/js/README.md for detailed module documentation.

For users: These work automatically - no direct interaction needed.

Notebook Extensions

Bridget requires companion extensions to access notebook state (cells, outputs, execution order). The kernel alone doesn’t have this information.

VSCode/Cursor Extension

Package: nbinspect-vscode
Installation: Install .vsix file via Extensions view
Documentation: packages/nbinspect-vscode/README.md

Monitors notebook events in VSCode/Cursor and exposes state via window.$Nb API.

JupyterLab Extension

Package: nbinspect-lab
Installation: Installed automatically with Bridget
Documentation: packages/nbinspect-lab/README.md

Works with JupyterLab 4+ and Jupyter Notebook 7+.

Extension Overview

For maintainers: See packages/README.md for architecture details.

For users: Extensions work automatically once installed.

Architecture

┌─────────────────────┐
│  Notebook UI        │
│  (VSCode/Lab)       │
└──────────┬──────────┘
           │ monitors
           ↓
┌─────────────────────┐
│  Extension          │
│  (nbinspect-*)      │
└──────────┬──────────┘
           │ exposes window.$Nb
           ↓
┌─────────────────────┐
│  JavaScript Modules │
│  (bridge.js, etc)   │
└──────────┬──────────┘
           │ Comm protocol
           ↓
┌─────────────────────┐
│  Python Kernel      │
│  (Bridget)          │
└─────────────────────┘

This architecture enables: - Real-time notebook state access from Python - Unified logging across JS and Python
- HTMX operations from Python code - Dynamic cell output updates