---
title: JavaScript Search Framework component equivalences
slug: nak90576
canonical_url: https://docs.coveo.com/en/nak90576/
collection: build-a-search-ui
source_format: adoc
---
# JavaScript Search Framework component equivalences
These tables illustrate how out-of-the-box components in the Coveo [Atomic](https://docs.coveo.com/en/lcdf0264/), [Headless](https://docs.coveo.com/en/lcdf0493/) and [Quantic](https://docs.coveo.com/en/n9790069/) libraries match the functionality of various [JavaScript Search Framework](https://docs.coveo.com/en/187/) components.
If there's no direct mapping to a Headless, Atomic, or Quantic component, you'll find a link to relevant documentation when possible.
If a component is available in Headless but not in Atomic, you can still achieve the functionality by [accessing Headless through Atomic](https://docs.coveo.com/en/atomic/latest/usage/headless-through-atomic/).
If a component is available in Headless but not in Quantic, you can still achieve the functionality by [accessing Headless through Quantic](https://docs.coveo.com/en/quantic/latest/usage/access-headless/).

Across Atomic, Headless, and Quantic, certain components or controllers offer the same functionality as two or more JavaScript Search Framework components.
For example, the Headless [`QuerySummary`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.QuerySummary.html) provides the same features as the JavaScript Search Framework [`QueryDuration`](https://coveo.github.io/search-ui/components/queryduration.html) and [`QuerySummary`](https://coveo.github.io/search-ui/components/querysummary.html) components.

## How to read the equivalence tables

. Identify the JavaScript Search Framework component you want to migrate.

. Scan the tables by category to find the closest Atomic, Quantic, or Headless equivalent.

. If you don't find a direct mapping, open the "components not carried forward" section under the relevant category and follow the migration guidance.

> **Note**
>
> Mappings are identical across all categories and may appear more than once because they span UI, template, and navigation use cases.

> **Disclaimer**
>
> The JavaScript Search Framework and Atomic both operate as UI libraries.
> In contrast, Headless provides controllers and actions with which you can create your own, custom components, even when using Atomic or Quantic.
> So, if no obvious Headless controller, Atomic or Quantic component matches the functionality you want to replicate from a JavaScript Search Framework component, you can often implement your own.

## Visual

Use this section to map visual and result-template components from the JavaScript Search Framework to their Atomic, Quantic, and Headless equivalents.

[cols="~,~,~,~", options="header"]
|===
|JavaScript Search Framework
|Atomic
|Quantic
|Headless

|[`Badge`](https://coveo.github.io/search-ui/components/badge.html)
|[`atomic-result-badge`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-result-badge\--docs)
|[`c-quantic-colored-result-badge`](https://docs.coveo.com/en/quantic/latest/reference/result-template-components/result-template-colored-result-badge/)
|None

|[`FacetsMobileMode`](https://coveo.github.io/search-ui/components/facetsmobilemode.html)
|[`atomic-refine-toggle`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-refine-toggle\--docs)
|[`c-quantic-refine-toggle`](https://docs.coveo.com/en/quantic/latest/reference/insight-panel-components/insight-panel-refine-toggle/)
|None

|[`Icon`](https://coveo.github.io/search-ui/components/icon.html)
|[`atomic-icon`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-icon\--docs)
|Use Salesforce lightning component: [`Lightning:Icon`](https://developer.salesforce.com/docs/component-library/bundle/lightning:icon/example)
|None

|[`Logo`](https://coveo.github.io/search-ui/components/logo.html)
|[`atomic-icon`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-icon\--docs)
|None
|None

|[`PrintableUri`](https://coveo.github.io/search-ui/components/printableuri.html)
|[`atomic-result-printable-uri`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-result-printable-uri\--docs)
|[`c-quantic-result-printable-uri`](https://docs.coveo.com/en/quantic/latest/reference/result-template-components/result-template-result-printable-uri/)
|None

|[`SimpleFilter`](https://coveo.github.io/search-ui/components/simplefilter.html)
|[`atomic-popover`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-popover\--docs)
|[`c-quantic-sort`](https://docs.coveo.com/en/quantic/latest/reference/insight-panel-components/insight-panel-sort/)
|None

|[`SmartSnippet`](https://coveo.github.io/search-ui/components/smartsnippet.html)
|[`atomic-smart-snippet`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-smart-snippet\--docs)
|[`c-quantic-smart-snippet`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-smart-snippet/)
|[`SmartSnippet`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.SmartSnippet.html)

|[`SmartSnippetSuggestions`](https://coveo.github.io/search-ui/components/smartsnippetsuggestions.html)
|[`atomic-smart-snippet-suggestions`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-smart-snippet-suggestions\--docs)
|[`c-quantic-smart-snippet-suggestions`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-smart-snippet-suggestions/)
|[`SmartSnippetQuestionsList`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.SmartSnippetQuestionsList.html)
|===

**Visual components not carried forward**
<details><summary>Details</summary>

The following visual components from the JavaScript Search Framework don't have direct equivalents in Headless, Atomic, or Quantic.
If you require similar functionality, consider custom development or alternative approaches in your chosen framework.

[cols="~,~", options="header"]
|===
|JSUI component
|Migration guidance

|[`Backdrop`](https://coveo.github.io/search-ui/components/backdrop.html)
|Use your framework's modal or overlay components for similar UI effects.
The closest alternative is the [`result section system`](https://docs.coveo.com/en/atomic/latest/usage/displaying-results/result-sections/), particularly the `metadata section`.

|[`CardActionBar`](https://coveo.github.io/search-ui/components/cardactionbar.html)
|Follows a similar rationale to the `Backdrop` component above.
In the [`result section system`](https://docs.coveo.com/en/atomic/latest/usage/displaying-results/result-sections/), the functional equivalent would be the `action section`.
Similarly, for Quantic the functional equivalent is the [`actions section of the result template component`](https://docs.coveo.com/en/quantic/latest/usage/result-template-usage/#actions-section).

|[`CardOverlay`](https://coveo.github.io/search-ui/components/cardoverlay.html)
|Follows a similar rationale to the `Backdrop` component above.
In the [`result section system`](https://docs.coveo.com/en/atomic/latest/usage/displaying-results/result-sections/), the functional equivalent would be the `bottom metadata section`.
Similarly, for Quantic the functional equivalent is the [`metadata section fo the result templates component`](https://docs.coveo.com/en/quantic/latest/usage/result-template-usage/#metadata-section).

|[`FieldTable`](https://coveo.github.io/search-ui/components/fieldtable.html)
|Use custom result templates or table components in your framework.
The closest alternative is the [`result section system`](https://docs.coveo.com/en/atomic/latest/usage/displaying-results/result-sections/), particularly the `metadata section`.
Similarly, for Quantic the functional equivalent is the [`metadata section of the result template component`](https://docs.coveo.com/en/quantic/latest/usage/result-template-usage/#metadata-section).

|[`ResultLayoutSelector`](https://coveo.github.io/search-ui/components/resultlayoutselector.html)
|This was used in JSUI to allow users to switch the result layout between list, card, or table.
Use your framework's UI controls to offer layout switching.
Atomic supports multiple display types natively.

|[`ResultsFiltersPreferences`](https://coveo.github.io/search-ui/components/resultsfilterspreferences.html)
|Implement custom filter preference logic if needed, especially for power users or intranet scenarios.

|[`ResultsPreferences`](https://coveo.github.io/search-ui/components/resultspreferences.html)
|Use custom settings panels in your UI for advanced user control.

|[`SearchButton`](https://coveo.github.io/search-ui/components/searchbutton.html)
|Use your framework's button components and bind them to search actions.

|[`Settings`](https://coveo.github.io/search-ui/components/settings.html)
|Implement custom settings panels as needed, especially for advanced user scenarios.

|[`ShareQuery`](https://coveo.github.io/search-ui/components/sharequery.html)
|Implement sharing features using your framework's capabilities.

|[`TemplateLoader`](https://coveo.github.io/search-ui/components/templateloader.html)
|Atomic and Quantic use a different templating system than that of the legacy JSUI approach.
As a result, this artifact has no equivalent in the modern frameworks with Coveo.
See [`defining a result template`](https://docs.coveo.com/en/atomic/latest/usage/displaying-results/#defining-a-result-template) for Atomic and [`result templates`](https://docs.coveo.com/en/quantic/latest/usage#result-templates) for Quantic for more details on build templates.
|===

</details>

## Functional

Use this section to map core search features such as facets, query input, sorting, and result management to their equivalents.

[cols="~,~,~,~", options="header"]
|===
|JavaScript Search Framework
|Atomic
|Quantic
|Headless

|[`AdvancedSearch`](https://coveo.github.io/search-ui/components/advancedsearch.html)
|None
|None
|[`AdvancedSearchQuery`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Recommendation.AdvancedSearchQueryActionCreators.html)

|[`AuthenticationProvider`](https://coveo.github.io/search-ui/components/authenticationprovider.html)
|[`@coveo/auth`](https://github.com/coveo/ui-kit/tree/main/packages/auth)
|[`@coveo/auth`](https://github.com/coveo/ui-kit/tree/main/packages/auth)
|[`@coveo/auth`](https://github.com/coveo/ui-kit/tree/main/packages/auth)

|[`CategoryFacet`](https://coveo.github.io/search-ui/components/categoryfacet.html)
|[`atomic-category-facet`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-category-facet\--docs)
|[`c-quantic-category-facet`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-category-facet/)
|[`CategoryFacet`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.CategoryFacet.html)

|[`CommerceQuery`](https://coveo.github.io/search-ui/components/commercequery.html)
|[`atomic-search-box`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-search-box\--docs)
|[`c-quantic-search-box`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-search-box/)
|[`SearchBox`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.SearchBox.html)

|[`DidYouMean`](https://coveo.github.io/search-ui/components/didyoumean.html)
|[`atomic-did-you-mean`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-did-you-mean\--docs)
|[`c-quantic-did-you-mean`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-did-you-mean/)
|[`DidYouMean`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.DidYouMean.html)

|[`DynamicFacet`](https://coveo.github.io/search-ui/components/dynamicfacet.html)
|[`atomic-facet`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-facet\--docs)
|[`c-quantic-facet`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-facet/)
|[`Facet`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.Facet.html)

|[`DynamicFacetManager`](https://coveo.github.io/search-ui/components/dynamicfacetmanager.html)
|[`atomic-facet-manager`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-facet-manager\--docs)
|[`c-quantic-facet-manager`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-facet-manager/)
|[`FacetManager`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.FacetManager.html)

|[`DynamicFacetRange`](https://coveo.github.io/search-ui/components/dynamicfacetrange.html)
|[`atomic-numeric-range`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-numeric-range\--docs)
|[`c-quantic-numeric-facet`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-numeric-facet/)
|[`NumericFacet`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.NumericFacet.html)

|[`DynamicHierarchicalFacet`](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html)
|[`atomic-category-facet`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-category-facet\--docs)
|[`c-quantic-category-facet`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-category-facet/)
|[`CategoryFacet`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.CategoryFacet.html)

|[`ErrorReport`](https://coveo.github.io/search-ui/components/errorreport.html)
|[`atomic-component-error`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-component-error\--docs)
|[`c-quantic-query-error`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-query-error/)
|[`QueryError`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.QueryError.html)

|[`Facet`](https://coveo.github.io/search-ui/components/facet.html)
|[`atomic-facet`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-facet\--docs)
|[`c-quantic-facet`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-facet/)
|[`Facet`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.Facet.html)

|[`FacetRange`](https://coveo.github.io/search-ui/components/facetrange.html)
|[`atomic-numeric-facet`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-numeric-facet\--docs)
|[`c-quantic-numeric-facet`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-numeric-facet/)
|[`NumericFacet`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.NumericFacet.html)

|[`Folding`](https://coveo.github.io/search-ui/components/folding.html)
|[`atomic-folded-result-list`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-folded-result-list\--docs)
|[`c-quantic-folded-result-list`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-folded-result-list/)
|[`Folding`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.FoldingActionCreators.html)

|[`HierarchicalFacet`](https://coveo.github.io/search-ui/components/hierarchicalfacet.html)
|[`atomic-category-facet`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-category-facet\--docs)
|[`c-quantic-category-facet`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-category-facet/)
|[`CategoryFacet`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.CategoryFacet.html)

|[`Omnibox`](https://coveo.github.io/search-ui/components/omnibox.html)
|[`atomic-search-box`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-search-box\--docs)
|[`c-quantic-search-box-suggestions-list`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-search-box-suggestions-list/)
|[`SearchBox`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.SearchBox.html)

|[`Pager`](https://coveo.github.io/search-ui/components/pager.html)
|[`atomic-pager`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-pager\--docs)
|[`c-quantic-pager`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-pager/)
|[`Pager`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.Pager.html)

|[`PipelineContext`](https://coveo.github.io/search-ui/components/pipelinecontext.html)
|None
|None
|[`Context`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.Context.html)

|[`QueryDuration`](https://coveo.github.io/search-ui/components/queryduration.html)
|[`atomic-query-summary`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-query-summary\--docs)
|[`c-quantic-summary`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-summary/)
|[`QuerySummary`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.QuerySummary.html)

|[`QuerySuggestPreview`](https://coveo.github.io/search-ui/components/querysuggestpreview.html)
|[`atomic-search-box-instant-results`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-search-box-instant-results\--docs)
|None
|[`InstantResults`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.InstantResults.html)

|[`QuerySummary`](https://coveo.github.io/search-ui/components/querysummary.html)
|[`atomic-query-summary`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-query-summary\--docs)
|[`c-quantic-summary`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-summary/)
|[`QuerySummary`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.QuerySummary.html)

|[`Recommendation`](https://coveo.github.io/search-ui/components/recommendation.html)
|[`atomic-recs-list`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-recs-list\--docs)
|[`c-quantic-recommendation-list`](https://docs.coveo.com/en/quantic/latest/reference/recommendation-components/recommendation-recommendation-list/)
|[`RecommendationList`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Recommendation.RecommendationList.html)

|[`ResultFolding`](https://coveo.github.io/search-ui/components/resultfolding.html)
|[`atomic-folded-result-list`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-folded-result-list\--docs)
|[`c-quantic-folded-result-list`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-folded-result-list/)
|[`FoldedResultList`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.FoldedResultList.html)

|[`ResultsPerPage`](https://coveo.github.io/search-ui/components/resultsperpage.html)
|[`atomic-results-per-page`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-results-per-page\--docs)
|[`c-quantic-results-per-page`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-results-per-page/)
|[`ResultsPerPage`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.ResultsPerPage.html)

|[`SearchInterface`](https://coveo.github.io/search-ui/components/searchinterface.html)
|[`atomic-search-interface`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-search-interface\--docs)
|[`c-quantic-search-interface`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-search-interface/)
|[`SearchBox`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.SearchBox.html)

|[`Sort`](https://coveo.github.io/search-ui/components/sort.html)
|[`atomic-sort-expression`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-sort-expression\--docs)
|[`c-quantic-sort-option`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-sort-option/)
|[`Sort`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.Sort.html)

|[`SortDropdown`](https://coveo.github.io/search-ui/components/sortdropdown.html)
|[`atomic-sort-dropdown`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-sort-dropdown\--docs)
|[`c-quantic-sort`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-sort/)
|None

|[`Tab`](https://coveo.github.io/search-ui/components/tab.html)
|[`atomic-tab`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-tab\--docs)
|[`c-quantic-tab`](https://docs.coveo.com/en/quantic/latest/reference/insight-panel-components/insight-panel-tab/)
|[`Tab`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.Tab.html)

|[`TimespanFacet`](https://coveo.github.io/search-ui/components/timespanfacet.html)
|[`atomic-timeframe-facet`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-timeframe-facet\--docs)
|[`c-quantic-timeframe-facet`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-timeframe-facet/)
|[`DateFacet`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.DateFacet.html)

|[`Triggers`](https://coveo.github.io/search-ui/components/triggers.html)
|[`Trigger Methods`](https://docs.coveo.com/en/3413#methods)
|[`Trigger Methods`](https://docs.coveo.com/en/3413#methods)
|[`Trigger Methods`](https://docs.coveo.com/en/3413#methods)
|===

**Functional components not carried forward**
<details><summary>Details</summary>

The following functional components from the JavaScript Search Framework don't have direct equivalents in Headless, Atomic, or Quantic.
Consider custom logic or alternative approaches for these features.

[cols="~,~", options="header"]
|===
|JSUI component
|Migration guidance

|[`Aggregate`](https://coveo.github.io/search-ui/components/aggregate.html)
|Use facet or group-by features in your framework to aggregate results as needed.

|[`FollowItem`](https://coveo.github.io/search-ui/components/followitem.html)
|Add follow or subscription features using custom logic or third-party integrations.

|[`Matrix`](https://coveo.github.io/search-ui/components/matrix.html)
|Saw very little adoption, and relied on a now deprecated `Search API GroupByRequest` feature.
As such, there are no plans to bring this component back.

|[`ResultAttachments`](https://coveo.github.io/search-ui/components/resultattachments.html)
|Atomic and Quantic support `Folding` natively for similar use cases.

|[`SearchAlerts`](https://coveo.github.io/search-ui/components/searchalerts.html)
|Implement notification or alerting features using your framework's notification system or external integrations.

|[`SearchAlertsMessage`](https://coveo.github.io/search-ui/components/searchalertsmessage.html)
|Display alert messages using your framework's notification or messaging components.

|[`TemplateLoader`](https://coveo.github.io/search-ui/components/templateloader.html)
|Atomic uses a different templating system than that of the legacy JSUI approach.
As a result, this artifact has no equivalent in the modern frameworks with Coveo.
|===

</details>

## Navigation

Use this section to map navigation helpers such as tabs, pagination, refine toggles, and breadcrumbs to their equivalents.

[cols="~,~,~,~", options="header"]
|===
|JavaScript Search Framework
|Atomic
|Quantic
|Headless

|[`Breadcrumb`](https://coveo.github.io/search-ui/components/breadcrumb.html)
|[`atomic-breadbox`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-breadbox\--docs)
|[`c-quantic-breadcrumb-manager`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-breadcrumb-manager/)
|[`BreadcrumbManager`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.BreadcrumbManager.html)

|[`FacetsMobileMode`](https://coveo.github.io/search-ui/components/facetsmobilemode.html)
|[`atomic-refine-toggle`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-refine-toggle\--docs)
|[`c-quantic-refine-toggle`](https://docs.coveo.com/en/quantic/latest/reference/insight-panel-components/insight-panel-refine-toggle/)
|None

|[`Pager`](https://coveo.github.io/search-ui/components/pager.html)
|[`atomic-pager`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-pager\--docs)
|[`c-quantic-pager`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-pager/)
|[`Pager`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.Pager.html)

|[`Tab`](https://coveo.github.io/search-ui/components/tab.html)
|[`atomic-tab`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-tab\--docs)
|[`c-quantic-tab`](https://docs.coveo.com/en/quantic/latest/reference/insight-panel-components/insight-panel-tab/)
|[`Tab`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.Tab.html)
|===

**Navigation components not carried forward**
<details><summary>Details</summary>

The following navigation components don't have direct equivalents in Headless, Atomic, or Quantic.
Use your framework's navigation controls or custom logic as needed.

[cols="~,~", options="header"]
|===
|JSUI component
|Migration guidance

|[`ResultLayoutSelector`](https://coveo.github.io/search-ui/components/resultlayoutselector.html)
|This was used in JSUI to allow users to switch the result layout between list, card, or table.
Use your framework's UI controls to offer layout switching.
Atomic supports multiple display types natively.
|===

</details>

## Notification and alert

Use this section to map attention and status indicators that highlight promoted or special results.

[cols="~,~,~,~", options="header"]
|===
|JavaScript Search Framework
|Atomic
|Quantic
|Headless

|[`PromotedResultsBadge`](https://coveo.github.io/search-ui/components/promotedresultsbadge.html)
|[`atomic-result-badge`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-result-badge\--docs)
|[`c-quantic-result-tag`](https://docs.coveo.com/en/quantic/latest/reference/result-template-components/result-template-result-tag/)
|None
|===

**Notification and alert components not carried forward**
<details><summary>Details</summary>

The following notification and alert components don't have direct equivalents in Headless, Atomic, or Quantic.
Implement custom notification logic or use external systems as needed.

[cols="~,~", options="header"]
|===
|JSUI component
|Migration guidance

|[`FollowItem`](https://coveo.github.io/search-ui/components/followitem.html)
|Add follow or subscription features using custom logic or third-party integrations.

|[`SearchAlerts`](https://coveo.github.io/search-ui/components/searchalerts.html)
|Provide alerting or notification features using your framework's notification system or external integrations.

|[`SearchAlertsMessage`](https://coveo.github.io/search-ui/components/searchalertsmessage.html)
|Display alert messages using your framework's notification or messaging components.

|===

</details>

## Analytics and tracking

Use this section to map analytics instrumentation and summary displays that help measure and explain query performance.

[cols="~,~,~,~", options="header"]
|===
|JavaScript Search Framework
|Atomic
|Quantic
|Headless

|[`Analytics`](https://coveo.github.io/search-ui/components/analytics.html)
|[`Usage Analytics`](https://docs.coveo.com/en/atomic/latest/usage/atomic-usage-analytics/)
|Works in a similar way to Atomic
|[`Usage Analytics`](https://docs.coveo.com/en/headless/latest/usage/headless-usage-analytics/)

|[`Querybox`](https://coveo.github.io/search-ui/components/querybox.html)
|[`atomic-search-box`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-search-box\--docs)
|[`c-quantic-search-box`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-search-box/)
|[`SearchBox`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.SearchBox.html)

|[`QueryDuration`](https://coveo.github.io/search-ui/components/queryduration.html)
|[`atomic-query-summary`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-query-summary\--docs)
|[`c-quantic-summary`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-summary/)
|[`QuerySummary`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.QuerySummary.html)
|===

**Analytics and tracking components not carried forward**
<details><summary>Details</summary>

The following analytics and tracking components don't have direct equivalents in Headless, Atomic, or Quantic.
Implement custom analytics logic or use external tracking systems as needed.

[cols="~,~", options="header"]
|===
|JSUI component
|Migration guidance

|[`AnalyticsSuggestions`](https://coveo.github.io/search-ui/components/analyticssuggestions.html)
|A legacy system for query suggestions.
This has now been replaced by Coveo's machine learning model, so you should use the supported machine learning solution for your chosen framework.
|===

</details>

## Template and layout

Use this section to map result template elements and layout helpers for rendering search results.

[cols="~,~,~,~", options="header"]
|===
|JavaScript Search Framework
|Atomic
|Quantic
|Headless

|[`Excerpt`](https://coveo.github.io/search-ui/components/excerpt.html)
|[`atomic-result-section-excerpt`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-result-section-excerpt\--docs)
|[`c-quantic-result-highlighted-text-field`](https://docs.coveo.com/en/quantic/latest/reference/result-template-components/result-template-result-highlighted-text-field/)
|[`ResultTemplates`](https://docs.coveo.com/en/headless/latest/usage/result-templates/)

|[`FieldValue`](https://coveo.github.io/search-ui/components/fieldvalue.html)
|[`atomic-result-text`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-result-text\--docs)
|[`c-quantic-result-text`](https://docs.coveo.com/en/quantic/latest/reference/result-template-components/result-template-result-text/)
|None

|[`ImageFieldValue`](https://coveo.github.io/search-ui/components/imagefieldvalue.html)
|[`atomic-result-image`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-result-image\--docs)
|None
|None

|[`PrintableUri`](https://coveo.github.io/search-ui/components/printableuri.html)
|[`atomic-result-printable-uri`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-result-printable-uri\--docs)
|[`c-quantic-result-printable-uri`](https://docs.coveo.com/en/quantic/latest/reference/result-template-components/result-template-result-printable-uri/)
|None

|[`Quickview`](https://coveo.github.io/search-ui/components/quickview.html)
|[`atomic-quickview`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-quickview\--docs)
|[`c-quantic-result-quickview`](https://docs.coveo.com/en/quantic/latest/reference/result-template-components/result-template-result-quickview/)
|[`Quickview`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.Quickview.html)

|[`QuickviewDocument`](https://coveo.github.io/search-ui/components/quickviewdocument.html)
|[`atomic-quickview`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-quickview\--docs)
|[`c-quantic-result-quickview`](https://docs.coveo.com/en/quantic/latest/reference/result-template-components/result-template-result-quickview/)
|[`Quickview`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.Quickview.html)

|[`ResultActionsMenu`](https://coveo.github.io/search-ui/components/resultactionsmenu.html)
|[`atomic-result-section-actions`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-result-section-actions\--docs)
|[`c-quantic-result-action`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-result-action/)
|None

|[`ResultLink`](https://coveo.github.io/search-ui/components/resultlink.html)
|[`atomic-result-link`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-result-link\--docs)
|[`c-quantic-result-link`](https://docs.coveo.com/en/quantic/latest/reference/result-template-components/result-template-result-link/)
|[`InteractiveResult`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.InteractiveResult.html)

|[`ResultList`](https://coveo.github.io/search-ui/components/resultlist.html)
|[`atomic-result-list`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-result-list\--docs)
|[`c-quantic-recommendation-list`](https://docs.coveo.com/en/quantic/latest/reference/recommendation-components/recommendation-recommendation-list/)
|[`ResultList`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.ResultList.html)

|[`ResultRating`](https://coveo.github.io/search-ui/components/resultrating.html)
|[`atomic-result-rating`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-result-rating\--docs)
|None
|None

|[`SmartSnippet`](https://coveo.github.io/search-ui/components/smartsnippet.html)
|[`atomic-smart-snippet`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-smart-snippet\--docs)
|[`c-quantic-smart-snippet`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-smart-snippet/)
|[`SmartSnippet`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.SmartSnippet.html)

|[`SmartSnippetSuggestions`](https://coveo.github.io/search-ui/components/smartsnippetsuggestions.html)
|[`atomic-smart-snippet-suggestions`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-smart-snippet-suggestions\--docs)
|[`c-quantic-smart-snippet-suggestions`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-smart-snippet-suggestions/)
|[`SmartSnippetQuestionsList`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.SmartSnippetQuestionsList.html)

|[`StarRating`](https://coveo.github.io/search-ui/components/starrating.html)
|[`atomic-result-rating`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-result-rating\--docs)
|None
|None

|[`Text`](https://coveo.github.io/search-ui/components/text.html)
|[`atomic-text`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-text\--docs)
|Use Salesforce custom labels: [`Custom labels`](https://help.salesforce.com/s/articleView?id=platform.cl_about.htm&type=5)
|None

|[`Thumbnail`](https://coveo.github.io/search-ui/components/thumbnail.html)
|[`atomic-result-image`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-result-image\--docs)
|Use custom templates with: [`c-quantic-result`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-result/)
|None

|[`YouTubeThumbnail`](https://coveo.github.io/search-ui/components/youtubethumbnail.html)
|[`atomic-result-image`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-result-image\--docs)
|Use custom templates with: [`c-quantic-result`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-result/)
|None
|===

**Template and layout components not carried forward**
<details><summary>Details</summary>

The following template/layout components don't have direct equivalents in Headless, Atomic, or Quantic.
Use your framework's template and layout features for similar functionality.

[cols="~,~", options="header"]
|===
|JSUI component
|Migration guidance

|[`FieldTable`](https://coveo.github.io/search-ui/components/fieldtable.html)
|Use custom result templates or table components in your framework.
The closest alternative is the [`result section system`](https://docs.coveo.com/en/atomic/latest/usage/displaying-results/result-sections/), particularly the `metadata section`.

|[`ResultLayoutSelector`](https://coveo.github.io/search-ui/components/resultlayoutselector.html)
|This was used in JSUI to allow users to switch the result layout between list, card, or table.
Use your framework's UI controls to offer layout switching.
Atomic supports multiple display types natively.

|[`TemplateLoader`](https://coveo.github.io/search-ui/components/templateloader.html)
|Atomic uses a different templating system than that of the legacy JSUI approach.
As a result, this artifact has no equivalent in the modern frameworks with Coveo.
|===

</details>

## Events

### Shifting to a state-based architecture

The Coveo JavaScript Search Framework was built on an event-driven architecture where components interacted through a network of custom events.
Components listened for and emitted events such as `querySuccess`, `buildingQuery`, `analyticsEventReady`, `facetSelectionChange`, and more.
Each component was responsible for responding to these events and updating its own internal state or DOM accordingly.

Atomic, Quantic and the underlying Headless framework represent a fundamental shift in how Coveo's search interfaces are structured.
Rather than relying on events to coordinate component behaviour, these frameworks use a state-based architecture.
All search-related data lives inside a shared, observable state managed by the Headless engine.

Components normally do not require developers to coordinate behavior by broadcasting events.
Instead, you build against Headless actions and the shared observable state.
When using Atomic or Quantic, you won't interact with components by registering event listeners.

This shift brings Coveo's modern frameworks in line with contemporary UI paradigms.

### Why move to state-based architecture?

Moving from an event-driven approach to a state-driven one provides a number of advantages for both developers and end users.

#### Benefits of centralized state management

In an event-driven architecture you often need a hierarchical relationship between your components, as events only flow up.
In centralized state management rather than tracking state on a component by component basis, Headless centralizes search state into one place.
Each piece of state (query, facets, pagination, sorting, and results) is observable and predictable.

#### How modern frameworks improve maintainability

The Coveo JavaScript Search Framework components combined UI logic, state management, and event handling into a single layer.

Atomic and Quantic decouple these responsibilities with:

- Headless managing state and business logic

- Atomic and Quantic handling rendering and user interactions

This separation provides a stable Headless layer that developer teams can target with custom UIs instead of building directly against the underlying Search REST APIs.
Headless exposes controllers, actions, and observable state you can reuse or extend.
Since Headless is maintained and tested by Coveo developers, you typically avoid implementing state and business logic yourself when creating custom Atomic or Quantic components.

#### Testing in Atomic and Quantic

In the Coveo JavaScript Search Framework, testing custom behaviour often required simulating a series of events or mocking DOM interactions.
With Headless, developers can instead focus their tests on pure state transitions by dispatching an action and asserting on the resulting state.

#### Extensibility through explicit patterns

Modern frameworks avoid the implicit and sometimes unpredictable chain of events seen in the Coveo JavaScript Search Framework.
Developers can now extend behaviour, creating predictable and explicit behaviour that can scale with complexity by:

- [Dispatching actions](https://docs.coveo.com/en/headless/latest/usage#dispatch-actions)

- [Using state subscriptions](https://docs.coveo.com/en/headless/latest/usage#subscribe-to-state-changes)

- [Extending controllers](https://docs.coveo.com/en/headless/latest/usage/extend-headless-controllers/)

### Mapping Coveo JavaScript Search Framework events

Developers coming from the Coveo JavaScript Search Framework may expect to find one-to-one equivalents similar to the table for UI components.
Given the architectural shift, these events don't translate directly to Atomic, Quantic, or Headless.

Instead of representing search flow with events, as mentioned in the previous section, these modern frameworks use state transitions.

A concept like "query success" is expressed as properties in the `searchStatus` or `resultList` controller states rather than as an event.
This distinction is essential, noting that events describe moments in time while state describes the entire search state consistently over time.

With event based architecture, you had to register an event listener for many events, like `querySuccess`, `queryError`, `buildingQuery`, `newQuery`, and more.
With state-based architecture, subscribing to the `searchStatus` means you'll automatically be able to trigger code on every change of the Search Status, in one single place.

With this fundamental architectural difference in mind, attempting to map every Coveo JavaScript Search Framework event to their modern framework equals leads to inaccurate or misleading guidance.
Instead, these events are best approached through patterns rather than specific event-by-event mappings.

### Practical migration examples

The following examples illustrate how common Coveo JavaScript Search Framework event patterns translate to the modern, state-based architecture used in Atomic and Quantic.
Each example pairs a legacy Coveo JavaScript Search Framework event pattern with its modern Atomic and Quantic equivalents.
The Headless pattern is inherent in both frameworks, so no separate code sample is required.

#### Adding filters and context before a query

In the Coveo JavaScript Search Framework developers used the `buildingQuery` event to add constant filters or contextual metadata just before the query executed.
In Headless, this logic is handled directly by updating the engine's state before the search request runs.

##### Coveo JavaScript Search Framework approach
```js
document.addEventListener("DOMContentLoaded", function () {
  Coveo.SearchEndpoint.configureSampleEndpointV2();

  const root = document.querySelector("#search");

  Coveo.$$(root).on("buildingQuery", function (e, args) {
    args.queryBuilder.advancedExpression.add('@source==("Documentation")');

    args.queryBuilder.addContext({
      audience: "developer"
    });
  });

  Coveo.$$(root).on("doneBuildingQuery", function (e, args) {
    const aq = args.queryBuilder.advancedExpression.build();
  });

  Coveo.init(root);
});
```

##### Atomic equivalent
```html
<script type="module">
  const {
    loadAdvancedSearchQueryActions,
    loadContextActions
  } = await import('@coveo/headless');

  (async () => {
    await customElements.whenDefined('atomic-search-interface');
    const searchInterface = document.querySelector('atomic-search-interface');

    await searchInterface.initialize({
      accessToken: '<ACCESS_TOKEN>',
      organizationId: '<ORGANIZATION_ID>'
    });

    const { engine } = searchInterface;

    engine.dispatch(loadAdvancedSearchQueryActions(engine) <1>
      .updateAdvancedSearchQueries({aq: '@source==("Documentation")'})
    );

    engine.dispatch(loadContextActions(engine).addContext({ <2>
      contextKey: 'audience',
      contextValue: 'developer',
    }));

    searchInterface.executeFirstSearch();
  })();
</script>
```
<1> Dispatch a Headless advanced-query action to set a pre-query filter, [`aq`](https://docs.coveo.com/en/175/).
The `loadAdvancedSearchQueryActions` call returns the possible action creators with the `updateAdvancedSearchQueries` call used to update the values of advanced search queries.
Together, these calls ensure the engine queries only the desired source before the first search.
<2> Add contextual metadata sent with each query.
The `loadContextActions` call returns the possible action creators with the `addContext` call used to then add the contextual metadata.
Use this for personalization, routing, or server-side ranking rules.

##### Quantic equivalent

> **Note**
>
> To learn how Quantic exposes the Headless engine and how to implement custom components using Headless controllers, see [Access Headless through Quantic](https://docs.coveo.com/en/quantic/latest/usage/access-headless/).

```html
<c-quantic-search-interface engine-id="main" search-hub="Docs">
  <c-my-init engine-id="main"></c-my-init> <1>
</c-quantic-search-interface>
```
<1> Create a custom LWC that retrieves the engine using its engine ID, and configures it by setting the [`aq`](https://docs.coveo.com/en/175/) value and any required context.

```js
// c/myInit/myInit.js

import {LightningElement, api} from 'lwc';
import { registerComponentForInit, initializeWithHeadless } from 'c/quanticHeadlessLoader';

export default class MyInit extends LightningElement {
  @api engineId;

  contextController;

  connectedCallback() {
    registerComponentForInit(this, this.engineId);
  }

  renderedCallback() {
    initializeWithHeadless(this, this.engineId, this.initialize);
  }

  initialize = (engine) => {
    engine.dispatch(
      CoveoHeadless.loadContextActions(engine).addContext({
        contextKey: 'audience',
        contextValue: 'developer',
      })
    );

    engine.dispatch(CoveoHeadless.loadAdvancedSearchQueryActions(engine)
      .updateAdvancedSearchQueries({aq: '@source==("Documentation")'})
    );
  }
}
```

Once included in target pages, this component passes custom context when making search requests.

#### Handling "no results" and fatal query errors

The Coveo JavaScript Search Framework implementations listened to `querySuccess` and `queryError` and then manually toggled panels.
Modern implementations expose these conditions as state for Atomic and Quantic components to reference and affect render directly.

##### Coveo JavaScript Search Framework approach

```js
document.addEventListener("DOMContentLoaded", function () {
  Coveo.SearchEndpoint.configureSampleEndpointV2();

  const root = document.querySelector("#search");

  Coveo.$$(root)
    .on("querySuccess", function (e, args) {
      document.getElementById("error").style.display = "none";
      document.getElementById("no-results").style.display = "none";

      const results = args.results?.results || [];
      if (results.length === 0) {
        document.getElementById("no-results").style.display = "block";
      }
    })
    .on("queryError", function (e, args) {
      const errorElement = document.getElementById("error");
      const message = args?.error?.message || "Search failed.";
      errorElement.textContent = message;
      errorElement.style.display = "block";
    });

  Coveo.init(root);
});

```

##### Atomic equivalent

Most pages need zero custom code for displaying and loading error states or no result cases.
Atomic ships error and empty state components that already track the Headless status for you.

```html
<atomic-search-interface>
  <atomic-search-box></atomic-search-box> <1>
  <atomic-query-error></atomic-query-error> <2>
  <atomic-no-results></atomic-no-results> <3>

  <atomic-layout-section section="results">
    <atomic-result-list></atomic-result-list> <4>
  </atomic-layout-section>
</atomic-search-interface>
```
<1> The [`atomic-search-box`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-search-box\--docs) wires user input to Headless search actions and integrates with Atomic stateful components.
<2> The [`atomic-query-error`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-query-error\--docs) component handles fatal errors when performing a query on the index or Search API.
<3> The [`atomic-no-results`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-no-results\--docs) component displays search tips and a "Cancel last action" button when there are no search results.
<4> The [`atomic-result-list`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-result-list\--docs) component is responsible for displaying query results by applying one or more result templates.

##### Quantic equivalent

Similarly to Atomic, Quantic provides built-in LWC components that react to Headless state for both fatal query errors and empty result scenarios.

```html
<c-quantic-search-interface engine-id="main" search-hub="Docs"> <1>
  <c-quantic-search-box engine-id="main"></c-quantic-search-box>
  <c-quantic-query-error engine-id="main"></c-quantic-query-error> <2>
  <c-quantic-no-results engine-id="main"></c-quantic-no-results> <3>

  <c-quantic-result-list engine-id="main"></c-quantic-result-list> <4>
</c-quantic-search-interface>
```
<1> The [`c-quantic-search-interface`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-search-interface/) initializes the Headless engine for child LWCs using the provided engine-id and search-hub.
<2> The [`c-quantic-query-error`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-query-error/) component listens to Headless state and displays fatal query errors without custom DOM mutation.
<3> The [`c-quantic-no-results`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-no-results/) component displays search tips and a "Cancel last action" button when there are no results. Any additional content embedded inside the component will be displayed as well.
<4> The [`c-quantic-result-list`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-result-list/) component is responsible for displaying query results by applying one or more result templates.

#### Customizing result rendering

In the Coveo JavaScript Search Framework, developers often used post-render handlers to mutate result markup after it was rendered.
Modern approaches perform the same customization by composing the final markup in result templates, producing predictable, testable output without brittle DOM edits.

##### Coveo JavaScript Search Framework approach

In the Coveo JavaScript Search Framework, you could use a `newResultsDisplayed` event handler to modify the appearance of each result in the result list.

In the following example, the handler changes the HTML of each rendered `ResultLink` component so that it displays the name of the source before the result title.

```js
document.addEventListener("DOMContentLoaded", function() {
  Coveo.SearchEndpoint.configureSampleEndpointV2();

  root = document.querySelector("#search");

  Coveo.$$(root).on("newResultsDisplayed", function(e, args) {
    for (var i = 0; i < e.target.lastChild.children.length; i++) {
      var currentResult = e.target.lastChild.children[i];
      var formattedTitle = currentResult.CoveoResult.raw.source + " - " + currentResult.CoveoResult.Title;
      currentResult.children[0].querySelectorAll("div.coveo-result-cell > a.CoveoResultLink").forEach(function(element) {
        element.innerHTML = formattedTitle;
      });
    }
  });

  Coveo.init(root);
});
```

Modern frameworks tend to avoid post-render DOM edits and instead compose result templates that render the structure directly from state.

##### Atomic equivalent

With Atomic, this is carried out using the `atomic-result-template` as follows:

```html
<atomic-search-interface>
  <atomic-result-list fields-to-include="title,source">
    <atomic-result-template>
      <template>
        <atomic-result-section-title>
          <atomic-result-text field="source"></atomic-result-text>
          <span aria-hidden="true"> - </span>
          <atomic-result-link></atomic-result-link>
        </atomic-result-section-title>

        <atomic-result-section-bottom-metadata>
          <atomic-result-printable-uri></atomic-result-printable-uri>
        </atomic-result-section-bottom-metadata>
      </template>
    </atomic-result-template>
  </atomic-result-list>
</atomic-search-interface>
```

##### Quantic equivalent

In Quantic, templates offer named slots. To implement functionality similar to that of the Coveo JavaScript Search Framework example, use a `ResultField` for source and `ResultLink` for title as follows:

> **Note**
>
> For more guidance on result templates and registration, see [Result templates overview](https://docs.coveo.com/en/quantic/latest/usage#result-templates) and [Result template usage guide](https://docs.coveo.com/en/quantic/latest/usage/result-template-usage/).

```html
<c-quantic-search-interface engine-id="main" search-hub="Docs">
  <div onregisterresulttemplates={handleResultTemplateRegistration}>
    <c-quantic-result-list engine-id="main"></c-quantic-result-list>
  </div>
</c-quantic-search-interface>
```

Make use of a [result template](https://docs.coveo.com/en/quantic/latest/usage#result-templates) to determine the format of the individual result items in a search interface.
The following HTML snippet showcases the result template that the JavaScript to follow will utilize as its result template.

```html
// ./resultTemplates/resultTemplateExample.html'
<c-quantic-result-template>
  <div slot="title" class="slds-truncate">
    <c-quantic-result-field field="source"></c-quantic-result-field>
    <span aria-hidden="true"> - </span>
    <c-quantic-result-link engine-id="main"></c-quantic-result-link>
  </div>
  <div slot="bottom-metadata" class="slds-text-body_small">
    <c-quantic-result-printable-uri></c-quantic-result-printable-uri>
  </div>
</c-quantic-result-template>
```

The following JavaScript provides the logic for registering a template that displays the result source, title and additional metadata.

```js
import resultTemplateExample from './resultTemplates/resultTemplateExample.html';
import {LightningElement, api} from 'lwc';

export default class MySearchPageExample extends LightningElement {
  @api engineId = 'main'; <1>
  @api searchHub = 'Docs';

  const handleResultTemplateRegistration = (event) => { <2>
    event.stopPropogation(); <3>

    const resultTemplatesManager = event.detail;

    resultTemplatesManager.registerTemplates( <4>
      {
        content: resultTemplateExample,
        fields: ['source','title'],
      },
    );
  };
}
```
<1> Define the variables that you used in the HTML file, in your `c-quantic-search-interface`,and set their default values.
<2> The function that you attached to the `onregisterresulttemplates` event in your HTML file. As its name suggests, it lets you register your result templates.
<3> Since you caught the event, stop its propagation.
<4> Register the result template on the result template manager.

### Conclusion: Migrating your search UI logic

The transition from the event-driven model of the Coveo JavaScript Search Framework to the state-based architecture of Atomic, Quantic, and Headless represents a shift not just in framework design but in developer mindset.
Where developers once orchestrated behaviour by listening for and emitting events, they now work with actions and an observable, predictable state.
This new paradigm leads to more maintainable codebases and better aligns developer experience with modern front-end patterns.

When planning a migration, focus on expressing your existing logic using controllers, actions, and state subscriptions rather than trying to map legacy events one-for-one.