JavaScript Search Framework component equivalences

This is for:

Developer

These tables illustrate how out-of-the-box components in the Coveo Atomic, Headless and Quantic libraries match the functionality of various JavaScript Search Framework 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. If a component is available in Headless but not in Quantic, you can still achieve the functionality by accessing Headless through Quantic.

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 provides the same features as the JavaScript Search Framework QueryDuration and QuerySummary components.

How to read the equivalence tables

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

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

  3. 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.
Tip
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.

JavaScript Search Framework Atomic Quantic Headless

Badge

atomic-result-badge

c-quantic-colored-result-badge

None

FacetsMobileMode

atomic-refine-toggle

c-quantic-refine-toggle

None

Icon

atomic-icon

Use Salesforce lightning component: Lightning:Icon

None

Logo

atomic-icon

None

None

PrintableUri

atomic-result-printable-uri

c-quantic-result-printable-uri

None

SimpleFilter

atomic-popover

c-quantic-sort

None

SmartSnippet

atomic-smart-snippet

c-quantic-smart-snippet

SmartSnippet

SmartSnippetSuggestions

atomic-smart-snippet-suggestions

c-quantic-smart-snippet-suggestions

SmartSnippetQuestionsList
Visual components not carried forward

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.

JSUI component Migration guidance

Backdrop

Use your framework’s modal or overlay components for similar UI effects. The closest alternative is the result section system, particularly the metadata section.

CardActionBar

Follows a similar rationale to the Backdrop component above. In the result section system, the functional equivalent would be the action section. Similarly, for Quantic the functional equivalent is the actions section of the result template component.

CardOverlay

Follows a similar rationale to the Backdrop component above. In the result section system, the functional equivalent would be the bottom metadata section. Similarly, for Quantic the functional equivalent is the metadata section fo the result templates component.

FieldTable

Use custom result templates or table components in your framework. The closest alternative is the result section system, particularly the metadata section. Similarly, for Quantic the functional equivalent is the metadata section of the result template component.

ResultLayoutSelector

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

Implement custom filter preference logic if needed, especially for power users or intranet scenarios.

ResultsPreferences

Use custom settings panels in your UI for advanced user control.

SearchButton

Use your framework’s button components and bind them to search actions.

Settings

Implement custom settings panels as needed, especially for advanced user scenarios.

ShareQuery

Implement sharing features using your framework’s capabilities.

TemplateLoader

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 for Atomic and result templates for Quantic for more details on build templates.

Functional

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

JavaScript Search Framework Atomic Quantic Headless

AdvancedSearch

None

None

AdvancedSearchQuery

AuthenticationProvider

@coveo/auth

@coveo/auth

@coveo/auth

CategoryFacet

atomic-category-facet

c-quantic-category-facet

CategoryFacet

CommerceQuery

atomic-search-box

c-quantic-search-box

SearchBox

DidYouMean

atomic-did-you-mean

c-quantic-did-you-mean

DidYouMean

DynamicFacet

atomic-facet

c-quantic-facet

Facet

DynamicFacetManager

atomic-facet-manager

c-quantic-facet-manager

FacetManager

DynamicFacetRange

atomic-numeric-range

c-quantic-numeric-facet

NumericFacet

DynamicHierarchicalFacet

atomic-category-facet

c-quantic-category-facet

CategoryFacet

ErrorReport

atomic-component-error

c-quantic-query-error

QueryError

Facet

atomic-facet

c-quantic-facet

Facet

FacetRange

atomic-numeric-facet

c-quantic-numeric-facet

NumericFacet

Folding

atomic-folded-result-list

c-quantic-folded-result-list

Folding

HierarchicalFacet

atomic-category-facet

c-quantic-category-facet

CategoryFacet

Omnibox

atomic-search-box

c-quantic-search-box-suggestions-list

SearchBox

Pager

atomic-pager

c-quantic-pager

Pager

PipelineContext

None

None

Context

QueryDuration

atomic-query-summary

c-quantic-summary

QuerySummary

QuerySuggestPreview

atomic-search-box-instant-results

None

InstantResults

QuerySummary

atomic-query-summary

c-quantic-summary

QuerySummary

Recommendation

atomic-recs-list

c-quantic-recommendation-list

RecommendationList

ResultFolding

atomic-folded-result-list

c-quantic-folded-result-list

FoldedResultList

ResultsPerPage

atomic-results-per-page

c-quantic-results-per-page

ResultsPerPage

SearchInterface

atomic-search-interface

c-quantic-search-interface

SearchBox

Sort

atomic-sort-expression

c-quantic-sort-option

Sort

SortDropdown

atomic-sort-dropdown

c-quantic-sort

None

Tab

atomic-tab

c-quantic-tab

Tab

TimespanFacet

atomic-timeframe-facet

c-quantic-timeframe-facet

DateFacet

Triggers

Trigger Methods

Trigger Methods

Trigger Methods
Functional components not carried forward

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.

JSUI component Migration guidance

Aggregate

Use facet or group-by features in your framework to aggregate results as needed.

FollowItem

Add follow or subscription features using custom logic or third-party integrations.

Matrix

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

Atomic and Quantic support Folding natively for similar use cases.

SearchAlerts

Implement notification or alerting features using your framework’s notification system or external integrations.

SearchAlertsMessage

Display alert messages using your framework’s notification or messaging components.

TemplateLoader

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.

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

JavaScript Search Framework Atomic Quantic Headless

Breadcrumb

atomic-breadbox

c-quantic-breadcrumb-manager

BreadcrumbManager

FacetsMobileMode

atomic-refine-toggle

c-quantic-refine-toggle

None

Pager

atomic-pager

c-quantic-pager

Pager

Tab

atomic-tab

c-quantic-tab

Tab
Navigation components not carried forward

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.

JSUI component Migration guidance

ResultLayoutSelector

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.

Notification and alert

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

JavaScript Search Framework Atomic Quantic Headless

PromotedResultsBadge

atomic-result-badge

c-quantic-result-tag

None
Notification and alert components not carried forward

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.

JSUI component Migration guidance

FollowItem

Add follow or subscription features using custom logic or third-party integrations.

SearchAlerts

Provide alerting or notification features using your framework’s notification system or external integrations.

SearchAlertsMessage

Display alert messages using your framework’s notification or messaging components.

Analytics and tracking

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

JavaScript Search Framework Atomic Quantic Headless

Analytics

Usage Analytics

Works in a similar way to Atomic

Usage Analytics

Querybox

atomic-search-box

c-quantic-search-box

SearchBox

QueryDuration

atomic-query-summary

c-quantic-summary

QuerySummary
Analytics and tracking components not carried forward

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.

JSUI component Migration guidance

AnalyticsSuggestions

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.

Template and layout

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

JavaScript Search Framework Atomic Quantic Headless

Excerpt

atomic-result-section-excerpt

c-quantic-result-highlighted-text-field

ResultTemplates

FieldValue

atomic-result-text

c-quantic-result-text

None

ImageFieldValue

atomic-result-image

None

None

PrintableUri

atomic-result-printable-uri

c-quantic-result-printable-uri

None

Quickview

atomic-quickview

c-quantic-result-quickview

Quickview

QuickviewDocument

atomic-quickview

c-quantic-result-quickview

Quickview

ResultActionsMenu

atomic-result-section-actions

c-quantic-result-action

None

ResultLink

atomic-result-link

c-quantic-result-link

InteractiveResult

ResultList

atomic-result-list

c-quantic-recommendation-list

ResultList

ResultRating

atomic-result-rating

None

None

SmartSnippet

atomic-smart-snippet

c-quantic-smart-snippet

SmartSnippet

SmartSnippetSuggestions

atomic-smart-snippet-suggestions

c-quantic-smart-snippet-suggestions

SmartSnippetQuestionsList

StarRating

atomic-result-rating

None

None

Text

atomic-text

Use Salesforce custom labels: Custom labels

None

Thumbnail

atomic-result-image

Use custom templates with: c-quantic-result

None

YouTubeThumbnail

atomic-result-image

Use custom templates with: c-quantic-result

None
Template and layout components not carried forward

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.

JSUI component Migration guidance

FieldTable

Use custom result templates or table components in your framework. The closest alternative is the result section system, particularly the metadata section.

ResultLayoutSelector

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

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.