Search Web Components

Search Web Components builds a faceted search page for a Search API index out of web components that go anywhere on the page and search in the browser, with no page reload and the whole search in the page URL. Site builders place the components in Layout Builder or Drupal Canvas; developers put the same tags in a Twig template or a decoupled front end.

Read the documentation

See the components in Storybook

Try the Umami demo

Why use it?

Each part of the search page is its own component, placed where the page needs it: facets in a sidebar, the sort above the results, a pager above and below them, a search box in the header. The page is laid out like any other page, with no Views templates to fight. The search runs in the browser: the page updates without a reload, and the URL holds the keyword, the filters, the sort, and the page. Drupal keeps the index, the endpoint, and the content.

• You build pages in Layout Builder or Drupal Canvas. Place a search layout, drop in the blocks, and set the labels in each block's form. The sort options, page sizes, listing layouts, and result rendering live on the endpoint, so changing them changes every page that uses it. No code, no deploy. The documentation has a getting started guide for each, with screenshots.
• You build the search page in a template. One search-root tag reads the search from the URL, calls the endpoint, and shares the response with the components inside it. Back, Forward, reload, and a shared link all work. Results render with your view mode and templates, or with a small result element of your own. Your theme's CSS applies.
• You are building a decoupled front end, or searching another Drupal site. The same code ships as the npm package drupal-search-web-components: 111 kB, 28 kB compressed, no framework to add. Point search-root at the endpoint of any Drupal site that runs Search API Decoupled, or at an API that is not Drupal with one subclass of the root.

Features

• A component for each part of a search page: search box, results, result summary, pager, sort, page size, list or grid switcher, loading indicator, no results message, did you mean, applied filters, and a filter dialog for small screens.
• Facets as checkboxes, buttons, a dropdown, or a dropdown built from HTML that your theme styles, with hierarchy, soft limits, and one option at a time.
• Placed as blocks in a one-column or two-column search layout, as single directory components in Drupal Canvas or Twig, or as tags in any HTML.
• Results rendered with the view mode you pick, from a Rendered HTML output field in the index, or by a custom result element from indexed fields. Each content type and each listing layout can have its own.
• No CSS shipped and no shadow DOM: your theme styles the components like any other markup, and Storybook lists every class each one renders.
• Each component follows its W3C ARIA pattern: comboboxes, a navigation landmark for the pager, a native dialog for the filters, labelled facet groups. Results are announced to screen readers, focus stays where the visitor was, and every accessible name is a setting. axe runs on every component in the test suite.

Requirements

• Drupal 10.3 or later. Drupal 11 and 12 are tested.
• Search API with any backend, and Search API Decoupled.
• Facets and Search API Decoupled Facets, for the facet widgets.
• Drupal Canvas 1.x and Drupal 11.3 or later, for the Canvas submodule only.

Information for developers

• TypeScript on Lit. Each underscore method is an override hook: subclass a component, override a hook, and register a tag of your own.
• Events fire before and after each search and when a facet is applied or cleared, so page code can react to a search or ask for one.
• The components search any Drupal site's Search API Decoupled endpoint, on the same site or another. An API that is not Drupal needs one subclass of the root: a hook that builds the request and a hook that maps the response. The response and every event are typed.
• The module and the npm package release together and share a version. The changelog says what a minor or patch release will and will not change.

Support options

Fund development Fund specific feature additions or help fund the day to day tasks required to maintain the module. Fund

Professional support Hire the me to help to ensure the success of your next project's search experience. I can review your plan, recommend solutions, and implement custom features. Contact Starting at $1000