wigglystuff

The wigglystuff library provides a wide range of AnyWidgets categorized by their functional purpose. Developers can choose widgets based on the following interaction patterns:

• Sliders and scalar inputs: For controlling single or coupled numeric parameters (e.g., Slider2D, Knob, Fader, Matrix, ColorPicker).
• Curves: For editing or drawing mathematical curves (e.g., BezierCurve, SplineDraw).
• Charts and plots: For visualizing data using established libraries (e.g., AltairWidget, ObservablePlot, RidgelineChart).
• Selecting on top of charts: For adding interactive selection layers (box, lasso, or puck) over existing charts (e.g., ChartPuck, ChartSelect).
• Hierarchies and tables: For exploring structured data (e.g., Treemap, NestedTable, ModuleTreeWidget).
• Graphs and diagrams: For visualizing relationships and networks (e.g., GraphWidget, WidgetDAG, Neo4jWidget).
• Drawing surfaces: For freehand or grid-based sketching (e.g., Paint, Excalidraw).
• 3D: For spatial data visualization (e.g., ThreeWidget).
• Device and browser input: For capturing hardware or browser-level events (e.g., GamepadWidget, WebcamCapture, WebkitSpeechToTextWidget).
• Live output and tracing: For real-time feedback and debugging (e.g., ProgressBar, AsyncFlow, LiveEdit).
• Images: For specialized image interactions (e.g., HoverZoom).

The wigglystuff library provides a wide variety of interactive widgets designed for use in notebooks (specifically optimized for marimo). The widget gallery showcases different types of interactive components, ranging from data visualization tools to UI controls.

Each widget in the gallery typically provides links to:

• A live, interactive demo on molab where you can edit the notebook directly in your browser.
• The API reference for that specific widget.
• The MD (Markdown) documentation for detailed usage.

Available widget categories include:

• Data Visualization: BezierCurve, GraphWidget, HeatmapSelect, ParallelCoordinates, RidgelineChart, ScatterWidget, Treemap, ObservablePlot.
• UI Controls: Slider2D, ColorPicker, SortableList, Knob, Fader, CircularSlider, ProgressBar.
• Drawing & Editing: Paint, EdgeDraw, GridDraw, SplineDraw, AnnotationWidget.
• Specialized Utilities: Excalidraw, WebcamCapture, SpeechToText, CopyToClipboard, ManimWeb.

The BezierCurve widget is an arbitrary-degree Bezier editor that allows you to drag control points to shape a curve. It provides real-time feedback through several synced traitlets:

• Control Points: Managed via the points traitlet, which accepts a list of dictionaries in the format {"x": float, "y": float}.
• Sampling: The samples traitlet streams a list of n_samples evenly spaced points along the curve back to Python.
• Animation/Playback: By setting playing to True, the widget sweeps the parameter t from 0 to 1. You can animate downstream components by watching the x and y traitlets, which represent the current Bezier point coordinates at the current t.
• Looping: Use loop to determine if playback should wrap from t=1 back to t=0.

For related tools, see CurveEditor for D3 line interpolators, SplineDraw for fitting splines to points, or Slider2D for single point manipulation.

# Conceptual usage pattern
from wigglystuff.bezier_curve import BezierCurve

# Initialize with control points and bounds
bc = BezierCurve(
    points=[{"x": 0, "y": 0}, {"x": 5, "y": 10}, {"x": 10, "y": 0}],
    x_bounds=(0, 10),
    y_bounds=(0, 10),
    n_samples=50
)

# bc.samples will now stream 50 points along the curve to Python
# bc.playing = True will animate the x and y coordinates

The EsmWidget serves as an escape hatch for running custom JavaScript ES modules directly within a Jupyter or marimo notebook. You provide a JavaScript module that follows the pattern export default { render }.

Because the code is loaded as a real ES module in the browser, you can use top-level import statements to pull in libraries from any CDN (such as motion.dev, d3, three.js, or Observable Plot) with a single line of code.

A key feature of EsmWidget is the data traitlet. This is a JSON-able value that is synced two-way between Python and the browser. When the data value changes in Python, it triggers a change:data event in the browser without re-running the render function. This allows your JavaScript code to perform smooth transitions or tweens toward the new state instead of performing a hard redraw.

// Example of the required module structure
export default {
  render: (container, data) => {
    // Your rendering logic here
  }
}

The floating window is a separate document with its own window and document context, not a browser tab or iframe. This leads to several important behaviors:

Browser Support

• Supported: Chromium 116+ and Firefox 151+.
• Unsupported: Safari (the button will not be drawn and the widget stays inline).
• Limitations: A tab is allowed only one Pip window at a time. Opening a second Pip will close the first and restore its inline view. The request must come from a top-level page (it will not work if the notebook is inside an iframe).

Event Handling

Events and styles are scoped to the window they occur in:

• Pointer Events: If a widget relies on listening to the window object to track movement (e.g., for dragging), it will stop working while floating because it is listening to the notebook's window, not the floating window.
• Self-contained Widgets: Widgets that capture pointer events on their own element (e.g., GridDraw, CurveEditor, BezierCurve, HoverSlider, ThreeWidget) will continue to work while floating.
• Broken Dragging: Widgets that listen to the window (e.g., Knob, Fader, Matrix, TangleSlider, Slider2D, CircularSlider) will stop responding to drags while floating.
• Input: Widgets driven by clicks, buttons, or text entry work in both contexts.

Styling

• A widget's own stylesheet is automatically mounted into the floating window.
• Pip explicitly copies the notebook's light/dark mode class to the floating document to keep themes in sync.
• Warning: The floating window does not inherit the notebook's CSS. If a widget relies on notebook-specific CSS variables or classes (rather than its own internal styles), it will appear unstyled while floating.