Use the Coveo Headless Library

What’s Coveo Headless?

Coveo Headless is a library for developing Coveo-powered UI components. It works as a middle-layer for applications, opening a line of communication between the UI elements and the Coveo Platform. For example, the Coveo Atomic library relies on Headless to handle application state and Coveo Platform interactions.

At its core, Headless consists of an engine whose main property is its state (i.e., a Redux store). The engine’s state depends on a set of features (i.e., reducers). To interact with those features, Headless provides a collection of controllers. For example, to implement a search box UI component, one would use the Headless search box controller, which exposes various methods (updateText, submit, showSuggestion, etc.).

Under the hood, Headless relies on the Coveo Usage Analytics Write API and Coveo Search API for interacting with the Coveo Platform.

Diagram showing where Headless fits with Atomic and the APIs

When Should I Use Headless?

The Headless library wraps the complexity of the Coveo APIs without sacrificing flexibility. It’s usable with any web development framework and it manages the state of your search page for you. It also provides an extendable set of reducers and controllers to ease the implementation of most common search UI features.

If you want to use Coveo to power your own UI component library, then you should definitely consider using Headless. It’s the easiest and least error-prone approach to developing and maintaining a Coveo-powered UI component library.

The following interactive code sample uses Coveo Headless alongside the Material-UI React framework to create a simple search page.

Headless may not be for you if you don’t need full control over the appearance of your page. If you want to quickly assemble a feature-rich search interface, consider using Coveo Atomic, our prebuilt, modern component library.

Additionally, in rare cases you may need to develop directly against the Coveo APIs, such as when you want to integrate Coveo search features inside a non-web-based application.

Where Do I Start?

To learn the basics of the Headless library, see the Usage section.

To create a starter Angular, React, or Vue.js project with a Coveo Headless-powered search page, check out the Coveo CLI.

You may also want to check out the Reference section.

What's Next for Me?