--- title: Choose the right approach slug: '3368' canonical_url: https://docs.coveo.com/en/3368/ collection: build-a-search-ui source_format: adoc --- # Choose the right approach Coveo provides a number of frameworks and REST APIs to build a [search interface](https://docs.coveo.com/en/2741/). Which framework or REST API is the best for you depends on your business needs, desired performance, complexity, etc. Regardless of the framework you choose, [management of security identities](https://docs.coveo.com/en/1905/) is the same. Learn how security identities are handled in a [basic](https://docs.coveo.com/en/1749/) or [typical](https://docs.coveo.com/en/1863/) secured search scenario. > **Note** > > The options on this page are relevant only if you're using the [Coveo Platform](https://docs.coveo.com/en/186/) directly. > If you're using a specific [integration](https://docs.coveo.com/en/1495/), refer to its specific documentation instead. > See Coveo for [Salesforce](https://docs.coveo.com/en/1243/), [Commerce](https://docs.coveo.com/en/1499/), [Adobe](https://docs.coveo.com/en/l2mf0521/), [ServiceNow](https://docs.coveo.com/en/1479/), [Sitecore](https://docs.coveo.com/en/2709/), or [Zendesk](https://docs.coveo.com/en/3420/). ## Which is the best one? [TIP.disclaimer] #### These two diagrams show that [Atomic](#atomic-library) might be the best choice if performance, development speed, and customization are equally important for you. To quickly create a simple search interface, such as for test or demo purposes, the [search interface builder](#search-interface-builder), which uses the Atomic library, is an ideal, codeless alternative. #### !["Diagram showing relations between development time and performance for the search interface builder](build-a-search-ui/ui-frameworks-ux-customization.png) !["Diagram showing relations between development time and UI/UX customization for the Atomic](build-a-search-ui/ui-frameworks-development-time.png) ## Self-hosted vs. Coveo Hosted Depending on the needs of your organization, Coveo offers you the option to self-host your search page internally or to have Coveo host your search page for you. This section will highlight the pros and cons of each approach to help you decide which option best meets your needs. ### Self-hosted search page Coveo provides a number of ways to build your own custom search pages, whether it be through the [Atomic](https://docs.coveo.com/en/lcdf0264/) or [Headless](https://docs.coveo.com/en/lcdf0493/) libraries or building a completely custom implementation with [Rest APIs](https://docs.coveo.com/en/na2g0545/). These options will allow you to create a solution tailored to your needs, from controlling the entire look and feel of the implementation to custom built API solutions. Using a self-hosted page gives you the most control over the user experience on your site. |=== |Pros |Cons |Allows flexibility in customization. |Programming skills required. |Complete control over development life-cycle. |Advanced implementations can require longer development cycles. |Earlier access to the latest features. |Sharing must be manually implemented. |=== ### Coveo-hosted search page You can use the [**Search Pages**](https://platform.cloud.coveo.com/admin/#/orgid/search/search-pages/) ([platform-ca](https://platform-ca.cloud.coveo.com/admin/#/orgid/search/search-pages/) | [platform-eu](https://platform-eu.cloud.coveo.com/admin/#/orgid/search/search-pages/) | [platform-au](https://platform-au.cloud.coveo.com/admin/#/orgid/search/search-pages/)) panel to create search pages hosted by Coveo with the [Search page builder](https://docs.coveo.com/en/na2g0545/). Coveo-hosted search pages are immediately fully operational, which means that you can use and share them as soon as they're created. This no-code option allows you to create a simple search page in a matter of minutes without having to host any resources. The customization options for this approach are limited, but it's the fastest way to get started with Coveo search. Using a Coveo-hosted page can also be a useful tool for adding Coveo search to your site quickly while you develop a self-hosted solution. See [Create and manage hosted search pages with the search page builder](https://docs.coveo.com/en/na2g0545/). |=== |Pros |Cons |Requires no programming skills. |Limited UI/UX customization. |Lets you create a basic [search interface](https://docs.coveo.com/en/2741/) within minutes. | |Opt-in sharing of your search pages. | |=== ## The comparison matrix The following matrix presents an in-depth comparison of the tools that we provide. [TIP.disclaimer] #### The stars in this table are score points. The higher, the better. The bottom row shows the total score for each tool. #### |=== | |Search interface builder |Atomic |Headless |JS Search Framework |REST API |Programming Skills Required |None ⭐⭐⭐ |Low ⭐⭐⭐ |Medium ⭐⭐ |Low ⭐⭐⭐ |High ⭐ |Performance |High ⭐⭐ |High ⭐⭐ |High ⭐⭐ |Medium ⭐ |N/A — |Bundle Size |N/A — |Light ⭐⭐ |Light ⭐⭐ |Heavy ⭐ |N/A — |Pre-built Components |Yes ⭐ |Yes ⭐ |No — |Yes ⭐ |No — |Server-side Rendering |No — |No — |Yes ⭐ |No — |N/A — |UI/UX Customization |Low ⭐ |Medium ⭐⭐ |High ⭐⭐⭐ |Low ⭐ |High ⭐⭐⭐ |Analytics |Included ⭐ |Included ⭐ |Included ⭐ |Included ⭐ |Excluded / DIY — |Under active development |Yes ⭐ |Yes ⭐ |Yes ⭐ |No — |Yes ⭐ |Time to Build a Search Interface |Minutes ⭐⭐⭐ |Days ⭐⭐⭐ |Days to Weeks ⭐⭐ |Days ⭐⭐⭐ |Months ⭐ |Score |12 pts |**15 pts** |14 pts |11 pts |6 pts |=== See the dedicated sections below for details on each approach. ## Combine frameworks Technically, you can use two frameworks simultaneously. For example, this might come in handy if you want to gradually migrate from JS Search Framework to Atomic. > **JS Search Framework vs Atomic and Headless** > > Your interface can be built with: > > * the JavaScript Search Framework > > * Atomic > > * Headless > > * combination of Atomic and Headless > > Don't use the JavaScript Search Framework with other frameworks unless absolutely required. > By doing so, you're likely to face issues with inconsistency in the long term. > > To migrate from the JavaScript Search Framework to either Atomic or Headless, you have to rewrite the existing portions of the code with the new framework. All frameworks either wrap the Coveo REST APIs directly or wrap a framework that does. It's safe to use a given framework in conjunction with a tool from the same hierarchy, for example, Atomic and Headless or Atomic and REST APIs. The diagram below shows how frameworks relate to each other: ![Diagram showing how Coveo UI frameworks and REST API relate to each other](build-a-search-ui/ui-frameworks-relationships.png) ## Search interface builder Coveo's search interface builder is available via the [**Search Pages**](https://platform.cloud.coveo.com/admin/#/orgid/search/search-pages/) ([platform-ca](https://platform-ca.cloud.coveo.com/admin/#/orgid/search/search-pages/) | [platform-eu](https://platform-eu.cloud.coveo.com/admin/#/orgid/search/search-pages/) | [platform-au](https://platform-au.cloud.coveo.com/admin/#/orgid/search/search-pages/)) page of the [Administration Console](https://docs.coveo.com/en/183/) and works with the [Atomic library](#atomic-library). It allows you to create a simple search interface in a couple of minutes without writing any code. Search pages created with the builder are hosted by Coveo. Once you've created your search page, you can [deploy it to your site](https://docs.coveo.com/en/na2g0545#deploy-a-hosted-search-page-overview). The [hosted search pages](https://docs.coveo.com/en/2866/) are also useful tools for testing or demonstration purposes while building out your Coveo search solution. You can share links to these hosted search pages with anyone, even people who don't have access to the Coveo Administration Console. To create a custom search interface, however, you should opt for [Atomic](#atomic-library) or another library or framework. |=== |Pros |Cons |Requires no programming skills. |Limited UI/UX customization. |Allows you to create a basic search interface within minutes. | |=== ## Atomic library The [Coveo Atomic library](https://docs.coveo.com/en/lcdf0264/) is a collection of pre-built UI components meant to quickly create product discovery interfaces. You can theme and customize the Atomic components to suit your needs. Under the hood, Atomic relies on the [Coveo Headless](https://docs.coveo.com/en/lcdf0493/) library to interface with Coveo and handle the application state. For more information, see [Atomic for commerce](https://docs.coveo.com/en/p8bd0068/). See [Use the Atomic Library](https://docs.coveo.com/en/atomic/latest/) for details. |=== |Pros |Cons |Requires minimal programming skills. |Coupling between the UI and business logic. |Faster to build than the JavaScript Search Framework. | |Both browser and mobile compatible. | |Lightweight and higher performance than the JavaScript Search Framework. | |Extendable through custom components. | |=== > **Important** > > Atomic for Commerce components are in open beta and remain under active development. > > Atomic for Commerce hasn't yet gone through a formal accessibility review. > If you have accessibility needs, contact your customer success manager and we'll work with you to address them. ## Headless library The Headless library is a Redux-based toolset for developing your own search UI component libraries. It provides the underlying functionality of the Atomic library or of the JavaScript Search Framework without tying that functionality to a specific UI implementation. See [Use the Headless Library](https://docs.coveo.com/en/headless/latest/) for details. |=== |Pros |Cons |Usable in any environment that can run JavaScript. |Requires advanced programming skills. |Extendable through custom middlewares and reducers. | |=== ## JavaScript Search Framework > **Note** > > This framework is in maintenance mode. The JavaScript Search Framework is a UI component library that you can use to assemble feature-rich search interfaces. It's both customizable and extendable to suit your individual use cases. See [Use the JavaScript Search Framework (Legacy)](https://docs.coveo.com/en/375/) for details. |=== |Pros |Cons |Customizable through styling. |Only suitable for building web-based search UIs. |Extendable through custom components. |Strong coupling between UI and logic layers. |=== ## REST APIs The Atomic and Headless libraries, as well as the JavaScript Search Framework, are built on top of the Coveo REST APIs. Those APIs are publicly documented, and you can develop directly against them to integrate Coveo search features in an environment that can't run JavaScript. See [Use the REST APIs to build a search UI](https://docs.coveo.com/en/1370/) for details. |=== |Pros |Cons |Flexible. |Complex. |Lets you build a Coveo-powered search UI in an environment that can't run JavaScript. |Error-prone. |===