# @elastic/search-ui

> A Headless Search UI library

Latest version **1.24.2** (published 2025-08-04) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @elastic/search-ui
pnpm add @elastic/search-ui
yarn add @elastic/search-ui
bun add @elastic/search-ui
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 1.24.2 |
| Published | 2025-08-04 |
| First published | 2019-01-03 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 98.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1980 |
| Maintainers | jen-huang, delvedor, lukasolson, ccowan, jbudz, thomasneirynck, verogo, weltenwort, pugnascotia, zinckiwi, brandon.kobel, nreese, mgreau, jonahbull, leathekd, lukeelmers, ddillinger, jasonstoltz, bamieh, markov00, joshmock, vignesh.shanmugam, watson, rhodesjason, jmlrt, mattkime, afoucret, nickpeihl, axw, mistic, elasticmachine, gtback, pickypg, trentm, andrewvc-elastic, jorge.sanz, stratoula, nkammah, streamich, nickofthyme, phoey1, breehall, kyrspl, johnwcambra, colleen.mcginnis, legrego, banerjeesoham004, patryk.kopycinski, kibanamachine, tkajtoch, cindy_c, cbishopewc, lenegadewoll, asnyder-elastic, lgestc, weronika-olejniczak, elena-shostak, kc13greiner, yan.savitski, jeramysoucy, miguel-elastic, bradtimmerman, obltmachine, jbwelastic, acstll, bmorelli25, sddonne |

## Links

- npm: https://www.npmjs.com/package/@elastic/search-ui
- Repository: https://github.com/elastic/search-ui
- Homepage: https://docs.elastic.co/search-ui
- Issues: https://github.com/elastic/search-ui/issues
- npm.io page: https://npm.io/package/@elastic/search-ui

## Dependencies (4)

- [qs](https://npm.io/package/qs.md) ^6.9.7
- [history](https://npm.io/package/history.md) ^4.9.0
- [date-fns](https://npm.io/package/date-fns.md) ^1.30.1
- [deep-equal](https://npm.io/package/deep-equal.md) ^1.0.1

## Recent versions

- 1.24.2 (latest) — 2025-08-04
- 1.24.1 — 2025-05-30
- 1.24.0 — 2025-05-28
- 1.23.1 — 2025-04-30
- 1.23.0 — 2025-04-01
- 1.22.2 — 2025-01-06
- 1.22.1 — 2025-01-06
- 1.22.0 — 2024-11-28
- 1.21.5 — 2024-06-06
- 1.21.4 — 2024-05-10
- 1.21.3 — 2024-05-10
- 1.21.2 — 2024-04-26
- 1.21.1 — 2024-03-15
- 1.21.0 — 2024-03-13
- 1.20.2 — 2023-05-09
- … 90 more at https://npm.io/package/@elastic/search-ui/versions

## README

# search-ui

Part of the [Search UI](https://github.com/elastic/search-ui) project.

The "Headless Search UI" that serves as a foundation for the [react-search-ui](../react-search-ui/README.md) library.

If you are not using React, this library can be used in conjunction with
any other framework. Instead of working with components as you do in React, you simply work directly with state and actions. These are documented in the [State](https://docs.elastic.co/search-ui/api/core/state) and [Actions](https://docs.elastic.co/search-ui/api/core/actions) sections of the documentation.

You'll get all of the benefit of Search UI, just with no view. The view is up to you.

## Usage with Elasticsearch Connector

```shell
npm install --save @elastic/search-ui @elastic/search-ui-elasticsearch-connector
```

```js
import { SearchDriver } from "@elastic/search-ui";
import ElasticSearchAPIConnector from "@elastic/search-ui-elasticsearch-connector";

const connector = new ElasticSearchAPIConnector({
  host: "https://your-elasticsearch-host:9243",
  index: "your-index",
  apiKey: "your-api-key" // Optional
});

const config = {
  apiConnector: connector
};

const driver = new SearchDriver(config);

driver.subscribeToStateChanges((state) =>
  console.log(`Received ${state.totalResults} results for your search!`)
);

driver.getActions().setSearchTerm("canyon");

// Received 8 results for your search!
```

## Configuration

All configuration is documented in the [Configuration](https://docs.elastic.co/search-ui/api/core/configuration) section
of the Advanced README.

## SearchDriver Usage

### Methods

| method                    | params   | return                                                        | description                                                          |
| ------------------------- | -------- | ------------------------------------------------------------- | -------------------------------------------------------------------- |
| `subscribeToStateChanges` | function |                                                               | Function to execute when state changes. ex.<br/><br/>`(state) => {}` |
| `getActions`              |          | [Actions](https://docs.elastic.co/search-ui/api/core/actions) | All available actions.                                               |
| `getState`                |          | [State](https://docs.elastic.co/search-ui/api/core/state)     | Current state.                                                       |

---
_Source: https://npm.io/package/@elastic/search-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._