Ink 7.0 Overhauls Input Handling for React in the Terminal

Ink has released version 7.0, a major update to its React-based renderer for command-line interfaces (CLIs) that introduces support for Node 22 and React 19.2.

The update focuses heavily on refining input handling and layout control for terminal user interfaces (TUIs). A primary addition is the usePaste hook, which implements bracketed paste mode. This allows the renderer to deliver pasted text as a single string, replacing the previous method where input was processed character-by-character via the useInput hook.

Enhanced Layout and Rendering Controls

Version 7.0 introduces several new properties for the Box component to provide more granular control over terminal layouts. Developers can now utilize maxWidth and maxHeight constraints, as well as aspectRatio and alignContent. The update likewise adds CSS-like positioning capabilities, including a static position option and specific top, right, bottom and left attributes.

To assist with dynamic layouts, the release includes the useBoxMetrics hook, which enables the measurement of Box dimensions at runtime. A new useWindowSize hook provides the current column and row counts and triggers a re-render upon terminal resize, offering a built-in alternative to custom terminal size tracking.

The rendering engine now supports an alternateScreen option. This allows applications to render in the alternate screen buffer—a behavior similar to tools such as vim or less—which restores the previous terminal content once the application exits.

State Management and Animation

The update adds a built-in useAnimation hook, which includes a frame counter and the ability to pause or resume animations. This feature is designed to replace manual interval-based animation logic and includes automatic cleanup upon component unmounting.

For components requiring focus tracking, the useFocusManager hook now includes an activeId property that returns the ID of the currently focused component. Other text-specific updates include a hard wrap option for the Text component, which forces lines to fill the full column width, and a borderBackgroundColor property for the Box component to allow for independent border styling.

Developers are currently evaluating the implementation of these features to resolve existing text input pain points and improve overall TUI user experiences.