@nosto/search-js

    @nosto/search-js

    Search JS

    Nosto Search JS is an implementation of Nosto Search. In addition to the base search functionality, it also provides the following features:

    • Currency formatting: Format prices based on Nosto settings.
    • Product thumbnails: Thumbnail resizing.
    • Retry logic: Retry failed search queries automatically.
    • Preact components: Build modern search interfaces.
    • Autocomplete: Fast and responsive autocomplete tools.
    • Category search: Display and filter by categories.
    • SERPs: Build search result pages with sorting and pagination.
    • Utilities: Helpers for common tasks like array or object merging and equality checks.
    • Infinite scroll: Loads more components upon scrolling to the end of results.

    To install the package, use your preferred package manager:

    yarn add @nosto/search-js
    # or
    npm install @nosto/search-js --save

    Read Nosto Techdocs for more information on how to use the library.

    Library TypeDoc page includes detailed library helpers documentation and examples.

    The core package provides the foundational functionality for interacting with Nosto Search. It includes utilities for managing search queries, applying decorators, and handling search results.


    The currencies package provides utilities for formatting monetary values and decorating search results with price information.


    The preact/autocomplete package helps you add autocomplete functionality to your search interface.

    The preact/category package provides tools to show and interact with category-based search results.

    The preact/common package includes shared components that are used across other preact packages.

    The preact/hooks package offers hooks to manage state and actions in your search app.

    The preact/serp package provides tools to create Search Engine Results Pages (SERPs) with features like pagination, sorting, and displaying results.

    The preact/legacy package is designed to provide backward compatibility for existing Search Template implementations.

    The components included in this package are intended solely for compatibility purposes. They are not recommended for use in new development or as active components in modern applications.

    The thumbnails package helps you resize thumbnails. It supports different formats, including Shopify and Nosto-specific ones.


    The utils package includes handy tools for common tasks like array or object merging, checking equality, and generating unique values.

    To set up the development environment:

    # Install dependencies
    npm ci

    # Install dev app dependencies
    cd dev/preact && npm ci && cd ../..
    # Build all packages
    npm run build

    This compiles TypeScript, bundles with Vite, and generates documentation in the docs/ directory.

    # Run all tests with coverage
    npm test

    # Run tests in watch mode
    npm run test:watch
    # Check code style
    npm run lint

    # Auto-fix linting issues
    npm run lint-fix
    # Start development environment (library watch + dev app)
    npm run dev

    The development app runs at http://localhost:8000/ and provides a testing environment for the library components.

    MMNEPVFCICPMFPCPTTAAATR