widgets

Overview

:::caution The deck.gl-community repository is semi-maintained. One of its goals is to collect and preserve valuable deck.gl ecosystem related code that does not have a dedicated home. Some modules may no longer have dedicated maintainers. This means that there is sometimes no one who can respond quickly to issues. :::

This module packages UI widgets that integrate with deck.gl view state management. It includes classic navigation widgets such as PanWidget and ZoomRangeWidget, HTML overlays, and PanelWidget, the deck adapter for panel-owned UI components.

For renderer lifecycle management, the package also exports DeviceManager and DeviceTabsWidget. Together they let applications choose WebGPU or WebGL, reuse one cached luma device per backend, and reparent the managed canvas between host elements.

Panel definitions, panel containers, specialized toolbar/toast components, and standalone mounting live in @deck.gl-community/panels. Import components from panels, then pass them through PanelWidget or one of the thin named adapters in this package.

Installation

npm install @deck.gl-community/widgets

Usage

import DeckGL from '@deck.gl/react';
import {OrthographicView} from '@deck.gl/core';
import {PanWidget, ZoomRangeWidget} from '@deck.gl-community/widgets';

const widgets = [
  new PanWidget({placement: 'top-left', style: {margin: '16px'}}),
  new ZoomRangeWidget({placement: 'top-left', style: {margin: '96px 0 0 16px'}})
];

function App() {
  return (
    <DeckGL
      views={new OrthographicView({id: 'ortho'})}
      initialViewState={{target: [0, 0], zoom: 0}}
      controller={true}
      widgets={widgets}
      layers={[/* ... */]}
    />
  );
}

See the Pan and Zoom widgets example for a non-geospatial walkthrough.

See the Standalone Widgets example for deck-independent usage through @deck.gl-community/panels.

For the deck-facing panel widget APIs, see the Widget Panels example, which combines:

• SidebarPanelWidget for persistent controls
• ModalPanelWidget for tabbed secondary panels
• BoxPanelWidget for static summary cards
• reusable panel definitions imported from @deck.gl-community/panels

Use DeviceManager directly when your application wants custom backend-selection UI or needs to move the managed canvas between containers. Use DeviceTabsWidget when you want a ready-made widget for switching between webgpu and webgl2.

Standalone UI such as ToolbarComponent, ToastComponent, and toastManager is exported from @deck.gl-community/panels. The widgets package exports ToolbarWidget and ToastWidget only as deck adapters for those components.