Algolia Search with Svelte Algolia InstantSearch with Svelte 3 259 words. By Jeff Delaney Created Aug 25, 2019 Last Updated Aug 25, 2019 Code Slack #svelte #algolia 👀 This tutorial is an extension of the [Algolia Cloud Functions Guide](/lessons/algolia-cloud-functions/). You must have the Cloud Functions deployed to start making instant search queries from your frontend app. Install Algolia Algolia does not provide official support for Svelte, but we can easily implement our own custom UI with AlgoliaSearch. Note. You can also use InstantSearch.js if you want pre-built components. command line npm install algoliasearch Update the index.html The Algolia client makes a reference to process, which does not exist in the browser. Add the code below to prevent errors. file_type_html public/index.html <title>Svelte app</title> <!-- ADD THIS LINE --> <script>window.process = {env: { DEBUG: undefined } }</script> Svelte Algolia Search Component The component below initializes the AlgoliaSearch lite, then binds a request to each keyup event on a form input. Algolia returns an object with the resulting hits, which are updated on the component’s hit property. Search.svelte <script> import { onMount } from 'svelte'; import algoliasearch from 'algoliasearch/lite'; let searchClient; let index; let query = ''; let hits = []; onMount(() => { searchClient = algoliasearch( 'YOUR-APP-ID', 'YOUR-SEARCH-ONLY-KEY' ); index = searchClient.initIndex('customers'); // Warm up search index.search({ query }).then(console.log) }); // Fires on each keyup in form async function search() { const result = await index.search({ query }); hits = result.hits; console.log(hits) } </script> <style> :global(em) { color: red; font-weight: bold; background: black; } </style> <h1>Svelte InstantSearch</h1> <div> <input type="text" bind:value={query} on:keyup={search}> </div> {#each hits as hit} <img src={hit.avatar} alt={hit.username}> <section> <h3>{hit.username} {hit.objectID}</h3> <!-- <p>{hit.bio}</p> --> <p contenteditable bind:innerHTML={hit._highlightResult.bio.value}></p> </section> {/each} Demo of Algolia Search in Svelte 3