Integrations
Drop ZBSearch into an existing framework or documentation site.
Plugins extend the ZBSearch engine. Integrations do the opposite: they take the engine as it is and wire it into somewhere you already work, so that adding search is a matter of installing a package rather than building a UI.
Everything here runs entirely in the visitor's browser. There is no server to run, no index to host, and no query ever leaves the page.
Available integrations
| Package | What it does |
|---|---|
@zbsearch/plugin-docusaurus | Makes ZBSearch the search engine of a Docusaurus site |
@zbsearch/plugin-starlight | Makes ZBSearch the search engine of an Astro Starlight site |
@zbsearch/plugin-vitepress | Makes ZBSearch the search engine of a VitePress site |
@zbsearch/searchbox-react | The React search dialog, usable on its own |
@zbsearch/searchbox-vue | The same dialog for Vue |
@zbsearch/docs-index | Turns markdown into an index, and queries it |
@zbsearch/highlight | Highlights and trims matches inside a text |
They build on each other. The framework plugins index your content with docs-index and render one of the
search boxes, which highlight matches with highlight. The React and Vue boxes are thin layers over a
shared core, so the three integrations behave identically. You only need to reach for the lower layers when
you are assembling your own search experience.
Which one do I want?
Pick the plugin for your framework - Docusaurus, Starlight or VitePress. Each indexes your content at build time and replaces the built-in search; nothing else is required.
If you run another documentation framework, @zbsearch/docs-index
does the indexing and querying, leaving you to wire it into your framework's build.
If you run any other application, build an index however you like and hand the results to
@zbsearch/searchbox-react or
@zbsearch/searchbox-vue. Both are engine-agnostic: they render
whatever your searcher function resolves to.
If you already have a UI and only need to mark up matches, use
@zbsearch/highlight on its own.