Widget Catalog

The Widget Catalog provides a browsable and searchable list of all available widgets that can be added to your layouts. It is accessible from the editor sidebar and through the Widget Selection Modal.

Overview

Widgets are organized into categories (e.g., Content, Data, Layout). Each widget entry displays its title and, optionally, an expandable description to help you identify the right widget for your use case.

Searching for Widgets

You can filter the displayed widgets by typing in the search box at the top of the catalog or modal.

  • Matches against: widget title and widget description.
  • Case-insensitive: the search is not case-sensitive.
  • Live filtering: results update as you type — no need to press Enter.
  • Empty query: when the search box is empty, all widgets are shown grouped by category.
  • No results: if no widgets match your query, an empty state message is displayed.

Widget Catalog (Sidebar)

The search input is located at the top of the sidebar panel.

[ 🔍 Search... ]

Layout
  ┌─────────────┐  ┌─────────────┐
  │  Container  │  │    Grid     │
  └─────────────┘  └─────────────┘

Content
  ┌─────────────┐
  │    Text     │
  └─────────────┘

When you begin typing, categories with no matching widgets are hidden automatically. Clearing the search box restores the full list.

Expanding a widget's description (via the info button) is reset each time you type a new search term.

Widget Selection Modal

The search input appears below the modal header, above the widget grid.

┌──────────────────────────────────────────┐
│  Select a Widget               [ ✕ ]    │
│  [ 🔍 Search...                      ]  │
│                                          │
│  Layout                                  │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│  │Container │ │  Grid    │ │  ...     │ │
│  └──────────┘ └──────────┘ └──────────┘ │
└──────────────────────────────────────────┘

When the modal is closed (either by selecting a widget or pressing the close button), the search query is automatically cleared so the next time it opens the full list is shown.

How Filtering Works

Filtering is performed by the shared getFilteredWidgetsByCategory function in widget-registry.ts. It:

  1. Iterates over all registered widget categories.
  2. For each category, retains only widgets that are marked visibleInCatalog.
  3. If a search query is present, further filters to widgets whose translated title or description contains the query string.
  4. Excludes categories that have no matching widgets from the result.

Because the result is derived reactively from the search query state, the UI updates automatically as the user types.

Attributes

Attribute Description
data-testid="widget-catalog-search" Test ID for the search input in the Widget Catalog sidebar.
data-testid="widget-selection-search" Test ID for the search input in the Widget Selection Modal.
Markdown | llm.txt