livebook-dev/kino

Kino is an interactive widget library for Elixir Livebook that provides a comprehensive suite of components for data visualization, input handling, and media playback. It enables developers to embed rich, stateful JavaScript interfaces—such as data tables, debug pipelines, and Mermaid diagrams—directly into notebooks with bidirectional communication capabilities. The system supports programmatic control, dynamic credential injection, and custom rendering, serving as a modern replacement for the legacy LiveWidget library.

10 changes.

The project rebranded from LiveWidget to Kino, releasing a comprehensive suite of interactive notebook widgets and upgrading to Elixir 1.14 with Nx support. This period focused on establishing the core infrastructure and adding stateful JavaScript widget capabilities with bidirectional server-side event handling. Extensive test suites were implemented to cover the new components and the underlying JS live architecture.

10 changes.

This period focused on expanding the frontend component library with new features like a download button, programmatic audio controls, and a comprehensive debug UI for Kernel.dbg/2. The data table and tree components were upgraded with improved stability, new rendering engines, and consolidated bundling using React 18 and Tailwind CSS. Additionally, the test suite was strengthened with specialized modules for mocking Livebook interactions and supporting Livebook-specific test cases.

5 changes.

This period focused on modernizing the frontend infrastructure by consolidating asset bundling with Tailwind CSS and React 18, while introducing dynamic credential handling for remote execution. Significant feature additions included row actions for data tables, enhanced debug UIs with drag-and-drop capabilities, and improved Mermaid diagram support with captions and SVG downloads.

A new download button component has been added to the application. It renders a styled button with an icon and label, and triggers a client-side download when clicked by requesting content via a 'download' event and handling the 'download\_content' response to create a Blob and initiate the file save.

lib/assets/download · high confidence

The data table component now allows rows to have associated actions. When the data source includes the 'actions' feature, a new column with a three-dot menu button is rendered at the end of each row. Clicking this button opens a context menu displaying the available actions defined in the data payload, enabling users to perform specific operations on individual table rows.

_assets/packs/data\table · high confidence

This change introduces the Kino library as a new component of Livebook, providing a comprehensive suite of interactive widgets for notebooks. It includes core infrastructure such as the application supervisor, attribute store, and bridge for communication with the Livebook evaluator. Users gain access to a wide range of new capabilities, including interactive data tables (Kino.DataTable), ETS table viewers (Kino.ETS), and various input controls (Kino.Input) and UI elements (Kino.Control). The release also adds media support with Kino.Audio and Kino.Image, debugging enhancements via a custom Kernel.dbg/2 backend, and utilities for file downloads (Kino.Download) and HTML rendering (Kino.HTML).

lib/kino · high confidence

Users can now create interactive JavaScript widgets that maintain server-side state and communicate bidirectionally with the browser. This change adds the Kino.JS.Live module, which provides a GenServer-based backend for JavaScript kinos, enabling features like live content updates, custom event broadcasting, and binary payload support. A new data store process manages static output data and export results, allowing JavaScript outputs to be queried and exported reliably.

lib/kino/js · high confidence

Added new UI components (Kino.Debug.Default and Kino.Debug.Pipeline) to support the custom backend for Kernel.dbg/2. These modules implement Kino.JS.Live interfaces that render debug call information, manage item selection and enabling states, and handle re-evaluation of wrapped functions within the debug pipeline.

lib/kino/debug · high confidence

Added new React-based debug UI packs for both the default and pipeline contexts. The default pack provides a simple view of source code and call counts, while the pipeline pack introduces a sortable list of pipeline items with drag-and-drop reordering, enable/disable toggles, error handling, and a copy-to-clipboard feature for the active pipeline configuration.

_assets/packs/debug\_default, assets/packs/debug\pipeline · high confidence

The audio component in lib/assets/audio now supports programmatic control via 'play' and 'pause' events, allowing users to trigger playback and pausing actions directly rather than relying solely on native controls. This change introduces the main.js module for the audio asset, which initializes an audio element and registers event handlers for these specific commands.

lib/assets/audio · high confidence

The debug interface assets have been bundled to include React version 18.3.1 and a Tailwind CSS utility stylesheet. This update ensures the debug UI leverages the latest React features and consistent styling, with the JavaScript bundle containing the full React runtime and the CSS bundle providing base resets and utility classes for the debug view.

_lib/assets/debug\_default, lib/assets/debug\pipeline · high confidence

The data table component now renders with improved UI stability, including fixes for custom header titles, menu behavior when summaries are present, and correct page display. Users benefit from enhanced filtering and ordering support, row actions, and better handling of empty data states and column auto-widths. The underlying rendering engine has been updated to Glide Data Grid v6, and the build process now uses a single npm project with shared bundling for all assets.

_lib/assets/data\table · medium confidence

The Mermaid diagram rendering engine has been updated to a newer version, introducing support for new diagram types such as ABNF and Architecture diagrams. This update also includes a fix for a layout issue where diagram widths were shrinking unexpectedly, ensuring diagrams render with the correct dimensions.

lib/assets/mermaid · high confidence

Mermaid diagrams in Kino now support optional \:caption\ and \:download\ options. When enabled, a caption is displayed below the diagram, and a download button appears on hover, allowing users to save the rendered diagram as an SVG file. The implementation also includes fixes for diagram width shrinking and SVG rendering issues.

assets/packs/mermaid · high confidence

The internal architecture of \Kino.JS.Live\ has been restructured by extracting the server logic into \Kino.JS.Live.Server\ and the callback state management into \Kino.JS.Live.Context\. This change introduces a dedicated \Context\ struct that explicitly tracks client origins and provides helper functions for assigning state, broadcasting or sending events to specific clients, and reconfiguring smart cell editors. The server module now acts as a GenServer wrapper that delegates callbacks to the user-defined module while managing client connections, ping/pong handling, and event subscriptions, providing a cleaner separation of concerns for live JavaScript widget implementations.

lib/kino/js/live · high confidence

The Remote execution cell now uses a shared, single npm project for asset bundling, replacing the previous setup. This introduces a compiled main.css (generated via Tailwind CSS) and a bundled main.js (containing React 18.3.1 and its scheduler) to ensure consistent styling and layout across browsers, including a fix for Safari.

_lib/assets/remote\_execution\cell · high confidence

The remote execution cell UI has been updated to allow users to configure Node and Cookie credentials not just as static text or secrets, but also by selecting from available variables. The new React-based interface presents distinct input sections for Node and Cookie, each offering a dropdown to select a variable (populated via the 'variables' event) alongside the existing text and secret input options. This change enables dynamic credential injection for remote execution tasks.

_assets/packs/remote\_execution\cell · high confidence

The library has been renamed from LiveWidget to Kino, replacing the previous \LiveWidget\ and \LiveWidget.VegaLite\ modules with a new \Kino\ module that provides a richer set of interactive widgets for Livebook. This change introduces new capabilities such as \Kino.animate\ for creating animations from streams, \Kino.render\ for displaying custom data structures, and \Kino.configure\ for global settings, while removing the older \LiveWidget.render\ and \LiveWidget.VegaLite\ implementations in favor of the new, more flexible Kino framework.

lib · high confidence

HTML content rendered via the Kino.HTML interface now ensures that external scripts (those with src attributes) are fully loaded before any subsequent scripts are executed. This change prevents race conditions where dependent code might run before its required libraries have finished downloading, ensuring a more predictable execution order for users embedding interactive HTML.

lib/assets/html · high confidence

The tree component's build output now includes a bundled JavaScript file containing React 18.3.1 and a CSS file with Tailwind CSS base styles and custom ANSI color variables. This change consolidates the frontend assets into a single npm project with shared bundling, ensuring the component ships with the necessary React runtime and styling definitions required for its UI.

lib/assets/tree · high confidence

Added Livebook test support module; Added test coverage for JS Live, DataStore, and Context modules; Added test coverage for Kino components; Added test helper for mocking Livebook group leader; Added test suite for Kino.inspect, animate, and listen functions; Added test support modules for JS assets and Live interactions; Removed tests for LiveWidget.VegaLite.

The project has been renamed from LiveWidget to Kino (v0.19.1) and now requires Elixir 1.14 or higher. The dependency on VegaLite has been removed, replaced by optional dependencies on the \table\ library and \Nx\ (supporting version 1.0), while \plug\ and \ex\_doc\ are also included as optional or dev dependencies. On the frontend, a new \assets\ directory introduces a bundled JavaScript build using React 18, Mermaid 11.3, and the Glide Data Grid, managed by the \@livebook/kino-bundler\ tool.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• First survey — no prior run to compare against. CAI 61.

• Code Health 65
• Architecture 100
• Maturity 53
• Readiness 63
• Security 78

• 300 commits — 266 feature/other, 34 fixes

• lib/kino — 150 commits
• (root) — 63 commits
• assets/data_table — 28 commits
• lib/assets — 26 commits
• lib/kino.ex — 12 commits
• assets/packs — 7 commits
• test/kino — 6 commits
• assets/remote_execution_cell — 4 commits
• .expert/expert.log — 1 commit
• .github/workflows — 1 commit
• assets/tree — 1 commit
• test/kino_test.exs — 1 commit

• fix: Data table improvements and fixes (#223)
• fix: DataTable - fix for empty data with columns (#429)
• fix: Fix DataTable showing the last page (#225)
• fix: Fix Kino.DataTable docs (#202)
• fix: Fix Kino.DataTable to handle integer lists that are not valid charlists (#371)
• fix: Fix Kino.HTML to wait for external scripts to load before continuing
• fix: Fix Kino.Input.utc_datetime opts validation (#336)
• fix: Fix Kino.Process visualization for non-started processes (#190)
• fix: Fix audio element height
• fix: Fix code with interpolation in remote execution smart cell (#366)
• fix: Fix compiler warning in Elixir 1.19 (#507)
• fix: Fix custom header title (#422)
• fix: Fix date validation when allowed range is given (#326)
• fix: Fix dbg pipeline when result renders as Kino.JS.Live (#453)
• fix: Fix entries now showing when updating empty data table
• fix: Fix error when app does not have sup tree
• fix: Fix export fallback with no :export_key
• fix: Fix input range on Safari (#352)
• fix: Fix map key ordering on OTP 26 (#296)
• fix: Fix menu opening in table with summary
• …and 280 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

livebook-dev/kino was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.