> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-search-js/llms.txt) # Installation This guide contains generic installation instructions for the three Mapbox Search JS [frameworks](https://docs.mapbox.com/mapbox-search-js/guides/#structure). > **Note: Try a Quickstart Guide** > > Detailed installation instructions and code snippets are available for the three main features of Mapbox Search JS: > > - **Address Autofill** - [Web](https://docs.mapbox.com/mapbox-search-js/guides/autofill/web/) \| [React](https://docs.mapbox.com/mapbox-search-js/guides/autofill/react/) > - **Search Box** - [Web](https://docs.mapbox.com/mapbox-search-js/guides/search/web/) \| [React](https://docs.mapbox.com/mapbox-search-js/guides/search/react/) > - **Geocoding** - [Web](https://docs.mapbox.com/mapbox-search-js/guides/geocoding/web/) \| [React](https://docs.mapbox.com/mapbox-search-js/guides/geocoding/react/) ## Prerequisites To use Mapbox Search JS, you need to have a Mapbox [access token](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/). ### Your default public token You can use your *default public token* to get started with the code snippets in this guide. To get your default public token, login to [account.mapbox.com](https://account.mapbox.com) and scroll down to the **Access Tokens** section. This access token associates your search requests with a Mapbox account for billing. For more information on creating and using access tokens, see our [token management documentation](https://docs.mapbox.com/accounts/guides/tokens/). ## Installation To use Mapbox Search JS in your project, you need to import it using either the Mapbox CDN or relevant NPM packages. **Mapbox CDN** ### Web Include the following code in the `` of your HTML file. ```md ``` ### React Search JS React is not available on the Mapbox CDN. If you're using React, you can install the NPM package by selecting "Module bundler" above. ### Core **Installing Core is *not* required to use Web.** This is only necessary if you wish to call the framework directly without a user interface. Include the following code in the `` of your HTML file. ```md ``` **Module bundler** ### Web Install the NPM package. ```md npm install --save @mapbox/search-js-web ``` Include the following code in your JavaScript file. ```js import { autofill } from '@mapbox/search-js-web'; // TO USE THIS PACKAGE YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com autofill({ accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN' }) ``` ### React ```md npm install --save @mapbox/search-js-react ``` Include the following code in your JavaScript file. ```js import React from 'react'; import { AddressAutofill } from '@mapbox/search-js-react'; // TO USE THIS PACKAGE YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com const accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; export function Component() { return ( ); } ``` ### Core **Installing Core is *not* required to use Web.** Use Core if you wish to call the framework directly without a user interface. Core may be used in either a web browser or in a node.js environment. To call Search JS Core directly, install the NPM package. ```md npm install --save @mapbox/search-js-core ``` Include the following code in your JavaScript file. ```js import { SearchBoxCore, SearchSession } from '@mapbox/search-js-core'; // TO USE THIS PACKAGE YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com const search = new SearchBoxCore({ accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN' }) const session = new SearchSession(search); ``` ## Browser support Mapbox Search JS is supported in most modern browsers. We officially support: - Versions of Google Chrome, Mozilla Firefox, and Microsoft Edge (Chromium) - Safari, Mobile Safari 12.0 or higher Mapbox Search JS is not compatible with any version of Internet Explorer. If these constraints do not work for your project, consider using [Mapbox GL Geocoder](https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/) or accessing [Mapbox Search APIs](https://docs.mapbox.com/api/search/) directly. ### Transpiling Mapbox Search JS is distributed as an ES6 compatible JavaScript bundle.