Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.hibonsai.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Bonsai Search SDK

Current channel: https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-latest.js (and bonsai-searchbar-webcomponent-latest.js). The -latest.js alias always serves the current stable release — no URL change is required to get new versions.
The authoritative SDK changelog lives in the repo at sdk/CHANGELOG.md. The entries below summarize the changes most likely to affect your integration.

​
v3.2.0 — 2026-02-25 — CSS Variables Become the Styling Model

Breaking change. Attribute-based theming was removed in favor of CSS custom properties. This is the biggest integration-facing change in the 3.x line.

​
What changed

  • Attributes like brand-color, text-color, muted-color, input-bg, card-bg, surface-color, canvas-color, input-text-color, suggestions-text-color, results-text-color, card-text-color, suggestions-hover-bg are no longer observed by <bonsai-search> or <bonsai-searchbar>. Setting them has no effect.
  • All visual customization is now driven by CSS custom properties on the host element (or an ancestor) — see Advanced Styling.
  • The web components now render an outer alignment container and an inner max-width container (bonsai-search-outer-container / bonsai-search-inner-container, bonsai-searchbar-outer-container / bonsai-searchbar-inner-container) so you can control centering and width independently via --bonsai-search-align / --bonsai-searchbar-align and --bonsai-search-max-width / --bonsai-searchbar-max-width.
  • --bonsai-searchbar-margin added so vertical searchbar spacing is configurable.
  • theme="light" | "dark" | "auto" support added (was previously light only in some paths).
  • Framer and Webflow integrations now set CSS variables directly for theming.

​
How to migrate

Replace each removed attribute with the equivalent CSS variable on the host element:
Old attributeNew CSS variable
brand-color--bonsai-brand-color
text-color--bonsai-text-color
muted-color--bonsai-muted-color
input-bg--bonsai-input-bg
card-bg--bonsai-card-bg
surface-color--bonsai-surface-color
canvas-color--bonsai-canvas-color
input-text-color--bonsai-input-text-color
suggestions-text-color--bonsai-suggestions-text-color
results-text-color--bonsai-results-text-color
card-text-color--bonsai-card-text-color
suggestions-hover-bg--bonsai-suggestions-hover-bg
input-opacity--bonsai-input-opacity
<!-- Before (v3.0.x) -->
<bonsai-search api-key="..." brand-color="#0A5B3B" text-color="#303030"></bonsai-search>

<!-- After (v3.2+) -->
<style>
  bonsai-search {
    --bonsai-brand-color: #0A5B3B;
    --bonsai-text-color: #303030;
  }
</style>
<bonsai-search api-key="..."></bonsai-search>

​
JavaScript BonsaiSearchBar class

If you instantiate the class directly with new BonsaiSearchBar({...}), styling props were removed as well:
  • brandColor → --bonsai-brand-color
  • textColor → --bonsai-text-color
  • mutedColor → --bonsai-muted-color
  • inputBackground / inputBg → --bonsai-input-bg
  • suggestionsTextColor → --bonsai-suggestions-text-color
  • inputTextColor → --bonsai-input-text-color
  • suggestionsHoverBg → --bonsai-suggestions-hover-bg
  • inputOpacity → --bonsai-input-opacity

​
Runtime Config from the Settings API

Both <bonsai-search> and <bonsai-searchbar> fetch per-tenant configuration from /rest/search-component-config/ at load time using your api-key. The Settings API can drive:
  • Theming (colors, alignment, max width)
  • Default placeholder and suggestions
  • Behavior toggles (theme, markdown rendering, price rendering, product hiding, autocomplete)
  • Result section labels (featured_items_label, more_items_label, items_label)
Precedence (highest to lowest):
  1. HTML attribute on the tag (if set)
  2. Settings API response for this API key
  3. Built-in default
Page CSS for --bonsai-* variables overrides both, because Settings-API variables are injected at low :host { ... } specificity.

​
New <bonsai-search> capabilities

  • hide-products — boolean attribute that hides product results so only the AI summary is shown. Useful for conversational integrations.
  • on-price — name of a global function used to format prices before rendering. Receives (result, price, parent) and returns the string to display.

​
Upgrading

If you pin a version in your script URL (bonsai-search-webcomponent-<version>.js), switch to the -latest.js alias to always get the current stable release. No other change is required unless your integration still sets removed color attributes — in that case, move them to CSS custom properties per the table above. For the full release history (including pre-3.2 entries), see sdk/CHANGELOG.md in the Bonsai repository.