v0.1.14
Drop-in search widget

Smart search box,
zero extra roundtrips.

Client-side synonym expansion and Unicode normalization for en-US and pt-BR — query enhanced before it leaves the browser. One HTTP call per search. Works with any framework.

Query enhancement (client-side, before sending to Vectoria)

Original: — → Sent to server: —

Live demo connects to demo.vectoriasearch.com — 550 real products (Amazon ESCI dataset).
API key shown is the public demo key. Deploy your own →

⚡

Zero extra roundtrips

Query expansion runs synchronously in JS. Vectoria receives one enhanced request.

🌎

pt-BR + en-US

Built-in synonym dictionaries for both locales. Add your own per-domain terms.

🧩

Any framework

Web Component works natively in React, Vue, Svelte, Angular, and plain HTML.

🎨

CSS custom properties

Theme with CSS variables. Override colors, radius, font, shadow — no JS needed.

Embed in 5 lines

<!-- 1. Load the widget -->
<script src="https://vectoriasearch.com/search-widget/vectoria-search.js"></script>

<!-- 2. Mount target -->
<div id="search"></div>

<!-- 3. Init -->
<script>
VectoriaSearch.init({
  container: '#search',
  url:       'https://your-vectoria-server.com',
  apiKey:    'your-api-key',
  locale:    'pt-BR',       // or 'en-US'
  mode:      'hybrid',
  limit:     10,
});
</script>
<script src="vectoria-search.js"></script>

<!-- Works in any framework that supports Web Components -->
<vectoria-search
  url="https://your-vectoria-server.com"
  api-key="your-api-key"
  locale="pt-BR"
  mode="hybrid"
  limit="10"
></vectoria-search>

<script>
// Listen for selection events
document.querySelector('vectoria-search')
  .addEventListener('vs-select', (e) => {
    window.location.href = `/products/${e.detail.id}`;
  });
</script>
// App.jsx — React 18+
import { useEffect, useRef } from 'react';
import VectoriaSearch from 'vectoria-search';

export function SearchBar({ onSelect }) {
  const ref = useRef(null);

  useEffect(() => {
    const widget = VectoriaSearch.init({
      container: ref.current,
      url:       'https://your-server.com',
      apiKey:    process.env.REACT_APP_API_KEY,
      locale:    'pt-BR',
      onSelect:  (hit) => onSelect(hit),
    });
    return () => widget.destroy();
  }, []);

  return <div ref={ref} />;
}
<!-- SearchBar.vue -->
<template>
  <div ref="mount"></div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import VectoriaSearch from 'vectoria-search';

const mount = ref(null);
let widget;

onMounted(() => {
  widget = VectoriaSearch.init({
    container: mount.value,
    url:       'https://your-server.com',
    apiKey:    import.meta.env.VITE_API_KEY,
    locale:    'pt-BR',
  });
});
onUnmounted(() => widget?.destroy());
</script>

View source on GitHub →  ·  ← Back to vectoriasearch.com