CINXE.COM

<!DOCTYPE html> <html lang='en'> <head> <title>React InstantSearch Reference | Algolia</title> <meta content='Explore the React InstantSearch API.' name='description'> <meta content='width=device-width, initial-scale=1.0' name='viewport'> <meta content='ie=edge' http-equiv='X-UA-Compatible'> <meta charset='utf-8'> <link crossorigin href='https://B1G2GM9NG0-dsn.algolia.net' rel='preconnect'> <link as='style' href='/doc/assets/stylesheets/fonts-b49e8aae.css' rel='preload'> <link href='/doc/assets/stylesheets/fonts-b49e8aae.css' rel='stylesheet'> <link href='/doc/assets/stylesheets/main-aad37cfa.css' rel='stylesheet'> <meta content='summary' name='twitter:card'> <meta content='@algolia' name='twitter:site'> <meta content='React InstantSearch Reference | Algolia' name='twitter:title'> <meta content='Explore the React InstantSearch API.' name='twitter:description'> <meta content='https://www.algolia.com/doc/api-reference/widgets/react/' property='og:url'> <meta content='website' property='og:type'> <meta content='React InstantSearch Reference | Algolia' property='og:title'> <meta content='Explore the React InstantSearch API.' property='og:description'> <meta content='Algolia Documentation' property='og:site_name'> <link href='/doc/assets/images/favicon/favicon-50d8e9ee.ico' rel='icon' sizes='any'> <link href='/doc/assets/images/favicon/favicon-0ac64a15.svg' rel='icon' type='image/svg+xml'> <link href='/doc/assets/images/favicon/apple-touch-icon-5bd129f5.png' rel='apple-touch-icon'> <link href='/doc/assets/images/favicon/site.webmanifest' rel='manifest'> <link href='https://www.algolia.com/doc/api-reference/widgets/react/' rel='canonical'> <script src='https://cdn.cookielaw.org/consent/5e9f5149-bde8-4a13-b973-b7a9385e8ebb/OtAutoBlock.js' type='text/javascript'></script> <script charSet='UTF-8' data-domain-script='5e9f5149-bde8-4a13-b973-b7a9385e8ebb' src='https://cdn.cookielaw.org/scripttemplates/otSDKStub.js' type='text/javascript'></script> <script type='text/javascript'> function OptanonWrapper() { } </script> </head> <body class='relative bg-x-gradient-grey-200-grey-200-50-white-50' data-controller='app'> <div class='flex flex-col min-h-screen text-base font-sans'> <header class='header fixed top-0 lg:z-40 z-20 bg-white w-full font-sans-alt' data-action='resize@window->header#closeDropdownOnMediumScreens' data-controller='header'> <div class='fixed top-0 z-50 flex w-full pointer-events-none h-72'> <div class='header-border absolute right-0 w-half h-full'></div> </div> <div class='flex max-w-1440 mx-auto'> <div class='header-logo flex-shrink-0 w-376 py-24 px-40 lg:block hidden' data-header-logo=''> <a class='block h-24 max-w-200 -mt-8 mb-8' href='/doc/'> <svg fill="none" height="50" width="128" xmlns="http://www.w3.org/2000/svg"><g fill="#003dff"><path clip-rule="evenodd" d="M61.897 16.847V1.27c0-.21-.187-.37-.394-.337l-2.918.46a.342.342 0 0 0-.289.337l.01 15.8c0 .747 0 5.36 5.55 5.521a.342.342 0 0 0 .352-.341V20.35a.338.338 0 0 0-.296-.337c-2.015-.232-2.015-2.751-2.015-3.165z" fill-rule="evenodd"/><path d="M110.02 6.984h-2.936a.342.342 0 0 0-.342.342v15.387c0 .189.153.342.342.342h2.936a.34.34 0 0 0 .341-.341V7.325a.34.34 0 0 0-.341-.342z"/><g clip-rule="evenodd" fill-rule="evenodd"><path d="M107.084 5.055h2.936a.341.341 0 0 0 .341-.341V1.269c0-.21-.188-.37-.395-.337l-2.936.46a.34.34 0 0 0-.288.337v2.985c0 .188.153.341.341.341zM102.009 16.847V1.27c0-.21-.187-.37-.394-.337l-2.918.46a.342.342 0 0 0-.289.337l.01 15.8c0 .747 0 5.36 5.55 5.521a.342.342 0 0 0 .352-.341V20.35a.338.338 0 0 0-.296-.337c-2.015-.232-2.015-2.751-2.015-3.165zM94.371 9.18a6.555 6.555 0 0 0-2.358-1.636c-.92-.378-1.923-.57-3.01-.57-1.087 0-2.091.183-3.003.57a6.907 6.907 0 0 0-2.357 1.637c-.664.707-1.179 1.554-1.548 2.546-.369.993-.534 2.161-.534 3.375s.184 2.132.552 3.135c.37 1.001.876 1.856 1.53 2.565a6.856 6.856 0 0 0 2.348 1.646c.911.395 2.32.597 3.03.606.708 0 2.127-.221 3.047-.606a6.711 6.711 0 0 0 2.358-1.646c.653-.709 1.16-1.564 1.518-2.565.36-1.003.535-1.921.535-3.135s-.193-2.382-.58-3.375c-.37-.993-.876-1.839-1.529-2.546zm-2.569 9.47c-.663.91-1.594 1.37-2.78 1.37-1.19 0-2.119-.45-2.782-1.37-.664-.91-.995-1.967-.995-3.539 0-1.555.323-2.842.986-3.751.662-.911 1.593-1.36 2.78-1.36 1.188 0 2.118.45 2.78 1.36.664.9 1.005 2.196 1.005 3.751 0 1.572-.331 2.62-.994 3.54zM51.722 6.984h-2.853c-2.796 0-5.257 1.474-6.693 3.707a8.393 8.393 0 0 0-1.33 4.553 8.334 8.334 0 0 0 2.984 6.425c.169.15.35.288.538.412a4.654 4.654 0 0 0 2.787.774l.062-.004c.05-.003.101-.006.152-.011l.059-.007.158-.02.036-.006c1.902-.293 3.56-1.782 4.1-3.632v3.344c0 .189.152.341.341.341h2.916a.341.341 0 0 0 .34-.34V7.325a.341.341 0 0 0-.34-.342zm0 11.966c-.706.588-1.618.808-2.593.874l-.028.003c-.065.004-.13.006-.195.006-2.442 0-4.46-2.076-4.46-4.59 0-.593.114-1.157.314-1.676.649-1.684 2.242-2.876 4.11-2.876h2.852zM123.402 6.984h-2.853c-2.796 0-5.257 1.474-6.693 3.707a8.39 8.39 0 0 0-1.33 4.553 8.332 8.332 0 0 0 2.984 6.425c.169.15.35.288.538.412a4.656 4.656 0 0 0 2.787.774l.062-.004c.051-.003.101-.006.152-.011l.059-.007.158-.02.036-.006c1.902-.293 3.56-1.782 4.1-3.632v3.344c0 .189.153.341.341.341h2.916a.341.341 0 0 0 .341-.34V7.325a.341.341 0 0 0-.341-.342zm0 11.966c-.705.588-1.617.808-2.593.874l-.028.003c-.065.004-.13.006-.195.006-2.442 0-4.459-2.076-4.459-4.59 0-.593.113-1.157.313-1.676.649-1.684 2.242-2.876 4.109-2.876h2.853zM75.988 6.984h-2.853c-2.796 0-5.257 1.474-6.693 3.707a8.367 8.367 0 0 0-1.33 4.553c0 .316.018.645.054.96a8.314 8.314 0 0 0 2.93 5.465c.17.15.35.288.538.413a4.654 4.654 0 0 0 5.36-.145c.942-.67 1.67-1.65 1.993-2.76v2.906h-.006v.64c0 1.263-.33 2.213-1.003 2.855-.671.64-1.795.961-3.368.961-.643 0-1.665-.034-2.695-.139a.343.343 0 0 0-.362.244l-.74 2.493c-.058.2.074.406.28.435 1.244.179 2.459.271 3.16.271 2.828 0 4.925-.622 6.297-1.863 1.242-1.122 1.917-2.827 2.036-5.118V7.327a.341.341 0 0 0-.342-.341h-3.257zm0 3.707s.038 8.046 0 8.29c-.699.565-1.568.786-2.515.85-.01 0-.019.002-.028.003a4.212 4.212 0 0 1-.422 0c-2.337-.122-4.31-2.155-4.31-4.59 0-.593.114-1.158.314-1.676.649-1.684 2.242-2.877 4.109-2.877h2.853z"/></g><path d="M14.447.928C6.552.928.115 7.294.002 15.162c-.116 7.991 6.367 14.613 14.36 14.66 2.468.014 4.845-.59 6.957-1.737a.338.338 0 0 0 .062-.55l-1.352-1.198a.955.955 0 0 0-1.004-.17 11.677 11.677 0 0 1-4.725.928c-6.458-.08-11.676-5.453-11.573-11.91.102-6.376 5.32-11.532 11.72-11.532h11.72v20.834l-6.65-5.909a.49.49 0 0 0-.718.076 5.448 5.448 0 0 1-4.737 2.16c-2.68-.186-4.85-2.343-5.051-5.02a5.458 5.458 0 0 1 5.436-5.872 5.46 5.46 0 0 1 5.43 4.97.971.971 0 0 0 .32.644l1.732 1.535a.338.338 0 0 0 .556-.19 8.21 8.21 0 0 0 .12-2.078c-.279-4.067-3.574-7.34-7.643-7.59-4.665-.288-8.566 3.362-8.69 7.936-.12 4.459 3.532 8.302 7.991 8.4a8.131 8.131 0 0 0 4.982-1.558l8.689 7.703c.372.33.96.066.96-.432V1.475a.548.548 0 0 0-.548-.548h-13.9zM4.12 46.04v-1.32h1.51c.38 0 .717-.057 1.01-.17.3-.12.553-.287.76-.5s.363-.463.47-.75a2.67 2.67 0 0 0 .17-.97 2.65 2.65 0 0 0-.17-.98c-.107-.293-.263-.543-.47-.75s-.46-.363-.76-.47a2.945 2.945 0 0 0-1.01-.16H4.12v-1.32h1.42c.66 0 1.237.097 1.73.29s.903.46 1.23.8c.327.333.57.717.73 1.15.167.427.25.87.25 1.33v.22c0 .44-.083.873-.25 1.3-.16.427-.403.813-.73 1.16s-.737.623-1.23.83-1.07.31-1.73.31zm-1.22 0v-7.39h1.42v7.39zm13.782.15c-.66 0-1.234-.117-1.72-.35a3.668 3.668 0 0 1-1.2-.91 4.196 4.196 0 0 1-.71-1.22 3.852 3.852 0 0 1-.23-1.27v-.22c0-.447.08-.89.24-1.33.16-.447.4-.85.72-1.21.326-.36.73-.647 1.21-.86.48-.22 1.043-.33 1.69-.33.64 0 1.2.11 1.68.33.48.213.88.5 1.2.86.326.36.57.763.73 1.21.16.44.24.883.24 1.33v.22c0 .407-.08.83-.24 1.27-.154.433-.39.84-.71 1.22a3.535 3.535 0 0 1-1.2.91c-.48.233-1.047.35-1.7.35zm0-1.32c.373 0 .706-.067 1-.2.3-.133.553-.317.76-.55.213-.24.373-.51.48-.81.113-.307.17-.63.17-.97 0-.367-.057-.703-.17-1.01a2.213 2.213 0 0 0-.48-.8c-.207-.227-.46-.403-.76-.53s-.634-.19-1-.19c-.374 0-.71.063-1.01.19s-.557.303-.77.53a2.415 2.415 0 0 0-.48.8c-.107.307-.16.643-.16 1.01 0 .34.053.663.16.97.113.3.273.57.48.81.213.233.47.417.77.55s.636.2 1.01.2zm11.012 1.32c-.66 0-1.227-.117-1.7-.35s-.86-.537-1.16-.91c-.293-.373-.51-.78-.65-1.22s-.21-.863-.21-1.27v-.22c0-.453.07-.9.21-1.34.147-.44.37-.84.67-1.2s.68-.647 1.14-.86c.467-.22 1.017-.33 1.65-.33.66 0 1.233.12 1.72.36.493.233.887.567 1.18 1 .293.427.47.927.53 1.5h-1.43a1.72 1.72 0 0 0-.36-.84 1.624 1.624 0 0 0-.69-.52 2.39 2.39 0 0 0-.95-.18c-.36 0-.68.063-.96.19-.28.12-.513.293-.7.52s-.33.493-.43.8c-.093.307-.14.647-.14 1.02 0 .36.047.693.14 1 .1.307.247.577.44.81.193.227.43.403.71.53.287.127.617.19.99.19.547 0 1.007-.133 1.38-.4.38-.273.61-.653.69-1.14h1.43c-.067.52-.243.997-.53 1.43s-.68.78-1.18 1.04-1.097.39-1.79.39zm10.208 0c-.68 0-1.253-.13-1.72-.39s-.823-.623-1.07-1.09c-.24-.473-.36-1.027-.36-1.66V38.7h1.42v4.43c0 .347.067.653.2.92.134.26.327.463.58.61.26.14.577.21.95.21.367 0 .677-.07.93-.21.26-.147.454-.35.58-.61.134-.26.2-.567.2-.92V38.7h1.42v4.35c0 .633-.12 1.187-.36 1.66-.233.467-.583.83-1.05 1.09s-1.04.39-1.72.39zm7.293-.19v-7.3h1.94l1.83 4.36h.18l1.82-4.36h1.97V46h-1.41v-6.23l.18.02-1.97 4.72h-1.45l-1.98-4.72.19-.02V46zm12.04 0v-7.3h1.39V46zm1.19 0v-1.2h3.31V46zm0-3.11v-1.2h3.05v1.2zm0-2.99v-1.2h3.23v1.2zm7.268 6.1v-7.3h2.33l3.07 6.12h.33l-.2.18v-6.3h1.34V46h-2.34l-3.07-6.12h-.34l.2-.18V46zm12.612 0v-6.25h1.42V46zm-2.11-6.05V38.7h5.64v1.25zM84.133 46l2.49-7.3h2.32l2.56 7.3h-1.46l-2.17-6.33.51.22h-1.25l.52-.22-2.1 6.33zm1.74-1.94.45-1.2h2.96l.44 1.2zM95.913 46v-6.25h1.42V46zm-2.11-6.05V38.7h5.64v1.25zm9.293 6.05v-7.3h1.42V46zm9.172.19c-.66 0-1.234-.117-1.72-.35a3.668 3.668 0 0 1-1.2-.91 4.182 4.182 0 0 1-.71-1.22 3.836 3.836 0 0 1-.23-1.27v-.22c0-.447.08-.89.24-1.33.16-.447.4-.85.72-1.21.326-.36.73-.647 1.209-.86.481-.22 1.044-.33 1.691-.33.64 0 1.2.11 1.68.33.48.213.88.5 1.2.86.326.36.57.763.73 1.21.16.44.24.883.24 1.33v.22c0 .407-.08.83-.24 1.27a3.93 3.93 0 0 1-.71 1.22 3.547 3.547 0 0 1-1.2.91c-.48.233-1.047.35-1.7.35zm0-1.32c.373 0 .706-.067 1-.2.3-.133.553-.317.76-.55.213-.24.373-.51.48-.81.113-.307.17-.63.17-.97a2.9 2.9 0 0 0-.17-1.01 2.222 2.222 0 0 0-1.24-1.33c-.3-.127-.634-.19-1-.19-.374 0-.71.063-1.01.19s-.557.303-.77.53a2.405 2.405 0 0 0-.48.8c-.107.307-.16.643-.16 1.01 0 .34.053.663.16.97.113.3.273.57.48.81.213.233.47.417.77.55s.636.2 1.01.2zM119.99 46v-7.3h2.33l3.07 6.12h.33l-.2.18v-6.3h1.34V46h-2.34l-3.07-6.12h-.34l.2-.18V46z"/></g></svg> </a> </div> <nav class='header-nav z-30 flex flex-grow justify-between items-center bg-white px-16 whitespace-no-wrap lg:h-auto h-72 min-w-0' data-header-nav=''> <div class='flex lg:hidden'> <div class='h-24 w-24 mr-24 ml-8 md:ml-40'> <a class='block h-full w-full text-xenon-600 fill-current' href='/doc/'> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 501 501"><path fill="#003DFF" d="M249.997.0299683C113.377.0299683 1.99633 110.19.0263314 246.35-1.97367 384.64 110.217 499.22 248.517 500.02c42.71.25 83.849-10.2 120.379-30.05 3.56-1.93 4.111-6.83 1.081-9.52l-23.391-20.74c-4.75-4.22-11.52-5.41-17.37-2.92-25.5 10.85-53.209 16.39-81.759 16.04-111.75-1.37-202.0407-94.35-200.2607-206.1C48.9563 136.4 139.257 47.18 249.997 47.18h202.829v360.51L337.747 305.44c-3.72-3.31-9.431-2.66-12.431 1.31-18.47 24.46-48.56 39.67-81.98 37.36-46.36-3.2-83.92-40.52-87.4-86.86-4.15-55.28 39.65-101.58 94.07-101.58 49.21 0 89.741 37.88 93.971 86.01.38 4.28 2.309 8.28 5.529 11.13l29.971 26.57c3.4 3.01 8.799 1.17 9.629-3.3 2.16-11.55 2.92-23.6 2.07-35.95-4.83-70.39-61.84-127.01-132.26-131.35-80.73-4.98-148.23 58.18-150.37 137.35-2.09 77.15 61.12 143.66 138.28 145.36 32.21.71 62.07-9.42 86.2-26.97l150.36 133.29c6.45 5.71 16.62 1.14 16.62-7.48V9.48999c0-5.24-4.249-9.48999-9.489-9.48999H250.006l-.009.0299683Z"/></svg> </a> </div> <button class='flex items-center mr-32 text-grey-1000 hover:text-grey-1000 fill-current focus:outline-none focus:shadow-outline' data-action='click->app#toggleSidebar'> <span class='flex items-center h-24 w-24 mr-8 p-2 flex-grow-0 flex-shrink-0'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><path d="M19,8H1A1,1,0,0,1,1,6H19a1,1,0,0,1,0,2Z"/><path d="M19,2H1A1,1,0,0,1,1,0H19a1,1,0,0,1,0,2Z"/><path d="M19,14H1a1,1,0,0,1,0-2H19a1,1,0,0,1,0,2Z"/></svg> </span> <span class='block flex-grow-0 flex-shrink-0 text-xs uppercase'> Menu </span> </button> </div> <ul class='h-full mx-24 uppercase leading-tight text-sm font-semibold tracking-wide lg:flex hidden'> <li class='flex items-center h-full mx-16'> <span class='header-item hover:text-xenon-600 border-b-2 flex items-center h-full cursor-pointer transition-fast-out' data-action='click->header#openDropdown click->header#toggleTabs click->header#setItemAsClicked click@window->header#closeDropdownOnClickOutside' data-tab='guides' data-target='header.item'> Guides </span> </li> <li class='flex items-center h-full mx-16'> <span class='header-item header-item-active hover:text-xenon-600 border-b-2 flex items-center h-full cursor-pointer transition-fast-out' data-action='click->header#openDropdown click->header#toggleTabs click->header#setItemAsClicked click@window->header#closeDropdownOnClickOutside' data-tab='api-reference' data-target='header.item'> <span class='hidden xl:block'> API Reference </span> <span class='xl:hidden'> API </span> </span> </li> <li class='flex items-center h-full mx-16'> <span class='header-item hover:text-xenon-600 border-b-2 flex items-center h-full cursor-pointer transition-fast-out' data-action='click->header#openDropdown click->header#toggleTabs click->header#setItemAsClicked click@window->header#closeDropdownOnClickOutside' data-tab='integrations' data-target='header.item'> Integrations </span> </li> <li class='items-center h-full mx-16 hidden' data-target='header.unlogged'> <a class='text-xenon-600 py-16 mb-px' data-segment-message='Clicked Sign In' data-segment='dashboard' href='https://dashboard.algolia.com/users/sign_in'> Log in </a> </li> <li class='items-center h-full mx-16 hidden' data-target='header.unlogged'> <a class='inline-block btn-skeuomorphic btn-skeuomorphic-blue sm:py-8 py-16 px-16 mb-px text-center' data-segment-message='Clicked Sign Up' data-segment='dashboard' href='https://dashboard.algolia.com/users/sign_up'> <span class='px-4'>Sign up</span> </a> </li> <li class='items-center h-full mx-16 hidden' data-target='header.logged'> <a class='inline-block btn-skeuomorphic sm:py-8 py-16 px-16 mb-px text-center' data-segment-message='Clicked Dashboard' data-segment='dashboard' href='https://dashboard.algolia.com'> <span class='px-4'>Dashboard</span> </a> </li> </ul> <div class='header-search max-w-448 w-full min-w-0' id='docsearch'></div> </nav> <div class='header-dropdown absolute inset-x-0 z-40 w-full pt-72 shadow-lg-outer font-sans pointer-events-none' data-main-dropdown=''> <div class='pt-32 pb-56 px-56 bg-white pointer-events-auto'> <button class='flex absolute top-0 right-0 items-center right-0 right-0 mt-32 mr-40 text-grey-700-opacity-90 hover:text-grey-700 fill-current transition-fast-out z-60 focus:outline-none focus:shadow-outline' data-action='click->header#closeDropdown'> <span class='flex items-center h-16 w-16 mr-16 flex-grow-0 flex-shrink-0'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M8.41,7l5.3-5.29A1,1,0,1,0,12.29.29L7,5.59,1.71.29A1,1,0,0,0,.29,1.71L5.59,7,.29,12.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L7,8.41l5.29,5.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"/></svg> </span> <span class='block flex-grow-0 flex-shrink-0 mt-2 font-sans-alt text-base leading-none'> Close </span> </button> <div class='hidden justify-center' data-tab='guides' data-target='header.tab'> <div class='flex-initial max-w-272 w-full mr-80'> <div class='text-3xl font-semibold mb-16 leading-loose'> Guides </div> <p class='text-grey-700 mb-16 leading-normal'> Learn how Algolia works and how you can use it to create search and discovery experiences. </p> </div> <div class='column-2 -mx-16 -mb-24'> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 17"><path d="M14.81,5.71l-7-5.6a.48.48,0,0,0-.62,0l-7,5.6A.49.49,0,0,0,0,6.1v8.8A2.08,2.08,0,0,0,2.06,17H12.94A2.08,2.08,0,0,0,15,14.9V6.1A.49.49,0,0,0,14.81,5.71ZM9.33,16H5.67V9H9.33ZM14,14.9A1.08,1.08,0,0,1,12.94,16H10.33V8.5a.5.5,0,0,0-.5-.5H5.17a.5.5,0,0,0-.5.5V16H2.06A1.08,1.08,0,0,1,1,14.9V6.34l6.5-5.2L14,6.34Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Home </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/getting-started/what-is-algolia/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.2 18.2"><path d="M8.88,7.93,5.61,6.79,6.45.54A.47.47,0,0,0,6.13,0a.46.46,0,0,0-.57.21L.06,9.58l0,.08a.48.48,0,0,0,.29.61l3.27,1.14-.84,6.25a.47.47,0,0,0,.32.51.41.41,0,0,0,.16,0A.47.47,0,0,0,3.64,18L9.13,8.62a.59.59,0,0,0,0-.08A.48.48,0,0,0,8.88,7.93Zm-4.33,3.2a.49.49,0,0,0-.32-.51L1.13,9.54l4.19-7L4.65,7.07A.49.49,0,0,0,5,7.58l3.1,1.08-4.19,7Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Getting started </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/sending-and-managing-data/prepare-your-data/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M14.72,17H2.28A2.28,2.28,0,0,1,0,14.72V11.17a.5.5,0,0,1,.5-.5.5.5,0,0,1,.5.5v3.55A1.28,1.28,0,0,0,2.28,16H14.72A1.28,1.28,0,0,0,16,14.72V11.17a.5.5,0,0,1,1,0v3.55A2.28,2.28,0,0,1,14.72,17ZM8.5,11.67a.5.5,0,0,1-.5-.5V1.71L4.41,5.3a.5.5,0,1,1-.71-.71L8.15.15h0A.31.31,0,0,1,8.31,0a.48.48,0,0,1,.18,0h0a.58.58,0,0,1,.18,0,.36.36,0,0,1,.15.1h0L13.3,4.59a.5.5,0,1,1-.71.71L9,1.71v9.46A.5.5,0,0,1,8.5,11.67Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Sending and managing data </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/managing-results/relevance-overview/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M16.5,17H10.28a.5.5,0,0,1-.5-.5V10.28a.5.5,0,0,1,.5-.5H16.5a.5.5,0,0,1,.5.5V16.5A.5.5,0,0,1,16.5,17Zm-5.72-1H16V10.78H10.78ZM6.72,17H.5a.5.5,0,0,1-.5-.5V10.28a.5.5,0,0,1,.5-.5H6.72a.5.5,0,0,1,.5.5V16.5A.5.5,0,0,1,6.72,17ZM1,16H6.22V10.78H1ZM16.5,7.22H10.28a.5.5,0,0,1-.5-.5V.5a.5.5,0,0,1,.5-.5H16.5a.5.5,0,0,1,.5.5V6.72A.5.5,0,0,1,16.5,7.22Zm-5.72-1H16V1H10.78Zm-4.06,1H.5a.5.5,0,0,1-.5-.5V.5A.5.5,0,0,1,.5,0H6.72a.5.5,0,0,1,.5.5V6.72A.5.5,0,0,1,6.72,7.22ZM1,6.22H6.22V1H1Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Managing results </div> </div> </a> <div class='hidden' data-controller='flavor-specific-content' data-flavor='android'> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/building-search-ui/what-is-instantsearch/android/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M14.72,0H2.28A2.28,2.28,0,0,0,0,2.28V14.72A2.28,2.28,0,0,0,2.28,17H14.72A2.28,2.28,0,0,0,17,14.72V2.28A2.28,2.28,0,0,0,14.72,0ZM2.28,1H14.72A1.28,1.28,0,0,1,16,2.28V5.33H1V2.28A1.28,1.28,0,0,1,2.28,1ZM1,14.72V6.33H5.33V16H2.28A1.28,1.28,0,0,1,1,14.72ZM14.72,16H6.33V6.33H16v8.39A1.28,1.28,0,0,1,14.72,16Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Building Search UI </div> </div> </a> </div> <div class='hidden' data-controller='flavor-specific-content' data-flavor='flutter'> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/building-search-ui/what-is-instantsearch/flutter/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M14.72,0H2.28A2.28,2.28,0,0,0,0,2.28V14.72A2.28,2.28,0,0,0,2.28,17H14.72A2.28,2.28,0,0,0,17,14.72V2.28A2.28,2.28,0,0,0,14.72,0ZM2.28,1H14.72A1.28,1.28,0,0,1,16,2.28V5.33H1V2.28A1.28,1.28,0,0,1,2.28,1ZM1,14.72V6.33H5.33V16H2.28A1.28,1.28,0,0,1,1,14.72ZM14.72,16H6.33V6.33H16v8.39A1.28,1.28,0,0,1,14.72,16Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Building Search UI </div> </div> </a> </div> <div class='hidden' data-controller='flavor-specific-content' data-flavor='ios'> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/building-search-ui/what-is-instantsearch/ios/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M14.72,0H2.28A2.28,2.28,0,0,0,0,2.28V14.72A2.28,2.28,0,0,0,2.28,17H14.72A2.28,2.28,0,0,0,17,14.72V2.28A2.28,2.28,0,0,0,14.72,0ZM2.28,1H14.72A1.28,1.28,0,0,1,16,2.28V5.33H1V2.28A1.28,1.28,0,0,1,2.28,1ZM1,14.72V6.33H5.33V16H2.28A1.28,1.28,0,0,1,1,14.72ZM14.72,16H6.33V6.33H16v8.39A1.28,1.28,0,0,1,14.72,16Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Building Search UI </div> </div> </a> </div> <div class='hidden' data-controller='flavor-specific-content' data-flavor='js'> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/building-search-ui/what-is-instantsearch/js/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M14.72,0H2.28A2.28,2.28,0,0,0,0,2.28V14.72A2.28,2.28,0,0,0,2.28,17H14.72A2.28,2.28,0,0,0,17,14.72V2.28A2.28,2.28,0,0,0,14.72,0ZM2.28,1H14.72A1.28,1.28,0,0,1,16,2.28V5.33H1V2.28A1.28,1.28,0,0,1,2.28,1ZM1,14.72V6.33H5.33V16H2.28A1.28,1.28,0,0,1,1,14.72ZM14.72,16H6.33V6.33H16v8.39A1.28,1.28,0,0,1,14.72,16Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Building Search UI </div> </div> </a> </div> <div class='hidden' data-controller='flavor-specific-content' data-flavor='react'> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/building-search-ui/what-is-instantsearch/react/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M14.72,0H2.28A2.28,2.28,0,0,0,0,2.28V14.72A2.28,2.28,0,0,0,2.28,17H14.72A2.28,2.28,0,0,0,17,14.72V2.28A2.28,2.28,0,0,0,14.72,0ZM2.28,1H14.72A1.28,1.28,0,0,1,16,2.28V5.33H1V2.28A1.28,1.28,0,0,1,2.28,1ZM1,14.72V6.33H5.33V16H2.28A1.28,1.28,0,0,1,1,14.72ZM14.72,16H6.33V6.33H16v8.39A1.28,1.28,0,0,1,14.72,16Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Building Search UI </div> </div> </a> </div> <div class='hidden' data-controller='flavor-specific-content' data-flavor='vue'> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/building-search-ui/what-is-instantsearch/vue/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M14.72,0H2.28A2.28,2.28,0,0,0,0,2.28V14.72A2.28,2.28,0,0,0,2.28,17H14.72A2.28,2.28,0,0,0,17,14.72V2.28A2.28,2.28,0,0,0,14.72,0ZM2.28,1H14.72A1.28,1.28,0,0,1,16,2.28V5.33H1V2.28A1.28,1.28,0,0,1,2.28,1ZM1,14.72V6.33H5.33V16H2.28A1.28,1.28,0,0,1,1,14.72ZM14.72,16H6.33V6.33H16v8.39A1.28,1.28,0,0,1,14.72,16Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Building Search UI </div> </div> </a> </div> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/sending-events/getting-started/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Sending events </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/search-analytics/overview/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Search analytics </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/personalization/advanced-personalization/what-is-advanced-personalization/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Personalization </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/ab-testing/what-is-ab-testing/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> A/B testing </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/algolia-recommend/overview/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cpu"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Algolia Recommend </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/algolia-ai/dynamic-synonym-suggestions/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-target"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Algolia AI </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/going-to-production/implementation-checklist/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0ZM16,8H12.18A12.73,12.73,0,0,0,9.64,1.1,7.49,7.49,0,0,1,16,8ZM5.82,9h5.36A11.77,11.77,0,0,1,8.5,15.74,11.73,11.73,0,0,1,5.82,9Zm0-1A11.77,11.77,0,0,1,8.5,1.26,11.73,11.73,0,0,1,11.18,8ZM7.36,1.1A12.7,12.7,0,0,0,4.82,8H1A7.49,7.49,0,0,1,7.36,1.1ZM1,9H4.82a12.73,12.73,0,0,0,2.54,6.9A7.49,7.49,0,0,1,1,9Zm8.61,6.9A12.7,12.7,0,0,0,12.18,9H16A7.49,7.49,0,0,1,9.64,15.9Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Going to production </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/scaling/servers-clusters/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M8.5,17A.54.54,0,0,1,8.28,17l-8-4a.5.5,0,1,1,.44-.9L8.5,15.94l7.78-3.89a.5.5,0,0,1,.44.9l-8,4A.54.54,0,0,1,8.5,17Zm0-4A.54.54,0,0,1,8.28,13l-8-4a.5.5,0,1,1,.44-.9L8.5,11.94l7.78-3.89a.5.5,0,0,1,.44.9l-8,4A.54.54,0,0,1,8.5,13Zm0-4A.54.54,0,0,1,8.28,9l-8-4a.5.5,0,0,1,0-.9l8-4a.49.49,0,0,1,.44,0l8,4a.5.5,0,0,1,0,.9l-8,4A.54.54,0,0,1,8.5,9ZM1.62,4.5,8.5,7.94,15.38,4.5,8.5,1.06Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Scaling </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/security/api-keys/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 17"><path d="M7,17A.54.54,0,0,1,6.78,17C6.5,16.81,0,13.55,0,8.5V2.9a.5.5,0,0,1,.33-.47L6.83,0a.5.5,0,0,1,.34,0l6.5,2.4A.5.5,0,0,1,14,2.9V8.5c0,5.05-6.5,8.31-6.78,8.45A.54.54,0,0,1,7,17ZM1,3.25V8.5c0,3.95,4.89,6.83,6,7.44,1.11-.61,6-3.49,6-7.44V3.25L7,1Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Security </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/solutions/ecommerce/search/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="w-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 21.08"><path d="M18.73,5.4a.44.44,0,0,0-.07-.19.46.46,0,0,0-.15-.16,2.49,2.49,0,0,0-.76-.72l-7-4a2.53,2.53,0,0,0-2.5,0l-7,4a2.49,2.49,0,0,0-.76.72.46.46,0,0,0-.15.16.44.44,0,0,0-.07.19A2.59,2.59,0,0,0,0,6.5v8a2.5,2.5,0,0,0,1.25,2.16l7,4a2.4,2.4,0,0,0,.93.29.46.46,0,0,0,.64,0,2.4,2.4,0,0,0,.93-.29l7-4A2.5,2.5,0,0,0,19,14.5h0v-8A2.59,2.59,0,0,0,18.73,5.4Zm-10-4.2a1.51,1.51,0,0,1,1.5,0l7,4a1.24,1.24,0,0,1,.18.14L9.5,9.93,1.57,5.34a1.24,1.24,0,0,1,.18-.14Zm-7,14.6A1.52,1.52,0,0,1,1,14.5v-8a1.55,1.55,0,0,1,0-.31L9,10.8v9.1a1.12,1.12,0,0,1-.25-.11ZM18,14.5a1.49,1.49,0,0,1-.75,1.29l-7,4a1.36,1.36,0,0,1-.25.11V10.8l8-4.61a1.55,1.55,0,0,1,0,.31Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Solutions </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt mb-8 pb-24 break-avoid-column mx-16 group' href='/doc/guides/billing/marketplaces/amazon-web-services/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" class="h-full" viewBox="0 0 24 24"><path d="M4 10h12M4 14h9m6-8a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Billing </div> </div> </a> </div> </div> <div class='hidden justify-center' data-tab='api-reference' data-target='header.tab'> <div class='flex -mx-32 lg:flex-row flex-col'> <div class='mx-32'> <div class='text-xl font-semibold mb-24'> API clients </div> <div class='column-2 -mx-16 -mb-24'> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/csharp/v7/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#5c2d91" viewBox="0 0 64.89 64.89"><circle cx="32.89" cy="32" r="32"/><path d="M9.82,9A32,32,0,0,0,52.4,56.78a33.57,33.57,0,0,0,2.6-2.6Z" transform="translate(0.89)" fill="#ffffff" opacity="0.1"/><path d="M7.4,41.25a1.34,1.34,0,0,1-1-.42,1.37,1.37,0,0,1-.41-1,1.41,1.41,0,0,1,.41-1,1.38,1.38,0,0,1,2,0,1.42,1.42,0,0,1-1,2.42Z" transform="translate(0.89)" fill="#ffffff"/><path d="M27.27,41H24.65L15.28,26.46a6.11,6.11,0,0,1-.58-1.14h-.08a19,19,0,0,1,.1,2.5V41H12.59V22.77h2.77l9.12,14.28c.38.59.63,1,.74,1.22h.05a18.44,18.44,0,0,1-.13-2.68V22.77h2.13Z" transform="translate(0.89)" fill="#ffffff"/><path d="M41.69,41H32V22.77h9.24V24.7H34.18v6.06h6.58v1.92H34.18V39H41.7Z" transform="translate(0.89)" fill="#ffffff"/><path d="M56,24.7H50.7V41H48.57V24.7H43.33V22.77H56Z" transform="translate(0.89)" fill="#ffffff"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> C# </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/dart/v1/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 137 137"><path fill="#01579B" d="M27.74 108.28 4.47 85.01C1.71 82.18 0 78.18 0 74.27c0-1.81 1.02-4.64 1.79-6.26l21.48-44.74 4.47 85.01Z"/><path fill="#40C4FF" d="M107.39 27.74 84.12 4.47C82.09 2.43 77.86 0 74.28 0c-3.08 0-6.1.62-8.05 1.79L23.28 23.27l84.11 4.47ZM55.48 136.02h56.38v-24.16L69.8 98.43l-38.48 13.43 24.16 24.16Z"/><path fill="#29B6F6" d="M23.27 95.75c0 7.18.9 8.94 4.47 12.53l3.58 3.58h80.54L72.49 67.12 23.27 23.27v72.48Z"/><path fill="#01579B" d="M94.86 23.26H23.27l88.59 88.59h24.16V56.37l-28.64-28.64c-4.02-4.03-7.59-4.47-12.52-4.47Z"/><path fill="#fff" d="M28.64 109.17c-3.58-3.59-4.47-7.13-4.47-13.42V24.16l-.89-.89v72.48c-.01 6.29-.01 8.03 5.36 13.42Z" opacity=".2"/><path fill="#263238" d="M135.13 55.48v55.48h-24.16l.89.9h24.16V56.37l-.89-.89Z" opacity=".2"/><path fill="#fff" d="M107.39 27.74c-4.44-4.44-8.07-4.47-13.42-4.47H23.28l.89.89h69.8c2.67 0 9.41-.45 13.42 3.58Z" opacity=".2"/><path fill="url(#a)" d="m135.13 55.48-27.74-27.74L84.12 4.47C82.09 2.43 77.86 0 74.28 0c-3.08 0-6.1.62-8.05 1.79L23.28 23.27 1.8 68.01C1.03 69.64.01 72.47.01 74.27c0 3.91 1.72 7.9 4.47 10.74l21.44 21.29c.51.63 1.11 1.27 1.82 1.98l.89.89 2.68 2.68 23.27 23.27.89.89h56.37v-24.16H136V56.37l-.87-.89Z" opacity=".2"/><defs><radialGradient id="a" cx="0" cy="0" r="1" gradientTransform="matrix(68 0 0 68 68.005 68.007)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Dart </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/go/v4/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#00add8" viewBox="0 0 29 10.83"><path d="M13.14,17.34h-5a.22.22,0,0,0-.16.07l-.29.38c0,.05,0,.07,0,.07l5.11,0a.2.2,0,0,0,.14-.09l.24-.36C13.21,17.38,13.2,17.34,13.14,17.34Z" transform="translate(-5.5 -14.58)"/><path d="M12.4,18.64H6a.22.22,0,0,0-.16.07l-.3.38s0,.07,0,.07h6.68a.12.12,0,0,0,.12-.09l.12-.34S12.46,18.64,12.4,18.64Z" transform="translate(-5.5 -14.58)"/><path d="M12.09,19.94H9.27a.18.18,0,0,0-.14.08l-.2.36a0,0,0,0,0,0,.08l3.08,0a.12.12,0,0,0,.1-.1l0-.34C12.18,20,12.15,19.94,12.09,19.94Z" transform="translate(-5.5 -14.58)"/><path d="M34.45,18.7a4.4,4.4,0,0,0-2-3.15,5.17,5.17,0,0,0-4-.72,5.87,5.87,0,0,0-3.95,2.36,6,6,0,0,0-1,1.83H19a.39.39,0,0,0-.36.23c-.19.36-.53,1.1-.72,1.54-.1.24,0,.42.27.42h2.73c-.14.2-.26.37-.38.52a2.62,2.62,0,0,1-2.41.93,2.2,2.2,0,0,1-1.9-2.21,3,3,0,0,1,1.44-2.69,2.44,2.44,0,0,1,2.55-.21,1.86,1.86,0,0,1,.67.54c.18.21.2.2.41.14l2.37-.62c.17,0,.23-.11.14-.24a4.37,4.37,0,0,0-1.64-2,4.84,4.84,0,0,0-3.74-.69,6.24,6.24,0,0,0-4,2.44,5.52,5.52,0,0,0-1.2,4.14A4.42,4.42,0,0,0,15,24.4a5,5,0,0,0,3.8.93,5.84,5.84,0,0,0,4-2.4,5.94,5.94,0,0,0,.6-1,4.35,4.35,0,0,0,1.41,2.2,5.3,5.3,0,0,0,3.44,1.25c.37-.05.75-.06,1.13-.13a6.43,6.43,0,0,0,3.39-1.81A5.45,5.45,0,0,0,34.45,18.7Zm-4.58,3.71a2.59,2.59,0,0,1-2.3.08,2.32,2.32,0,0,1-1.3-2.66,3.09,3.09,0,0,1,2.47-2.46,2.32,2.32,0,0,1,2.88,1.88,3,3,0,0,1,0,.46A3.08,3.08,0,0,1,29.87,22.41Z" transform="translate(-5.5 -14.58)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Go </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/java/v4/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#ea2d2e" viewBox="0 0 18.38 24.65"><path d="M20,21.2c-.92-2.06-4-3.86,0-7,5-3.94,2.45-6.5,2.45-6.5h0c1.05,4.07-3.68,5.3-5.39,7.83C15.94,17.24,17.67,19.09,20,21.2Z" transform="translate(-10.81 -7.68)"/><path d="M25.61,12.71s-8.53,2.11-4.45,6.75h0a1.79,1.79,0,0,1-.32,2.6s3.05-1.56,1.65-3.51S20.18,15.83,25.61,12.71Z" transform="translate(-10.81 -7.68)"/><path d="M24.19,22.74a8.26,8.26,0,0,1,1.14-.6s-1.88.33-3.75.49a33.81,33.81,0,0,1-6,.06c-2.92-.38,1.61-1.45,1.61-1.45h0a8.74,8.74,0,0,0-3.92.92C10.71,23.38,19.59,23.94,24.19,22.74Z" transform="translate(-10.81 -7.68)"/><path d="M25.31,25.73h0a.44.44,0,0,1-.09.13c6.24-1.63,3.94-5.73,1-4.69a.85.85,0,0,0-.4.31,3.56,3.56,0,0,1,.54-.15C27.82,21,30,23.33,25.31,25.73Z" transform="translate(-10.81 -7.68)"/><path d="M27.61,28.73h0s.7.58-.78,1c-2.81.85-11.71,1.1-14.19,0-.89-.39.78-.92,1.31-1a3.36,3.36,0,0,1,.85-.1c-1-.68-6.39,1.36-2.74,1.94C22,32.2,30.19,29.88,27.61,28.73Z" transform="translate(-10.81 -7.68)"/><path d="M25.48,31.42a37.24,37.24,0,0,1-11.35.17s.57.47,3.52.66h0c4.48.28,11.37-.16,11.54-2.26C29.19,30,28.87,30.78,25.48,31.42Z" transform="translate(-10.81 -7.68)"/><path d="M23.36,24.67A20.5,20.5,0,0,1,16.7,25c-1.63-.17-.57-.95-.57-.95-4.21,1.38,2.35,3,8.25,1.25A2.87,2.87,0,0,1,23.36,24.67Z" transform="translate(-10.81 -7.68)"/><polygon points="5.32 16.36 5.32 16.36 5.32 16.36 5.32 16.36"/><path d="M16.73,26.74h0C12.9,27.8,19.06,30,23.94,27.92a8.76,8.76,0,0,1-1.37-.67,14.43,14.43,0,0,1-5.16.22C15.78,27.28,16.73,26.74,16.73,26.74Z" transform="translate(-10.81 -7.68)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Java </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/javascript/v5/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#f7df1e" viewBox="0 0 20 20"><path d="M17.5,0H2.5A2.5,2.5,0,0,0,0,2.5v15A2.5,2.5,0,0,0,2.5,20h15A2.5,2.5,0,0,0,20,17.5V2.5A2.5,2.5,0,0,0,17.5,0ZM10.57,14.41a1.52,1.52,0,0,1-1,.78A2.34,2.34,0,0,1,7.81,15a2,2,0,0,1-.73-.83l1-.61.07.11a1.13,1.13,0,0,0,.45.47c.22.07.69.12.87-.26a5.31,5.31,0,0,0,.07-1.49V9.2h1.23v3.4A3.61,3.61,0,0,1,10.57,14.41Zm4.91-.27c-.43,1.47-2.82,1.52-3.78.55a2.29,2.29,0,0,1-.45-.62l1-.57a1.42,1.42,0,0,0,1,.73c.6.07,1.21-.14,1.08-.78s-1.24-.65-2-1.22A1.73,1.73,0,0,1,12,9.81l0,0a1.78,1.78,0,0,1,.94-.55h.39a1.85,1.85,0,0,1,1.56.56,2.61,2.61,0,0,1,.31.43l-1,.62a1,1,0,0,0-.54-.5.65.65,0,0,0-.84.35h0a.65.65,0,0,0,0,.39c.13.3.58.44,1,.62,1.16.48,1.55,1,1.65,1.58h0A1.92,1.92,0,0,1,15.48,14.14Z"/><path fill="#000000" d="M15.47,13.28c-.1-.58-.49-1.1-1.65-1.58-.42-.18-.87-.32-1-.62a.65.65,0,0,1,0-.39h0a.65.65,0,0,1,.84-.35,1,1,0,0,1,.54.5l1-.62a2.61,2.61,0,0,0-.31-.43,1.85,1.85,0,0,0-1.56-.56h-.39a1.78,1.78,0,0,0-.94.55l0,0a1.73,1.73,0,0,0,.36,2.42c.76.57,1.87.58,2,1.22s-.48.85-1.08.78a1.42,1.42,0,0,1-1-.73l-1,.57a2.29,2.29,0,0,0,.45.62c1,1,3.35.92,3.78-.55A1.92,1.92,0,0,0,15.47,13.28Z"/><path fill="#000000" d="M10.77,9.2H9.54v3.19a5.31,5.31,0,0,1-.07,1.49c-.18.38-.65.33-.87.26a1.13,1.13,0,0,1-.45-.47l-.07-.11-1,.61a2,2,0,0,0,.73.83,2.34,2.34,0,0,0,1.76.19,1.52,1.52,0,0,0,1-.78,3.61,3.61,0,0,0,.2-1.81Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> JavaScript </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/kotlin/v3/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#806ee3" viewBox="0 0 60 60"><polygon points="0 60 30.1 29.9 60 60 0 60" fill="#806ee3"/><polygon points="0 0 30.1 0 0 31.7 0 0" fill="#0095d5"/><polygon points="30.1 0 0 31.7 0 60 30.1 29.9 60 0 30.1 0" fill="#ee7e2f"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Kotlin </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/php/v4/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#8892be" viewBox="0 0 26 12"><path d="M30.11,16.36H25.66L23.73,26H26l.48-2.5h2.17A4.24,4.24,0,0,0,33,19.1C33,17.43,32,16.48,30.11,16.36Zm-1.68,5.36H27l.6-3.57h1.57c.84,0,1.44.35,1.44,1.07C30.47,21.24,29.51,21.6,28.43,21.72Z" transform="translate(-7 -14)"/><path d="M13.38,16.36H8.93L7,26H9.29l.48-2.5h2.17a4.24,4.24,0,0,0,4.33-4.4C16.27,17.43,15.31,16.48,13.38,16.36ZM11.7,21.72H10.25l.6-3.57h1.57c.84,0,1.44.35,1.44,1.07C13.74,21.24,12.78,21.6,11.7,21.72Z" transform="translate(-7 -14)"/><path d="M21.86,16.5H19.69l.49-2.5H17.89L16,23.64h2.29l1.08-5.36h1.81c.84,0,.84.36.72,1L21,23.64h2.41l.84-4.88C24.51,17.57,23.79,16.62,21.86,16.5Z" transform="translate(-7 -14)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> PHP </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/python/v4/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#4584b6" viewBox="0 0 19.52 19.73"><path d="M17.4,19.7h4.71a2.54,2.54,0,0,0,2.64-2.59V12.76s.4-2.63-4.79-2.63h0c-5,0-4.66,2.19-4.66,2.19v2.26h4.74v.68H13.42s-3.18-.37-3.18,4.71S13,24.87,13,24.87h1.65V22.51A2.66,2.66,0,0,1,17.4,19.7Zm-.06-6.32a.85.85,0,0,1-.85-.86.86.86,0,1,1,.85.86Z" transform="translate(-10.24 -10.13)"/><path d="M27,15.13H25.33v2.36A2.66,2.66,0,0,1,22.6,20.3H17.89a2.54,2.54,0,0,0-2.64,2.59v4.35s-.4,2.63,4.79,2.63c5,0,4.66-2.19,4.66-2.19V25.42H20v-.68h6.63s3.18.37,3.18-4.71S27,15.13,27,15.13ZM22.87,26.42a.86.86,0,0,1,0,1.72h0a.87.87,0,0,1,0-1.73Z" transform="translate(-10.24 -10.13)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Python </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/ruby/v3/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#cc342d" viewBox="0 0 21.81 16.28"><polygon points="5.08 0 5.08 4.22 10.08 0 5.08 0"/><polygon points="17.33 0.39 17.33 4.55 21.78 4.55 17.33 0.39"/><polygon points="16.19 4.55 10.92 0.08 5.64 4.55 16.19 4.55"/><polygon points="16.72 0 11.75 0 16.72 4.19 16.72 0"/><polygon points="4.47 0.42 0.06 4.55 4.47 4.55 4.47 0.42"/><polygon points="17.22 5.16 12.08 15.28 21.8 5.16 17.22 5.16"/><polygon points="5.28 5.16 10.92 16.28 16.56 5.16 5.28 5.16"/><polygon points="0 5.16 9.72 15.28 4.61 5.16 0 5.16"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Ruby </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/scala/v2/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#de3423" viewBox="0 0 13.92 23.79"><path d="M13,17.25v-5.5c13.9,1.37,13.9,3.67,13.9,3.67v5.5C26.94,18.62,13,17.25,13,17.25Zm0,7.33v-5.5c13.9,1.38,13.9,3.67,13.9,3.67v5.5C26.94,26,13,24.58,13,24.58Z" transform="translate(-13.04 -8.1)" fill-opacity="0.4"/><path d="M27,8.1v5.5s0,2.3-13.9,3.67V11.75S27,10.4,27,8.1ZM13,19.08s13.9-1.37,13.9-3.66v5.5s0,2.29-13.9,3.66ZM13,31.9V26.4s13.9-1.38,13.9-3.67v5.5S27,30.52,13,31.9Z" transform="translate(-13.04 -8.1)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Scala </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/libraries/swift/v9/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" fill="#f05138" viewBox="0 0 20 18"><path d="M22.31,11c8.5,5.6,5.9,12.65,5.9,12.65A8.28,8.28,0,0,1,29.59,26,7.29,7.29,0,0,1,30,29c-.09,0-1.16-1.83-3-1.83S24.09,29,20.76,29A12.53,12.53,0,0,1,10,22.73s3.3,2.41,6.76,2.32S21.17,24,21.17,24s-1.54-1.32-4.2-4a50.78,50.78,0,0,1-5.17-6.31s4,3.25,5.3,4.2,2.57,1.81,2.57,1.81-1.24-1.37-2.12-2.47-3.13-4.43-3.13-4.43,3.45,3.17,5,4.43S24,20.59,24,20.59s1.81-4.2-1.69-9.59Z" transform="translate(-10 -11)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Swift </div> </div> </a> </div> </div> <div class='flex flex-col'> <div class='mx-32'> <div class='text-xl font-semibold mb-24'> UI libraries </div> <div class='column-2 -mx-16'> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/api-reference/widgets/js/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#f7df1e'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> InstantSearch.js </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/api-reference/widgets/react/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#00d8ff'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> React InstantSearch </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/api-reference/widgets/vue/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#42b883'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Vue InstantSearch </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/api-reference/widgets/ios/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#f05138'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> InstantSearch iOS </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/api-reference/widgets/android/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#a4c639'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> InstantSearch Android </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/guides/building-search-ui/widgets/showcase/flutter/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#027dfd'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Algolia for Flutter </div> </div> </a> </div> <div class='-mx-16 -mb-24'> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current text-grey-600'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.7 16.7"><defs/><path fill="#ad6af8" d="M12.8 12.9c-1.3 1-2.8 1.5-4.4 1.5-1.7 0-3.3-.6-4.5-1.6-.2-.2-.4.1-.3.3 1.3 1.3 3 2 4.8 2 1.7 0 3.4-.7 4.7-1.9.1-.2-.1-.5-.3-.3z"/><path fill="#4a5cff" d="M8.3 0C3.7 0 0 3.7 0 8.3s3.7 8.3 8.3 8.3c4.6 0 8.3-3.7 8.3-8.3S13 0 8.3 0zm0 15.8C4.2 15.8.8 12.4.8 8.3S4.2.8 8.3.8s7.5 3.4 7.5 7.5c0 4.2-3.3 7.5-7.5 7.5z"/><path fill="#8dd9fb" d="M8.3 1.6c-3.7 0-6.7 3-6.7 6.7 0 1.5.5 2.9 1.3 4l.2.2h.1c.5.1 1 .1 1.4.1 4.7 0 8.6-3.5 9.1-8v-.2c-1.1-1.6-3.1-2.8-5.4-2.8zM3.7 7.5c-.1.5-.4.9-.7.8-.3-.1-.5-.5-.4-1 .1-.5.4-.8.7-.8.4.1.5.5.4 1zm3-.1C5.8 7.4 5 6.7 5 5.8s.7-1.7 1.7-1.7 1.7.7 1.7 1.7-.8 1.6-1.7 1.6zm2.6.5c-.4 0-.9-.4-.9-.9s.4-.9.9-.9.9.4.9.9-.4.9-.9.9z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Autocomplete </div> </div> </a> </div> </div> </div> <div class='mx-32 flex flex-col justify-between'> <div> <div class='text-xl font-semibold mb-24'> API parameters </div> <div class='-mx-16'> <a class='flex items-center text-grey-700 font-sans-alt break-avoid-column mx-16 group' href='/doc/api-reference/api-parameters/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current text-grey-600'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.38,10.18a1.21,1.21,0,0,0,.24,1.33l0,0a1.45,1.45,0,1,1-2.05,2.06h0l0,0a1.21,1.21,0,0,0-1.32-.24,1.2,1.2,0,0,0-.73,1.1v.13a1.46,1.46,0,0,1-2.91,0h0v-.07a1.2,1.2,0,0,0-.78-1.1,1.21,1.21,0,0,0-1.33.24l0,.05a1.47,1.47,0,0,1-2.06,0,1.45,1.45,0,0,1,0-2.06l0,0a1.21,1.21,0,0,0,.24-1.32,1.2,1.2,0,0,0-1.1-.73H1.45a1.46,1.46,0,0,1,0-2.91h.07a1.2,1.2,0,0,0,1.1-.78A1.2,1.2,0,0,0,2.38,4.5l0,0a1.47,1.47,0,0,1,0-2.06,1.45,1.45,0,0,1,2.06,0l.05,0a1.21,1.21,0,0,0,1.32.24h.06a1.22,1.22,0,0,0,.73-1.1V1.46a1.45,1.45,0,1,1,2.9,0v.06a1.22,1.22,0,0,0,2.06.86l0,0a1.45,1.45,0,1,1,2.06,2.05l0,.05a1.21,1.21,0,0,0-.24,1.32v.06a1.22,1.22,0,0,0,1.1.73h.13A1.44,1.44,0,0,1,16,8a1.47,1.47,0,0,1-1.45,1.46h-.07A1.19,1.19,0,0,0,13.38,10.18ZM8,10.18A2.18,2.18,0,0,0,8,5.82H8a2.18,2.18,0,0,0,0,4.36Z" transform="translate(0 0)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Index settings and search parameters </div> </div> </a> </div> </div> <div> <div class='text-xl font-semibold mb-24'> REST API </div> <div class='-mx-16'> <a class='flex items-center text-grey-700 font-sans-alt break-avoid-column mx-16 group' href='/doc/api-reference/rest-api/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current text-xenon-600'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196 196"><path d="M97.9316.0117395C44.4132.0117395.782026 43.1649.0103148 96.5031-.773148 150.676 43.1753 195.56 97.3518 195.874c16.7312.098 32.8462-3.996 47.1562-11.772 1.395-.756 1.61-2.675.424-3.729l-9.163-8.125c-1.861-1.653-4.513-2.119-6.805-1.144-9.989 4.251-20.844 6.421-32.0275 6.284-43.776-.537-79.1455-36.96-78.4482-80.736.6894-43.2198 36.0629-78.1701 79.4433-78.1701h79.4544V159.705l-45.08-40.054c-1.457-1.297-3.694-1.043-4.869.513-7.236 9.581-19.023 15.54-32.1144 14.635-18.1607-1.254-32.8741-15.873-34.2373-34.026-1.6257-21.655 15.532-39.7921 36.8501-39.7921 19.2766 0 35.1536 14.8387 36.8106 33.6928.149 1.6766.905 3.2435 2.167 4.36l11.74 10.4083c1.332 1.179 3.447.458 3.772-1.293.846-4.524 1.144-9.2446.811-14.0825-1.892-27.574-24.224-49.7538-51.81-51.4539-31.6247-1.9509-58.0667 22.7909-58.905 53.8043-.8187 30.2221 23.9426 56.2761 54.1686 56.9421 12.6174.278 24.3144-3.69 33.7674-10.565l58.901 52.214c2.526 2.237 6.51.446 6.51-2.93V3.71753C195.868 1.66486 194.204 0 192.151 0H97.9354l-.0038.0117395Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> A full reference of API endpoints </div> </div> </a> </div> </div> <div> <div class='text-xl font-semibold mb-24'> Crawler </div> <div class='-mx-16'> <a class='flex items-center text-grey-700 font-sans-alt break-avoid-column mx-16 group' href='/doc/tools/crawler/apis/configuration/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current text-grey-600'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.05 20.63"><rect x="16.95" y="2.95" width="1.47" height="1.47" style="fill:#a6b0f9"/><rect x="14" y="2.95" width="1.47" height="1.47" style="fill:#a6b0f9"/><rect x="11.05" y="2.95" width="1.47" height="1.47" style="fill:#a6b0f9"/><polygon points="0 11.05 25.05 11.05 25.05 9.58 0 9.58 0 11.05" style="fill:#565db6"/><path d="M5.16,9.58H19.89V1.47H5.16Zm-1.48,0V0H21.37V9.58Z" style="fill:#a6b0f9"/><polygon points="19.89 12.53 19.89 19.16 5.16 19.16 5.16 12.53 3.68 12.53 3.68 20.63 21.37 20.63 21.37 12.53 19.89 12.53" style="fill:#a6b0f9;fill-opacity:0.5"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Configuration API </div> </div> </a> </div> </div> </div> </div> </div> <div class='hidden justify-center' data-tab='integrations' data-target='header.tab'> <div class='flex-initial max-w-272 w-full mr-80'> <div class='text-3xl font-semibold mb-16 leading-loose'> Integrations </div> <p class='text-grey-700 mb-16 leading-normal'> Speed up your implementation with Algolia's integrations and tools. </p> </div> <div class='flex -ml-32 flex-col -mb-24'> <div class='mx-32 mb-24'> <div class='text-xl font-semibold mb-24'> Web frameworks </div> <div class='column-2 -mx-16'> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/framework-integration/rails/getting-started/setup/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#cc0000'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.58 18.2"><polygon points="0.2 13.64 0 15.35 1.67 15.55 1.98 13.78 0.2 13.64"/><polygon points="6.14 4.25 4.94 3.47 3.99 4.53 5.22 5.34 6.14 4.25"/><polygon points="3.48 8.57 1.91 7.96 1.4 9.39 3 9.9 3.48 8.57"/><polygon points="17.49 1.87 16.37 1.05 16.33 1.67 17.29 2.18 17.49 1.87"/><polygon points="10.02 8.88 11.18 9.87 11.46 8.74 10.47 8 10.02 8.88"/><polygon points="13.23 0.95 13.09 0.07 11.63 0 11.83 0.99 13.23 0.95"/><polygon points="9.58 1.46 8.76 0.55 7.64 1.12 8.46 2.11 9.58 1.46"/><polygon points="16.16 4.18 17.08 4.29 17.08 3.88 16.16 3.67 16.16 4.18"/><polygon points="13.23 4.12 13.67 4.93 14.32 4.42 14.18 3.88 13.23 4.12"/><path d="M23.19,12c-3.41.3-5.76,2.55-7.23,5.27a24.58,24.58,0,0,0-2.9,7.49,13.54,13.54,0,0,0-.34,4.35h9.07s-2-4.56-1.5-8.74A7.05,7.05,0,0,1,26,14.06a3.48,3.48,0,0,1,2.9,1l.41-.62S26.6,11.68,23.19,12Z" transform="translate(-10.71 -10.9)"/><polygon points="12.55 16.64 11.9 15.31 10.4 15.31 10.74 16.54 12.55 16.64"/><polygon points="9.92 12.28 11.35 12.9 11.29 11.77 9.99 11.09 9.92 12.28"/><polygon points="12.51 6.19 11.83 5.17 11.12 5.82 12.1 6.91 12.51 6.19"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Rails </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/framework-integration/symfony/getting-started/algolia-searchbundle/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#000000'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.8 18.97"><path d="M26.4,10.52a4.93,4.93,0,0,0-3.55,1.92,12.27,12.27,0,0,0-2.17,4,7.7,7.7,0,0,0-2.92-2.06,3.57,3.57,0,0,0-3.25.6,3,3,0,0,0-1,1.47,3.34,3.34,0,0,0,.83,3l.85.92a1.32,1.32,0,0,1,.39,1.33,1.56,1.56,0,0,1-2,.93c-.4-.12-1-.42-.85-.85A5,5,0,0,1,13,21.4a1.06,1.06,0,0,0,.1-.28,1.14,1.14,0,0,0-.63-1.43.94.94,0,0,0-1.29.67c-.25.79.13,2.23,2.14,2.86,2.35.73,4.34-.57,4.62-2.26.18-1.06-.29-1.85-1.16-2.86l-.7-.79a1.32,1.32,0,0,1-.14-1.74,1.51,1.51,0,0,1,1.78-.44c1.27.35,1.83,1.24,2.78,2-.39,1.3-.65,2.6-.88,3.77l-.14.87c-.67,3.59-1.19,5.56-2.53,6.69a2.24,2.24,0,0,1-1.24.51.35.35,0,0,1-.4-.3c0-.22.17-.32.29-.41a.76.76,0,0,0,.43-.79,1.19,1.19,0,0,0-1.26-1.14A1.48,1.48,0,0,0,13.4,27.8c0,1,.95,1.73,2.32,1.68a5.49,5.49,0,0,0,4-2.27,14.28,14.28,0,0,0,2.8-6.67L23,18.06c.25,0,.51.05.8.06,2.34.05,3.52-1.18,3.53-2.08A1,1,0,0,0,26.44,15a1,1,0,0,0-.93.77c-.11.5.74.95.08,1.38a3.74,3.74,0,0,1-2.52.36l.21-1.22c.45-2.31,1-5.15,3.07-5.22.15,0,.71,0,.72.38,0,.12,0,.15-.17.43a1,1,0,0,0,.91,1.59,1.21,1.21,0,0,0,1.09-1.31c0-1-1.1-1.67-2.5-1.62Z" transform="translate(-11.1 -10.52)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Symfony </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/framework-integration/django/setup/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#092e20'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.09 19.37"><path d="M15.64,20.22c0,1.92,1.4,3.06,3.65,2.54V17.67c-2.28-.69-3.64.71-3.65,2.55m3.71-9.91h3.1V25c-3,.48-5.81.79-7.84-.34-2.62-1.47-2.83-6.12-.76-8.19a6.15,6.15,0,0,1,5.44-1.3V10.52C19.28,10.42,19.27,10.33,19.35,10.31Zm8.14,3.24H24.4V10.31h3.09v3.24Zm.05,1.68v6.69c-.13,2.72-.1,4.88-1.1,6.18a5.64,5.64,0,0,1-1,.9,3.14,3.14,0,0,1-1.17.68,5.63,5.63,0,0,1-1.51-.61,11.13,11.13,0,0,0-1.44-.69c1.17-.73,2.29-1.28,2.75-2.75a19.26,19.26,0,0,0,.34-4.95c0-1.79,0-3.87,0-5.45Z" transform="translate(-12.46 -10.31)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Django </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/framework-integration/laravel/getting-started/introduction-to-scout-extended/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#f55247'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.43 14.76"><path d="M31,19.75c-.15-.16-2.11-2.63-2.45-3.05s-.52-.34-.73-.31l-3,.5c-.29.05-.47.16-.29.41l2.14,3.06-6.48,1.57-5.16-8.68c-.21-.31-.25-.41-.72-.39s-4,.32-4.3.34-.53.14-.28.74,4.32,9.42,4.44,9.68a.86.86,0,0,0,1.09.5c.71-.17,3.16-.81,4.5-1.17.71,1.29,2.15,3.91,2.42,4.28s.6.42,1.14.25,6.69-2.39,7-2.51.45-.2.26-.48-1.79-2.43-2.65-3.6l2.92-.78C31.13,20,31.17,19.91,31,19.75Zm-11.8,2.42-3.9.94c-.19.05-.19,0-.22,0s-4.32-9-4.37-9.1-.06-.2,0-.2l3.55-.31c.11,0,.1,0,.15.1S19.2,21.82,19.28,22,19.31,22.16,19.23,22.17Zm10.25,1.94c.05.09.11.15-.07.21s-6.15,2.1-6.26,2.15-.21.06-.36-.15-2.09-3.6-2.09-3.6L27,21.06c.16,0,.21-.08.31.08S29.42,24,29.48,24.11Zm.4-4.52-2.46.61-1.9-2.62c-.05-.08-.1-.15,0-.17L27.94,17c.1,0,.18-.05.3.11s1.77,2.26,1.83,2.34S30,19.56,29.88,19.59Z" transform="translate(-9.68 -12.86)"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Laravel </div> </div> </a> </div> </div> <div class='mx-32 mb-24'> <div class='text-xl font-semibold mb-24'> Tools </div> <div class='column-2 -mx-16'> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/tools/crawler/getting-started/overview/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.05 20.63"><rect x="16.95" y="2.95" width="1.47" height="1.47" style="fill:#a6b0f9"/><rect x="14" y="2.95" width="1.47" height="1.47" style="fill:#a6b0f9"/><rect x="11.05" y="2.95" width="1.47" height="1.47" style="fill:#a6b0f9"/><polygon points="0 11.05 25.05 11.05 25.05 9.58 0 9.58 0 11.05" style="fill:#565db6"/><path d="M5.16,9.58H19.89V1.47H5.16Zm-1.48,0V0H21.37V9.58Z" style="fill:#a6b0f9"/><polygon points="19.89 12.53 19.89 19.16 5.16 19.16 5.16 12.53 3.68 12.53 3.68 20.63 21.37 20.63 21.37 12.53 19.89 12.53" style="fill:#a6b0f9;fill-opacity:0.5"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Crawler </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/tools/cli/get-started/overview/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current'> <svg viewBox="0 0 206.9 205.9" xmlns="http://www.w3.org/2000/svg"><path style="fill:#ebedfe;stroke-width:1.06667" d="M101.2 155c-1.8-4.7-.7-16.3 1.7-18 1.6-1.2 8.2-1.5 31.8-1.5 18.4 0 30.5.4 31.8 1 1.8 1 2 2.4 2 10 0 5.4-.5 9.3-1.2 10-1 1-9.8 1.4-33.1 1.4-31.9 0-31.9 0-33-3zm-58.4-22.3c-2-1.4-2.3-2.7-2.3-10 0-6.3.4-8.7 1.8-9.8.9-.8 8.5-4.6 16.8-8.4 8.3-3.9 15-7.7 15-8.4a61 61 0 0 0-14.9-8.3C51 84 43.5 80.2 42.4 79.2c-1.5-1.3-1.9-3.4-1.9-10 0-9.1 1.6-12.3 5.6-11 4.5 1.4 54.8 25.4 56.6 27 1.5 1.2 1.8 3.3 1.8 11 0 8.5-.2 9.5-2.4 11a1704 1704 0 0 1-54.8 26.2c-1.5.6-3 .3-4.5-.7z"/><path style="fill:#5367fe;stroke-width:1.06667" d="M15.4 203.1c-7-3.6-8.1-4.8-11.8-11.4-3-5.6-3-5.6-3-88.2C.5 20.8.5 20.8 3 15.7A30.6 30.6 0 0 1 17.5 2c4.1-1.8 9-2 86-2 81.8 0 81.8 0 88.3 3.2 7 3.6 12 9.7 14.1 17.2.7 2.6 1 33 .8 85.5-.3 81.5-.3 81.5-3.5 86.6a37.8 37.8 0 0 1-8.5 9c-5.3 3.8-5.3 3.8-89.7 4.1-84.3.3-84.3.3-89.6-2.5zm151.9-46.5c.7-.8 1.2-4.7 1.2-10.1 0-7.6-.2-9-2-10a249 249 0 0 0-31.8-1c-23.6 0-30.2.3-31.8 1.4-2.4 1.8-3.5 13.4-1.7 18 1.1 3 1.1 3 33 3 23.3 0 32.1-.4 33-1.3zm-92.6-36A708 708 0 0 0 102 107c2.2-1.4 2.4-2.4 2.4-11 0-7.6-.3-9.7-1.8-11-1.8-1.5-52.1-25.5-56.6-26.9-4-1.3-5.6 1.9-5.6 11 0 6.6.4 8.7 2 10 1 1 8.5 4.8 16.7 8.6a61 61 0 0 1 15 8.3 69 69 0 0 1-15.1 8.4 169 169 0 0 0-16.8 8.4c-1.4 1.1-1.8 3.5-1.8 9.8 0 7.3.3 8.6 2.3 10 2.7 1.9.5 2.7 31.9-12.1z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> CLI </div> </div> </a> </div> </div> </div> <div class='flex flex-col -mb-24'> <div class='flex flex-row mb-24'> <div class='mx-32'> <div class='text-xl font-semibold mb-24'> Platforms </div> <div class='column-2 -mx-16'> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/integration/magento-2/getting-started/quick-start/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#f26322'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 795 915"> <polygon points="396.9 0 0 229.1 0 686.7 113.3 752.2 112.5 294.5 396.1 130.8 679.7 294.5 679.7 752 793 686.7 793 228.7 396.9 0" fill="#f26322"/> <polygon points="453.1 752.1 396.5 785 339.6 752.4 339.6 294.5 226.4 359.9 226.6 817.6 396.4 915.7 566.4 817.6 566.4 359.9 453.1 294.5 453.1 752.1" fill="#f26322"/> </svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Magento 2 </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/integration/shopify/getting-started/quick-start/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#96bf48'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109.5 124.5"> <path fill="#95BF47" d="M95.9 24.2c-0.1-0.6-0.6-1-1.1-1 -0.5 0-10-0.7-10-0.7s-6.6-6.6-7.4-7.3c-0.7-0.7-2.2-0.5-2.7-0.3 -0.1 0-1.5 0.4-3.7 1.1 -2.2-6.4-6.1-12.3-13-12.3 -0.2 0-0.4 0-0.6 0C55.4 1.1 53 0 50.9 0 34.8 0 27.1 20.1 24.7 30.3c-6.2 1.9-10.7 3.3-11.2 3.5 -3.5 1.1-3.6 1.2-4 4.5C9.1 40.7 0 111.2 0 111.2l71 13.3 38.5-8.3C109.5 116.2 96 24.9 95.9 24.2zM67 17.2c-1.8 0.6-3.8 1.2-6 1.9 0-0.4 0-0.8 0-1.3 0-4-0.6-7.2-1.4-9.7C63.2 8.5 65.5 12.5 67 17.2zM55.2 8.8c1 2.5 1.6 6 1.6 10.8 0 0.2 0 0.5 0 0.7 -3.9 1.2-8.2 2.5-12.4 3.8C46.8 15 51.3 10.5 55.2 8.8zM50.4 4.3c0.7 0 1.4 0.2 2.1 0.7 -5.1 2.4-10.7 8.5-13 20.7 -3.4 1.1-6.7 2.1-9.8 3C32.4 19.4 38.9 4.3 50.4 4.3z"/> <path fill="#5E8E3E" d="M94.8 23.2c-0.5 0-10-0.7-10-0.7s-6.6-6.6-7.4-7.3c-0.3-0.3-0.6-0.4-1-0.5L71 124.5l38.5-8.3c0 0-13.5-91.3-13.6-91.9C95.8 23.6 95.2 23.3 94.8 23.2z"/> <path fill="#FFFFFF" d="M57.9 44.5l-4.7 14.1c0 0-4.2-2.2-9.2-2.2 -7.5 0-7.8 4.7-7.8 5.9 0 6.4 16.8 8.9 16.8 24 0 11.9-7.5 19.5-17.7 19.5 -12.2 0-18.4-7.6-18.4-7.6l3.3-10.8c0 0 6.4 5.5 11.8 5.5 3.5 0 5-2.8 5-4.8 0-8.4-13.8-8.8-13.8-22.6 0-11.6 8.3-22.9 25.2-22.9C54.7 42.6 57.9 44.5 57.9 44.5z"/> </svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Shopify </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/integration/commercetools/getting-started/installation'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#00B39E'> <svg class="block h-full" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M30.72 187.6V83.56C30.72 80.68 33.84 78.88 36.33 80.32L126.43 132.34C127.567 132.997 128.512 133.941 129.169 135.079C129.825 136.216 130.17 137.507 130.17 138.82V242.86C130.17 245.74 127.05 247.54 124.56 246.1L34.46 194.08C33.3225 193.423 32.378 192.479 31.7215 191.341C31.0649 190.204 30.7195 188.913 30.72 187.6Z" fill="#6359FF"/> <path d="M42.41 64.93L131.1 13.72C132.236 13.0616 133.527 12.7149 134.84 12.7149C136.153 12.7149 137.444 13.0616 138.58 13.72L227.27 64.93C230.39 66.73 230.39 71.23 227.27 73.03L138.58 124.24C137.444 124.898 136.153 125.245 134.84 125.245C133.527 125.245 132.236 124.898 131.1 124.24L42.41 73.03C39.29 71.23 39.29 66.73 42.41 64.93Z" fill="#FFC806"/> <path d="M139.52 242.85V146.37C139.52 143.49 142.64 141.69 145.13 143.13L227.28 190.56C230.4 192.36 230.4 196.86 227.28 198.66L145.13 246.09C142.64 247.53 139.52 245.73 139.52 242.85Z" fill="#0BBFBF"/> </svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> commercetools </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/integration/bigcommerce/get-started/installation'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#273A8A'> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" style="max-width:100%; max-height:100%;"> <path d="M33.72 36.432h8.073c2.296 0 3.75-1.263 3.75-3.3 0-1.913-1.454-3.3-3.75-3.3H33.72c-.268 0-.497.23-.497.46v5.663c.038.268.23.46.497.46zm0 13.048h8.34c2.564 0 4.094-1.3 4.094-3.597 0-2-1.454-3.597-4.094-3.597h-8.34c-.268 0-.497.23-.497.46v6.237c.038.306.23.497.497.497zM63.257.16l-23.875 23.8h3.903c6.084 0 9.68 3.826 9.68 7.997 0 3.3-2.22 5.7-4.6 6.772-.383.153-.383.7.038.842 2.755 1.07 4.706 3.94 4.706 7.308 0 4.744-3.176 8.532-9.336 8.532H26.87c-.268 0-.497-.23-.497-.46V36.93L.164 63.023c-.344.344-.115.957.383.957h63.016c.23 0 .42-.2.42-.42V.505c.115-.42-.42-.65-.727-.344z"></path> </svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> BigCommerce </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/integration/salesforce-commerce-cloud-b2c/getting-started/introduction/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#1798c1'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.74 179.01"><path d="M106.55,19.65a44.88,44.88,0,0,1,71.89,9.47,54.42,54.42,0,0,1,22.3-4.74c30.45,0,55.13,24.9,55.13,55.61s-24.68,55.62-55.13,55.62a54.72,54.72,0,0,1-10.86-1.08,40.33,40.33,0,0,1-52.81,16.59A46,46,0,0,1,51.59,149a42.32,42.32,0,0,1-8.78.91A43.22,43.22,0,0,1,21.47,69.46a49.67,49.67,0,0,1,85.08-49.81" transform="translate(-0.13 -0.13)" fill="#00a1e0"/><path d="M37.17,93c-.16.42.06.5.11.58a14.89,14.89,0,0,0,1.46.88,15.63,15.63,0,0,0,7.65,1.79c5.24,0,8.5-2.79,8.5-7.29v-.08c0-4.16-3.68-5.67-7.13-6.75l-.44-.15c-2.61-.85-4.85-1.57-4.85-3.29v-.09c0-1.46,1.31-2.54,3.35-2.54a15.16,15.16,0,0,1,6.66,1.7s.51.33.69-.16c.11-.26,1-2.62,1.07-2.87A.48.48,0,0,0,54,74.1a14.88,14.88,0,0,0-7.52-2H46c-4.81,0-8.16,2.9-8.16,7.06v.09c0,4.38,3.7,5.8,7.17,6.79l.55.17c2.53.78,4.7,1.45,4.7,3.23v.08c0,1.63-1.41,2.84-3.69,2.84a12.4,12.4,0,0,1-6.76-2c-.37-.21-.58-.37-.87-.54a.41.41,0,0,0-.69.24l-1,2.87Z" transform="translate(-0.13 -0.13)" fill="#ffffff"/><path d="M114,93c-.16.42.06.5.11.58a14.89,14.89,0,0,0,1.46.88,15.63,15.63,0,0,0,7.65,1.79c5.24,0,8.5-2.79,8.5-7.29v-.08c0-4.16-3.68-5.67-7.13-6.75l-.44-.15c-2.61-.85-4.85-1.57-4.85-3.29v-.09c0-1.46,1.31-2.54,3.34-2.54a15.2,15.2,0,0,1,6.67,1.7s.51.33.69-.16c.11-.26,1-2.62,1.07-2.87a.49.49,0,0,0-.25-.59,14.88,14.88,0,0,0-7.52-2h-.52c-4.81,0-8.16,2.9-8.16,7.06v.09c0,4.38,3.7,5.8,7.17,6.79l.55.17c2.53.78,4.71,1.45,4.71,3.23v.08c0,1.63-1.42,2.84-3.7,2.84a12.4,12.4,0,0,1-6.76-2c-.37-.21-.59-.36-.86-.54a.46.46,0,0,0-.7.24L114,93Z" transform="translate(-0.13 -0.13)" fill="#ffffff"/><path d="M166.4,84.16a10.71,10.71,0,0,1-1.41,6,4.69,4.69,0,0,1-4.26,2.08,4.64,4.64,0,0,1-4.24-2.08,10.89,10.89,0,0,1-1.39-6,10.79,10.79,0,0,1,1.39-5.93,4.64,4.64,0,0,1,4.24-2.06A4.73,4.73,0,0,1,165,78.23a10.7,10.7,0,0,1,1.4,5.93m4.38-4.71a10.39,10.39,0,0,0-2-3.8,9.67,9.67,0,0,0-3.36-2.56,12.2,12.2,0,0,0-9.39,0,9.67,9.67,0,0,0-3.36,2.56,10.61,10.61,0,0,0-2,3.8,17.35,17.35,0,0,0,0,9.41,10.66,10.66,0,0,0,2,3.81A9.45,9.45,0,0,0,156,95.2a12.44,12.44,0,0,0,9.39,0,9.36,9.36,0,0,0,3.36-2.53,10.44,10.44,0,0,0,2-3.81,17.61,17.61,0,0,0,0-9.41" transform="translate(-0.13 -0.13)" fill="#ffffff"/><path d="M206.74,91.51a.42.42,0,0,0-.56-.26,10.23,10.23,0,0,1-2,.58,16.13,16.13,0,0,1-2.4.17,6.67,6.67,0,0,1-5-1.88c-1.21-1.24-1.88-3.26-1.88-6a9.34,9.34,0,0,1,1.68-5.77,5.74,5.74,0,0,1,4.86-2.14,14.42,14.42,0,0,1,4.63.67s.35.15.51-.31c.38-1.06.67-1.82,1.07-3a.38.38,0,0,0-.27-.51,15.73,15.73,0,0,0-2.92-.74,21.25,21.25,0,0,0-3.28-.22,11.84,11.84,0,0,0-4.88.94,10.08,10.08,0,0,0-3.53,2.55,10.73,10.73,0,0,0-2.13,3.8,15,15,0,0,0-.72,4.72,12.59,12.59,0,0,0,2.92,8.72c1.94,2.15,4.85,3.25,8.64,3.25a17.82,17.82,0,0,0,6.2-1.11.39.39,0,0,0,.18-.52l-1.07-3Z" transform="translate(-0.13 -0.13)" fill="#ffffff"/><path d="M214.4,81.72a8.6,8.6,0,0,1,1.2-3.49,4.7,4.7,0,0,1,4.23-2.15A4.59,4.59,0,0,1,224,78.23a7.27,7.27,0,0,1,1,3.49Zm14.74-3.1a9,9,0,0,0-1.9-3.46A8.58,8.58,0,0,0,224.43,73a10.8,10.8,0,0,0-4.25-.86,11.56,11.56,0,0,0-4.89.95,9.77,9.77,0,0,0-3.41,2.61,10.67,10.67,0,0,0-2,3.84,16.81,16.81,0,0,0-.65,4.74,15.81,15.81,0,0,0,.67,4.73A9.93,9.93,0,0,0,212,92.79a9.75,9.75,0,0,0,3.73,2.47,15.13,15.13,0,0,0,5.38.87c4.28,0,6.54-1,7.46-1.49.17-.09.33-.25.13-.71l-1-2.71a.43.43,0,0,0-.56-.26,14.28,14.28,0,0,1-6.08,1.1,7,7,0,0,1-5.07-1.74c-1.1-1.09-1.64-2.69-1.73-4.94l14.82,0a.44.44,0,0,0,.43-.39,15.81,15.81,0,0,0-.44-6.39Z" transform="translate(-0.13 -0.13)" fill="#ffffff"/><path d="M95.68,81.72a8.6,8.6,0,0,1,1.2-3.49,4.72,4.72,0,0,1,4.24-2.15,4.62,4.62,0,0,1,4.16,2.15,7.5,7.5,0,0,1,1,3.49Zm14.74-3.1a9.16,9.16,0,0,0-1.89-3.46A8.79,8.79,0,0,0,105.72,73a10.8,10.8,0,0,0-4.25-.86,11.56,11.56,0,0,0-4.89.95,9.71,9.71,0,0,0-3.42,2.61,10.67,10.67,0,0,0-2,3.84,16.81,16.81,0,0,0-.65,4.74A15.81,15.81,0,0,0,91.18,89a9.53,9.53,0,0,0,5.87,6.24,15.13,15.13,0,0,0,5.38.87c4.28,0,6.54-1,7.47-1.49.16-.09.32-.25.12-.71l-1-2.71a.43.43,0,0,0-.56-.26,14.3,14.3,0,0,1-6.09,1.1,7.06,7.06,0,0,1-5.07-1.74c-1.1-1.09-1.63-2.69-1.73-4.94l14.83,0a.44.44,0,0,0,.43-.39,15.92,15.92,0,0,0-.45-6.39Z" transform="translate(-0.13 -0.13)" fill="#ffffff"/><path d="M63.64,91.43a2.82,2.82,0,0,1-.85-.88,3.47,3.47,0,0,1-.45-1.92,3.22,3.22,0,0,1,1.33-2.87s1.27-1.12,4.3-1.08A29.84,29.84,0,0,1,72,85v6.74h0a30.69,30.69,0,0,1-4,.53c-3,.18-4.36-.87-4.35-.87M69.54,81c-.6,0-1.38-.07-2.31-.07a14,14,0,0,0-3.65.47,9.58,9.58,0,0,0-3.1,1.43,6.93,6.93,0,0,0-2.94,5.86,7.79,7.79,0,0,0,.68,3.39,6.1,6.1,0,0,0,1.93,2.31,7.92,7.92,0,0,0,3,1.31,17.47,17.47,0,0,0,3.93.4,27,27,0,0,0,4.5-.37c1.45-.25,3.24-.61,3.73-.72l1-.27a.46.46,0,0,0,.34-.48V80.72c0-3-.79-5.18-2.35-6.54s-3.85-2.05-6.81-2.05a24.94,24.94,0,0,0-4,.36s-3.24.63-4.58,1.67a.47.47,0,0,0-.13.59l1,2.82a.37.37,0,0,0,.49.24,1.47,1.47,0,0,0,.24-.12,15,15,0,0,1,6.46-1.5,5.94,5.94,0,0,1,3.66,1c.81.62,1.22,1.55,1.22,3.53v.62c-1.27-.18-2.44-.28-2.44-.28" transform="translate(-0.13 -0.13)" fill="#ffffff"/><path d="M189.1,73.38a.39.39,0,0,0-.22-.53,12.46,12.46,0,0,0-2.49-.43,7.37,7.37,0,0,0-3.82.62,6.69,6.69,0,0,0-2.51,1.84v-1.8a.42.42,0,0,0-.42-.45h-3.8a.43.43,0,0,0-.43.45V95.19a.45.45,0,0,0,.45.45h3.9a.45.45,0,0,0,.45-.45v-11a12.89,12.89,0,0,1,.49-3.89,5.57,5.57,0,0,1,1.3-2.18,4.56,4.56,0,0,1,1.83-1.1,7.2,7.2,0,0,1,2-.28,8.44,8.44,0,0,1,1.63.2c.28,0,.44-.14.53-.4.26-.68,1-2.71,1.12-3.11" transform="translate(-0.13 -0.13)" fill="#ffffff"/><path d="M152.54,63.13a12.54,12.54,0,0,0-1.46-.35,11.9,11.9,0,0,0-2-.15,8.48,8.48,0,0,0-6.27,2.25,12.21,12.21,0,0,0-3,6.72l-.18,1h-3.37a.5.5,0,0,0-.5.43l-.55,3.08c0,.29.09.48.48.48H139l-3.32,18.55a23.22,23.22,0,0,1-.89,3.65,7.38,7.38,0,0,1-1,2.11,2.77,2.77,0,0,1-1.35,1,5.56,5.56,0,0,1-1.75.25,6.76,6.76,0,0,1-1.18-.13,3.86,3.86,0,0,1-.81-.26.4.4,0,0,0-.53.24c-.12.31-1,2.71-1.1,3a.44.44,0,0,0,.23.59,10.65,10.65,0,0,0,1.35.4,9.16,9.16,0,0,0,2.17.2,10.88,10.88,0,0,0,3.64-.56,6.89,6.89,0,0,0,2.74-1.91,9.65,9.65,0,0,0,1.93-3.32,28.57,28.57,0,0,0,1.3-5l3.34-18.9h4.88a.5.5,0,0,0,.5-.43l.55-3.09c0-.29-.08-.47-.48-.47h-4.74a20,20,0,0,1,.78-3.35,4.39,4.39,0,0,1,1-1.58,3.12,3.12,0,0,1,1.24-.77,5.26,5.26,0,0,1,1.59-.23,6.14,6.14,0,0,1,1.22.12A7.52,7.52,0,0,1,151,67c.48.14.55,0,.64-.23l1.14-3.11a.4.4,0,0,0-.28-.52" transform="translate(-0.13 -0.13)" fill="#ffffff"/><path d="M86.32,95.19a.43.43,0,0,1-.42.45H82a.43.43,0,0,1-.42-.45V63.55a.43.43,0,0,1,.42-.44H85.9a.43.43,0,0,1,.42.44V95.19Z" transform="translate(-0.13 -0.13)" fill="#ffffff"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Salesforce Commerce Cloud B2C </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/tools/crawler/netlify-plugin/quick-start/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#00AD9F'> <svg fill="none" height="113" viewBox="0 0 128 113" width="128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h128v112.635h-128z"/></clipPath><g clip-path="url(#a)"><path d="m34.593 94.0509h-1.2086l-6.033-6.033v-1.2085l9.2229-9.2228h6.3896l.8519.8519v6.3896z" fill="#05bdba"/><path d="m27.3514 25.816v-1.2086l6.033-6.033h1.2086l9.2228 9.2228v6.3896l-.8519.852h-6.3896z" fill="#05bdba"/><path d="m80.4594 74.6047h-8.777l-.7331-.733v-20.5458c0-3.6554-1.4364-6.4887-5.8447-6.5877-2.2686-.0595-4.8641 0-7.6378.1089l-.4161.426v26.5887l-.7331.733h-8.777l-.7331-.733v-35.0982l.7331-.7331h19.7533c7.6774 0 13.8986 6.2212 13.8986 13.8986v21.9426z" fill="#014847"/><g fill="#05bdba"><path d="m35.8412 61.4491h-35.10813l-.73307-.7331v-8.7968l.73307-.7331h35.10813l.7331.7331v8.7968z"/><path d="m127.277 61.4491h-35.1083l-.7331-.7331v-8.7968l.7331-.7331h35.1083l.733.7331v8.7968z"/><path d="m58.9428 27.0642v-26.33113l.7331-.73307h8.7968l.7331.73307v26.33113l-.7331.733h-8.7968z"/><path d="m58.9428 111.902v-26.3309l.7331-.7331h8.7968l.7331.7331v26.3309l-.7331.733h-8.7968z"/></g></g></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Netlify </div> </div> </a> <a class='flex items-center text-grey-700 font-sans-alt pb-24 break-avoid-column mx-16 group' href='/doc/integration/zendesk/get-started/'> <div class='flex-grow-0 flex-shrink-0 mr-16'> <div class='bg-y-gradient-white-grey-200 shadow h-32 w-32 p-8 rounded group-hover:shadow-md transition-fast-out'> <div class='flex items-center justify-center w-full h-full fill-current' style='color:#00333B'> <svg xmlns="http://www.w3.org/2000/svg" class="block h-full" viewBox="0 0 360 258.79"><defs><style>.cls-1{fill:#03363d;}</style></defs><polygon class="cls-1" points="173.71 93.22 173.71 206.08 80.23 206.08 173.71 93.22"/><path class="cls-1" d="M173.71,52.71a46.74,46.74,0,0,1-93.48,0Z"/><polygon class="cls-1" points="189.11 165.57 189.11 52.71 282.6 52.71 189.11 165.57"/><path class="cls-1" d="M245.75,192.7a2.15,2.15,0,0,0-2.25,1.88h4.35A2,2,0,0,0,245.75,192.7Z"/><path class="cls-1" d="M235.85,159.33a46.75,46.75,0,0,0-46.74,46.75h93.48A46.74,46.74,0,0,0,235.85,159.33Z"/></svg> </div> </div> </div> <div class='w-full'> <div class='text-base font-normal text-grey-700'> Zendesk </div> </div> </a> </div> </div> </div> </div> </div> </div> </div> </div> </header> <div class='flex-1 mx-auto w-full max-w-1440 bg-white pt-72'> <div class='flex h-full'> <aside class='fixed top-0 flex-shrink-0 bg-x-gradient-grey-200-grey-400-80 leading-tight lg:w-376 lg:flex lg:flex-col z-30 h-screen w-full hidden' data-target='app.sidebar'> <div class='lg:block h-72 flex-grow-0 flex-shrink-0 hidden'></div> <div class='flex-grow w-inherit overflow-y-auto h-full' data-controller='sidebar'> <div class='h-full'> <div class='px-40 pt-48 pb-24'> <div class='mb-32 uppercase text-xs text-grey-700 tracking-wide font-semibold leading-none'> React InstantSearch </div> <ul> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Basics </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/instantsearch/react/'> <InstantSearch> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/use-instantsearch/react/'> useInstantSearch() </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/index-widget/react/'> <Index> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/search-box/react/'> <SearchBox> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/configure/react/'> <Configure> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/autocomplete/react/'> useAutocomplete() </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/voice-search/react/'> useVoiceSearch() </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/insights/react/'> insights </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/middleware/react/'> middleware </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/render-state/react/'> renderState </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/connector/react/'> useConnector() </a> </li> </ul> </li> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Results </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/hits/react/'> <Hits> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/infinite-hits/react/'> <InfiniteHits> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/highlight/react/'> <Highlight> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/snippet/react/'> <Snippet> </a> </li> </ul> </li> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Recommendations </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/frequently-bought-together/react/'> <FrequentlyBoughtTogether> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/related-products/react/'> <RelatedProducts> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/trending-items/react/'> <TrendingItems> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/trending-facets/react/'> <TrendingFacets> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/looking-similar/react/'> <LookingSimilar> </a> </li> </ul> </li> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Refinements </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/refinement-list/react/'> <RefinementList> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/color-refinement-list/react/'> <ColorRefinementList> </a> <span class='ml-4 inline-block align-middle bg-xenon-600-opacity-20 text-xenon-600 px-8 py-5 text-xs rounded-full font-bold leading-none tracking-wide uppercase'> labs </span> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/dynamic-facets/react/'> <DynamicWidgets> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/hierarchical-menu/react/'> <HierarchicalMenu> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/range-slider/react/'> useRange() </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/menu/react/'> <Menu> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/current-refinements/react/'> <CurrentRefinements> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/range-input/react/'> <RangeInput> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/menu-select/react/'> <MenuSelect> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/toggle-refinement/react/'> <ToggleRefinement> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/numeric-menu/react/'> useNumericMenu() </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/rating-menu/react/'> useRatingMenu() </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/clear-refinements/react/'> <ClearRefinements> </a> </li> </ul> </li> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Pagination </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/pagination/react/'> <Pagination> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/hits-per-page/react/'> <HitsPerPage> </a> </li> </ul> </li> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Metadata </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/breadcrumb/react/'> <Breadcrumb> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/stats/react/'> <Stats> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/powered-by/react/'> <PoweredBy> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/state-results/react/'> StateResults </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/query-rule-custom-data/react/'> <QueryRulesCustomData> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/query-rule-context/react/'> <QueryRuleContext> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/query-rules/react/'> useQueryRules() </a> </li> </ul> </li> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Sorting </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/sort-by/react/'> <SortBy> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/relevant-sort/react/'> useRelevantSort() </a> </li> </ul> </li> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Geo Search </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/geo-search/react/'> useGeoSearch() </a> </li> </ul> </li> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Routing </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/simple-state-mapping/react/'> simple </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/history-router/react/'> history </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/ui-state/react/'> uiState </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/instantsearch-next-router/react/'> createInstantSearchRouterNext() </a> </li> </ul> </li> <li class='mt-32'> <span class='mb-16 flex items-center capitalize text-grey-1100'> Server </span> <ul> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/ssr-provider/react/'> <InstantSearchSSRProvider> </a> </li> <li class='mt-8 leading-normal'> <a class='hover:text-xenon-600 text-grey-700' data-active='false' data-target='sidebar.link' href='/doc/api-reference/widgets/server-state/react/'> getServerState() </a> </li> </ul> </li> <ul class='mb-16'> <li class='flex mt-16 mb-8 uppercase text-xs text-grey-700-opacity-80 tracking-wide font-semibold'> <span> Guides </span> </li> </ul> <ul></ul> <li class='py-2 pl-16 border-l-2 border-solid leading-normal border-grey-400-opacity-40'> <a class='flex justify-between group text-grey-700 hover:text-xenon-600' href='/doc/guides/building-search-ui/going-further/server-side-rendering/react/'> Server-side rendering </a> </li> </ul> </div> </div> </div> <div class='px-40'> <div class='flex flex-wrap items-center lg:justify-between -mx-16 py-16 border-grey-400-opacity-60 border-solid border-t'> <a class='block mx-16 py-8 text-sm text-grey-700 hover:text-grey-800 transition-fast-out' href='https://www.algolia.com/' target='_blank'> Algolia.com </a> <a class='block mx-16 py-8 text-sm text-grey-700 hover:text-grey-800 transition-fast-out' href='https://www.algolia.com/developers/' target='_blank'> Developer Hub </a> </div> </div> <button class='flex lg:hidden absolute items-center top-0 right-0 mt-48 mr-40 text-grey-700-opacity-90 hover:text-grey-700 fill-current transition-fast-out focus:outline-none focus:shadow-outline' data-action='click->app#toggleSidebar'> <span class='flex items-center h-16 w-16 mr-16 flex-grow-0 flex-shrink-0'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M8.41,7l5.3-5.29A1,1,0,1,0,12.29.29L7,5.59,1.71.29A1,1,0,0,0,.29,1.71L5.59,7,.29,12.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L7,8.41l5.29,5.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"/></svg> </span> <span class='block flex-grow-0 flex-shrink-0 mt-2 font-sans-alt text-base leading-none'> Close </span> </button> </aside> <div class='w-full lg:ml-376 overflow-x-hidden'> <div class='flex p-24 md:px-56 md:pt-48 md:pb-24'> <main class='w-full min-h-full lg:max-w-648'> <div class='text-grey-1000 leading-normal'> <section class="mb-48"> <div class="mb-4 flex justify-between items-start"> <div class="text-xs leading-tight"> <div class="font-sans-alt uppercase font-semibold tracking-wide"> UI libraries / React InstantSearch </div> </div> </div> <div class="flex justify-between"> <h1 class="md:text-4xl lg:text-5xl text-3xl leading-tall tracking-tight font-bold hyphenated"> React InstantSearch </h1> <div class="mt-16 ml-16 relative" data-target="app.editLinkContainer"> <a class='absolute top-0 right-0 edit-link w-24 h-24 items-center justify-center bg-grey-400-opacity-40 hover:bg-grey-400-opacity-60 rounded-full transition-fast-out hidden' data-segment-message='Clicked Edit Link' data-segment-source='Page (main title)' data-segment='' href='https://github.com/algolia/doc/edit/master/source/doc/api-reference/widgets.html.haml' rel='nofollow noopener' target='_blank'> <span class='flex items-center justify-center w-16 h-16 text-grey-700 fill-current'> <svg class="h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.58 31.77"><path d="M16.29,0a16.29,16.29,0,0,0-5.15,31.75c.82.15,1.11-.36,1.11-.79s0-1.41,0-2.77C7.7,29.18,6.74,26,6.74,26a4.36,4.36,0,0,0-1.81-2.39c-1.47-1,.12-1,.12-1a3.43,3.43,0,0,1,2.49,1.68,3.48,3.48,0,0,0,4.74,1.36,3.46,3.46,0,0,1,1-2.18c-3.62-.41-7.42-1.81-7.42-8a6.3,6.3,0,0,1,1.67-4.37,5.94,5.94,0,0,1,.16-4.31s1.37-.44,4.48,1.67a15.41,15.41,0,0,1,8.16,0c3.11-2.11,4.47-1.67,4.47-1.67A5.91,5.91,0,0,1,25,11.07a6.3,6.3,0,0,1,1.67,4.37c0,6.26-3.81,7.63-7.44,8a3.85,3.85,0,0,1,1.11,3c0,2.18,0,3.94,0,4.47s.29.94,1.12.78A16.29,16.29,0,0,0,16.29,0Z"/></svg> <span aria-hidden='true' class='hidden'> Edit this page </span> </span> </a> <a class='unstyled-link text-base absolute top-0 right-0 edit-link w-24 h-24 items-center justify-center bg-grey-400-opacity-40 hover:bg-grey-400-opacity-60 rounded-full transition-fast-out hidden mr-32' data-segment-message='Clicked Edit in Atwood Link' data-segment-source='Page (main title)' data-segment='' href='https://atwood-editor.algolia.com/?gh-paths=source/doc/api-reference/widgets.html.haml' rel='nofollow noopener' target='_blank' title='Edit this page'> <span class='flex items-center justify-center w-16 h-16 text-grey-700 fill-current font-bold'> A <span aria-hidden='true' class='hidden'> Edit this page </span> </span> </a> </div> </div> </section> <div class='content mb-32' data-controller='report-link'> <p> Before building your UI, <a href='/doc/guides/building-search-ui/installation/react/'> install InstantSearch. </a> For more information, see <a href='/doc/guides/building-search-ui/what-is-instantsearch/react/'> What is InstantSearch? </a> </p> <p> All the available widgets and Hooks are listed below. </p> <section> <h2> Basics </h2> <table class='w-full leading-normal'> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/instantsearch/react/'> <InstantSearch> </a> </td> <td class='align-top py-8'> <p>The root wrapper component for all widgets and Hooks.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/use-instantsearch/react/'> useInstantSearch() </a> </td> <td class='align-top py-8'> <p>React Hook to access the InstantSearch API.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/index-widget/react/'> <Index> </a> </td> <td class='align-top py-8'> <p>The provider component for an Algolia index.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/search-box/react/'> <SearchBox> </a> </td> <td class='align-top py-8'> <p>A widget to display a search box.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/configure/react/'> <Configure> </a> </td> <td class='align-top py-8'> <p>A widget to forward search parameters to Algolia.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/autocomplete/react/'> useAutocomplete() </a> </td> <td class='align-top py-8'> <p>React Hook to use an Autocomplete connector.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/voice-search/react/'> useVoiceSearch() </a> </td> <td class='align-top py-8'> <p>React Hook to use a voice search connector.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/insights/react/'> insights </a> </td> <td class='align-top py-8'> <p>A middleware to help set the <code class="highlighter-rouge">userToken</code> for insights purposes, and send events from built-in and custom widgets.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/middleware/react/'> middleware </a> </td> <td class='align-top py-8'> <p>With the middleware API, you can inject functionality into InstantSearch.js.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/render-state/react/'> renderState </a> </td> <td class='align-top py-8'> <p>The <code class="highlighter-rouge">renderState</code> provides access to all the data to render the widgets, including the methods to refine the search.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/connector/react/'> useConnector() </a> </td> <td class='align-top py-8'> <p>React Hook to use an InstantSearch connector.</p> </td> </tr> </table> </section> <section> <h2> Results </h2> <table class='w-full leading-normal'> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/hits/react/'> <Hits> </a> </td> <td class='align-top py-8'> <p>A widget to display a list of search results.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/infinite-hits/react/'> <InfiniteHits> </a> </td> <td class='align-top py-8'> <p>A widget to display an infinite list of results.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/highlight/react/'> <Highlight> </a> </td> <td class='align-top py-8'> <p>Highlighting visually emphasizes matching terms in your search results to help them stand out.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/snippet/react/'> <Snippet> </a> </td> <td class='align-top py-8'> <p>A widget that displays attributes in your search results in a shorter form (a snippet).</p> </td> </tr> </table> </section> <section> <h2> Recommendations </h2> <table class='w-full leading-normal'> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/frequently-bought-together/react/'> <FrequentlyBoughtTogether> </a> </td> <td class='align-top py-8'> <p>A widget to display a list of frequently bought together items.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/related-products/react/'> <RelatedProducts> </a> </td> <td class='align-top py-8'> <p>A widget to display a list of related products and related content.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/trending-items/react/'> <TrendingItems> </a> </td> <td class='align-top py-8'> <p>A widget to display a list of trending items.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/trending-facets/react/'> <TrendingFacets> </a> </td> <td class='align-top py-8'> <p>A widget to display a list of <a href="/doc/guides/algolia-recommend/overview/#trending-items-and-trending-facet-values">Trending Facets</a>.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/looking-similar/react/'> <LookingSimilar> </a> </td> <td class='align-top py-8'> <p>A widget to display a list of visually similar products.</p> </td> </tr> </table> </section> <section> <h2> Refinements </h2> <table class='w-full leading-normal'> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/refinement-list/react/'> <RefinementList> </a> </td> <td class='align-top py-8'> <p>A widget to display multi-select facets.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/color-refinement-list/react/'> <ColorRefinementList> </a> </td> <td class='align-top py-8'> <p>A widget that filters results based on color facet values. It helps users quickly visualize the kind of color that products have.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/dynamic-facets/react/'> <DynamicWidgets> </a> </td> <td class='align-top py-8'> <p>A widget to conditionally render other widgets based on the index settings.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/hierarchical-menu/react/'> <HierarchicalMenu> </a> </td> <td class='align-top py-8'> <p>Widget that displays a hierarchical menu.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/range-slider/react/'> useRange() </a> </td> <td class='align-top py-8'> <p>React Hook to filter search results within a numeric range.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/menu/react/'> <Menu> </a> </td> <td class='align-top py-8'> <p>A widget to display a menu to let users choose a single value.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/current-refinements/react/'> <CurrentRefinements> </a> </td> <td class='align-top py-8'> <p>A widget to display the list of active refinements in the search.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/range-input/react/'> <RangeInput> </a> </td> <td class='align-top py-8'> <p>A widget to select a numerical range using minimum and maximum inputs.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/menu-select/react/'> <MenuSelect> </a> </td> <td class='align-top py-8'> <p>A widget to use a menu select connector.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/toggle-refinement/react/'> <ToggleRefinement> </a> </td> <td class='align-top py-8'> <p>A widget to provide an on/off filter.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/numeric-menu/react/'> useNumericMenu() </a> </td> <td class='align-top py-8'> <p>React Hook that shows a list of numeric filters that are pre-configured when creating the widget.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/rating-menu/react/'> useRatingMenu() </a> </td> <td class='align-top py-8'> <p>React Hook to use a rating menu connector.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/clear-refinements/react/'> <ClearRefinements> </a> </td> <td class='align-top py-8'> <p>A widget to reset the active refinements of the search.</p> </td> </tr> </table> </section> <section> <h2> Pagination </h2> <table class='w-full leading-normal'> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/pagination/react/'> <Pagination> </a> </td> <td class='align-top py-8'> <p>A widget to display a pagination to browse pages.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/hits-per-page/react/'> <HitsPerPage> </a> </td> <td class='align-top py-8'> <p>A widget to display a menu of options to change the number of results per page.</p> </td> </tr> </table> </section> <section> <h2> Metadata </h2> <table class='w-full leading-normal'> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/breadcrumb/react/'> <Breadcrumb> </a> </td> <td class='align-top py-8'> <p>A widget to display navigation links to see where the current page is in relation to the facet鈥檚 hierarchy.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/stats/react/'> <Stats> </a> </td> <td class='align-top py-8'> <p>A widget that displays the total number of matching hits and the time it took to get them (time spent in the Algolia server).</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/powered-by/react/'> <PoweredBy> </a> </td> <td class='align-top py-8'> <p>A widget to display the Algolia logo to redirect to the Algolia website.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/state-results/react/'> StateResults </a> </td> <td class='align-top py-8'> <p>A widget for accessing the state and results of InstantSearch.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/query-rule-custom-data/react/'> <QueryRulesCustomData> </a> </td> <td class='align-top py-8'> <p>A widget to display custom data from rules.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/query-rule-context/react/'> <QueryRuleContext> </a> </td> <td class='align-top py-8'> <p>A widget to set Rule contexts without rendering anything.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/query-rules/react/'> useQueryRules() </a> </td> <td class='align-top py-8'> <p>React Hook to set custom Rule contexts and display custom data from Rules.</p> </td> </tr> </table> </section> <section> <h2> Sorting </h2> <table class='w-full leading-normal'> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/sort-by/react/'> <SortBy> </a> </td> <td class='align-top py-8'> <p>A widget to sort by specified indices.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/relevant-sort/react/'> useRelevantSort() </a> </td> <td class='align-top py-8'> <p>React Hook to use a relevant sort connector.</p> </td> </tr> </table> </section> <section> <h2> Geo Search </h2> <table class='w-full leading-normal'> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/geo-search/react/'> useGeoSearch() </a> </td> <td class='align-top py-8'> <p>A React Hook that displays search results on a Google Map.</p> </td> </tr> </table> </section> <section> <h2> Routing </h2> <table class='w-full leading-normal'> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/simple-state-mapping/react/'> simple </a> </td> <td class='align-top py-8'> <p>A state mapping used by default with <a href="/doc/api-reference/widgets/instantsearch/react/#widget-param-routing">routing</a>.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/history-router/react/'> history </a> </td> <td class='align-top py-8'> <p>A router used by default with <a href="/doc/api-reference/widgets/instantsearch/react/#widget-param-routing">routing</a>.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/ui-state/react/'> uiState </a> </td> <td class='align-top py-8'> <p>An object that represents a search UI state.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/instantsearch-next-router/react/'> createInstantSearchRouterNext() </a> </td> <td class='align-top py-8'> <p>The function that creates a Next.js-compatible InstantSearch router to pass to <a href="/doc/api-reference/widgets/instantsearch/react/#widget-param-routing">routing</a>.</p> </td> </tr> </table> </section> <section> <h2> Server </h2> <table class='w-full leading-normal'> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/ssr-provider/react/'> <InstantSearchSSRProvider> </a> </td> <td class='align-top py-8'> <p>The provider component that forwards the server state to <a href="/doc/api-reference/widgets/instantsearch/react/"><code class="highlighter-rouge"><InstantSearch></code></a>.</p> </td> </tr> <tr class='border-solid border-b border-grey-700-opacity-10'> <td class='md:w-192 w-half py-8 align-top'> <a class='text-grey-700 hover:text-grey-800' href='/doc/api-reference/widgets/server-state/react/'> getServerState() </a> </td> <td class='align-top py-8'> <p>The function that retrieves the server state to pass to <a href="/doc/api-reference/widgets/ssr-provider/react/"><code class="highlighter-rouge"><InstantSearchSSRProvider></code></a>.</p> </td> </tr> </table> </section> </div> <div class='mt-88'> <div class='-m-24'> <section class='p-24 w-full' data-controller='feedback-form' data-feedback-form-highlight-class='highlighted' data-target='app.form'> <div class='flex items-center mb-32 font-semibold text-xl'> <span class='block h-1 flex-grow bg-grey-700-opacity-10'></span> <span class='mx-32' data-regular-title='Did you find this page helpful?' data-report-title='Any feedback to share?' data-target='feedback-form.title'> Did you find this page helpful? </span> <span class='block h-1 flex-grow bg-grey-700-opacity-10'></span> </div> <form action='#' data-controller='support-form spam-prevention' data-spam-prevention-endpoint='https://docapi-prod.platform.algolia.net/feedback-form' data-spam-prevention-latency='3000' data-target='feedback-form.form spam-prevention.form' method='POST'> <div class='flex justify-center mb-32'> <button class='group mx-8 flex-grow-0 flex-shrink-0 flex justify-center items-center rounded-full w-64 h-64 stroke-current transition-fast-out pointer-events-none bg-green-200-opacity-40 text-green-500' data-action='click->feedback-form#upvote' data-disabled-class='pointer-events-none bg-green-200-opacity-40 text-green-500' data-disabled-title='Please wait one second before voting.' data-enabled-class='cursor-pointer bg-green-200-opacity-70 hover:bg-green-200 text-green-700' data-enabled-title='Yes, I found this page helpful.' data-nonselected-class='opacity-50' data-placeholder='What did you like about this page?' data-segment-message='Upvoted Page' data-segment='page-upvote' data-target='feedback-form.upvote' title='Please wait one second before voting.' type='button'> <div class='group-hover:-rotate-8 transition-fast-out w-24 h-24 p-2 -mt-2'> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up block w-full h-full"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg> <span class='sr-only'> Yes, I found this page helpful. </span> </div> </button> <button class='group mx-8 flex-grow-0 flex-shrink-0 flex justify-center items-center rounded-full w-64 h-64 stroke-current transition-fast-out pointer-events-none bg-red-200-opacity-20 text-red-300' data-action='click->feedback-form#downvote' data-disabled-class='pointer-events-none bg-red-200-opacity-20 text-red-300' data-disabled-title='Please wait one second before voting.' data-enabled-class='cursor-pointer bg-red-200-opacity-40 hover:bg-red-200-opacity-70 text-red-500' data-enabled-title='No, I didn't find this page helpful.' data-nonselected-class='opacity-50' data-placeholder='What can we improve about this page?' data-segment-message='Downvoted Page' data-segment='page-downvote' data-target='feedback-form.downvote' title='Please wait one second before voting.' type='button'> <div class='group-hover:-rotate-8 transition-fast-out w-24 h-24 p-2 mt-2'> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-down block w-full h-full"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path></svg> <span class='sr-only'> No, I didn't find this page helpful. </span> </div> </button> </div> <div class='hidden' data-target='feedback-form.content' data-toggle-class='hidden' style='max-width:760px;margin-inline:auto;'> <div class='content'> <div class='alert alert-info mb-16'> <p>We appreciate your feedback! Please note that we can't respond.</p> <p> If you have questions, please reach out to <a href='https://www.algolia.com/support/?contact=' rel='noopener noreferrer' target='_blank'>the support team</a><span>.</span></p> </div> </div> <input class='leading-normalized' name='subject' type='hidden' value='[doc][feedback]'> <div class='hidden mt-16 blue-links' data-target='feedback-form.callback' data-toggle-class='hidden'> Looks like there's an issue on our end. Please copy the message below and send it to <a class='text-color-inherit' href='https://www.algolia.com/support/?contact=' rel='noopener noreferrer' target='_blank'>the support team</a><span>.</span></div> <textarea class='block w-full h-184 mt-16 bg-grey-200 rounded py-16 px-24 text-grey-700 resize-none shadow-none outline-none leading-normal' data-regular-placeholder='What's on your mind?' data-success-message='Thanks for submitting your feedback!' data-target='app.feedbackFormBody feedback-form.body' id='report-description' name='body' placeholder='What's on your mind?' required='required'></textarea> <input class='hidden' data-target='feedback-form.important' name='important' type='checkbox'> <div class='flex justify-center mt-32'> <button class='btn-skeuomorphic py-16 px-40 focus:outline-none focus:shadow-outline' data-regular-label='Submit' data-success-label='Submit another feedback' data-target='feedback-form.submit'> Submit </button> </div> </div> </form> </section> </div> <footer class='mt-48 text-center text-grey-700 text-sm'> <p> 漏 Algolia 路 <a href="https://www.algolia.com/policies/privacy/" class="text-xenon-600 hover:underline">Privacy Policy</a> 路 <button class="text-xenon-600 hover:underline" onclick="window.OneTrust.ToggleInfoDisplay();">Cookie settings</button> </p> </footer> </div> <script> window.ALGOLIA_DOCS_PAGE_UI = "react"; </script> </div> <div data-search-results=''></div> </main> <div class='ml-64 relative w-280 xxl:block hidden'> <div class='fixed w-inherit'> <div class='flex w-full flex-col' data-controller='language-switcher'> <div class='h-48 flex items-center bg-y-gradient-white-grey-200 font-sans-alt text-grey-800 font-semibold shadow cursor-pointer transition-fast-out rounded hover:shadow-md py-8 px-16 text-grey-1000 cursor-pointer' data-action='click@window->language-switcher#hide click->language-switcher#toggle'> <div class='w-full' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-react'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex items-center flex-grow ml-4 mr-8'> <span class='inline-block mr-8 text-sm mr-8 mt-2'> React InstantSearch </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v7 </span> </div> <div class='flex items-center'> <div class='flex-grow-0 flex-shrink-0 h-4 text-grey-800 opacity-75 fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8"><path d="M7,8a1,1,0,0,1-.71-.29l-6-6A1,1,0,0,1,1.71.29L7,5.59,12.29.29a1,1,0,1,1,1.42,1.42l-6,6A1,1,0,0,1,7,8Z"/></svg> </div> </div> </div> </div> </div> <div class='bg-y-gradient-white-grey-200 shadow rounded my-32 py-8 cursor-pointer hidden' data-target='language-switcher.list'> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/js/'> <div class='js' data-action='click->language-switcher#flavor' data-language='js' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-js'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> InstantSearch.js </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v4 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/react/'> <div class='react' data-action='click->language-switcher#flavor' data-language='react' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-react'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> React InstantSearch </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v7 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/vue/'> <div class='vue' data-action='click->language-switcher#flavor' data-language='vue' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-vue'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> Vue InstantSearch </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v4 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/ios/'> <div class='ios' data-action='click->language-switcher#flavor' data-language='ios' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-ios'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> InstantSearch iOS </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v7 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/android/'> <div class='android' data-action='click->language-switcher#flavor' data-language='android' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-android'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> InstantSearch Android </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v3 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/flutter/'> <div class='flutter' data-action='click->language-switcher#flavor' data-language='flutter' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-flutter'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> Algolia for Flutter </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v1 </span> </div> </div> </div> </a> </div> </div> </div> </div> </div> </div> </div> </div> <a class='fixed xxl:block hidden right-0 bottom-0 group mr-32 py-8 px-16 mb-24 btn-skeuomorphic rounded font-sans-alt transition-fast-out z-20' data-segment-message='Clicked Need Help' data-segment='need-help' href='https://www.algolia.com/support/'> <span class='flex items-center py-2'> <img src="/doc/assets/images/support/support-75277c68.svg" class="block mr-8" alt="Support" /> <span class='text-grey-700 group-hover:text-grey-800 mt-4'> Need help? </span> </span> </a> <div class='fixed xxl:hidden block min-w-136 right-0 bottom-0 mr-32 mb-24 z-20'> <div class='flex w-full flex-col-reverse' data-controller='language-switcher'> <div class='h-48 flex items-center bg-y-gradient-white-grey-200 font-sans-alt text-grey-800 font-semibold shadow cursor-pointer transition-fast-out rounded hover:shadow-md py-8 px-16 text-grey-1000 cursor-pointer' data-action='click@window->language-switcher#hide click->language-switcher#toggle'> <div class='w-full' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-react'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex items-center flex-grow ml-4 mr-8'> <span class='inline-block mr-8 text-sm mr-8 mt-2'> React InstantSearch </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v7 </span> </div> <div class='flex items-center'> <div class='flex-grow-0 flex-shrink-0 h-4 text-grey-800 opacity-75 fill-current'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8"><path d="M7,8a1,1,0,0,1-.71-.29l-6-6A1,1,0,0,1,1.71.29L7,5.59,12.29.29a1,1,0,1,1,1.42,1.42l-6,6A1,1,0,0,1,7,8Z"/></svg> </div> </div> </div> </div> </div> <div class='bg-y-gradient-white-grey-200 shadow rounded my-32 py-8 cursor-pointer hidden' data-target='language-switcher.list'> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/js/'> <div class='js' data-action='click->language-switcher#flavor' data-language='js' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-js'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> InstantSearch.js </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v4 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/react/'> <div class='react' data-action='click->language-switcher#flavor' data-language='react' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-react'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> React InstantSearch </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v7 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/vue/'> <div class='vue' data-action='click->language-switcher#flavor' data-language='vue' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-vue'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> Vue InstantSearch </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v4 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/ios/'> <div class='ios' data-action='click->language-switcher#flavor' data-language='ios' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-ios'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> InstantSearch iOS </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v7 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/android/'> <div class='android' data-action='click->language-switcher#flavor' data-language='android' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-android'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> InstantSearch Android </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v3 </span> </div> </div> </div> </a> <a class='block py-8 px-16 hover:bg-grey-400-opacity-20 transition-fast-out text-grey-1000' href='/doc/api-reference/widgets/flutter/'> <div class='flutter' data-action='click->language-switcher#flavor' data-language='flutter' data-target='language-switcher.item'> <div class='flex items-center'> <div class='flex items-center flex-grow-0 flex-shrink-0 w-16 h-16 justify-center mr-8 fill-current text-flutter'> <svg class="block h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 14.72"><path d="M7.8,6.5h0a3.35,3.35,0,0,0,1-.19l.58,1,.39.7a.6.6,0,0,0,.52.31.65.65,0,0,0,.31-.08.61.61,0,0,0,.21-.84l-.39-.7-.58-1A3.3,3.3,0,0,0,11,3.24,3.2,3.2,0,0,0,7.82,0,3.22,3.22,0,0,0,4.64,3.26,3.2,3.2,0,0,0,7.8,6.5Zm0-5.27a2,2,0,1,1-2,2A2,2,0,0,1,7.8,1.23Z"/><path fill="#000000" d="M12.45,8.23h0a3.21,3.21,0,0,0-3.11,2.63H7.42a.61.61,0,0,0-.59.61.6.6,0,0,0,.59.6H9.34a3.18,3.18,0,1,0,3.11-3.84Zm0,5.26a2,2,0,1,1,2-2A2,2,0,0,1,12.45,13.49Z"/><path fill="#000000" d="M5.82,8l.4-.7A.64.64,0,0,0,6,6.48H6a.61.61,0,0,0-.83.22l-.39.7-.57,1a3.26,3.26,0,0,0-1-.18,3.25,3.25,0,0,0,0,6.49A3.26,3.26,0,0,0,5.25,9ZM3.16,13.49a2,2,0,0,1,0-4,2,2,0,0,1,2,2v0A2,2,0,0,1,3.16,13.49Z"/></svg> </div> <div class='flex justify-between items-center flex-grow ml-4'> <span class='inline-block mr-8 text-sm mr-8'> Algolia for Flutter </span> <span class='inline-block bg-xenon-600-opacity-20 text-xenon-600 py-2 px-4 text-xs rounded font-bold leading-none tracking-wide'> v1 </span> </div> </div> </div> </a> </div> </div> </div> <script crossorigin='anonymous' src='https://js.sentry-cdn.com/a1aef08d297f4cc7bb37ffea1c88e373.min.js'></script> <script data-ot-ignore src='/doc/assets/javascripts/index-ebcad9d3.js'></script> <script data-ot-ignore src='/doc/assets/javascripts/search2-c04a2110.js'></script> <script src='/doc/assets/javascripts/load-async-168b6435.js'></script> <script> window.GOOGLE_TAG_MANAGER_ID = 'GTM-N8JP8G'; window.SEGMENT_ID = 'cKQbv9nMHIUgdWswDLG0c3UdiUgBaUmA'; loadjs([ "/doc/assets/javascripts/analytics-4029c16c.js", "/doc/assets/javascripts/mutiny-d89a9f5a.js" ]); </script> </div> </body> </html>