---
title: JavaScript client library for web browsers
description: Use the InfluxDB JavaScript client library to interact with InfluxDB in web clients.
url: https://docs.influxdata.com/influxdb/cloud/api-guide/client-libraries/browserjs/
estimated_tokens: 1032
product: InfluxDB Cloud (TSM)
version: cloud
publisher: InfluxData
canonical: https://docs.influxdata.com/influxdb/cloud/api-guide/client-libraries/browserjs/
date: '2025-04-02T15:54:32-06:00'
lastmod: '2025-04-02T15:54:32-06:00'
---

Use the [InfluxDB JavaScript client library](https://github.com/influxdata/influxdb-client-js) to interact with the InfluxDB v2 API in browsers and front-end clients. This library supports both front-end and server-side environments and provides the following distributions:

* ECMAScript modules (ESM) and CommonJS modules (CJS)
* Bundled ESM
* Bundled UMD

This guide presumes some familiarity with JavaScript, browser environments, and InfluxDB.
If you’re just getting started with InfluxDB, see [Get started with InfluxDB](/influxdb/cloud/get-started/).

### Tokens in production applications

The examples below configure the authentication token in source code for demonstration purposes only.
To protect your data, take the following steps:

1. Avoid sending tokens to public clients such as web browsers and mobile apps. Regard any application secret sent to client devices as public and not confidential.

2. Use short-lived, [**read-only tokens**](/influxdb/v2/reference/cli/influx/auth/create/#create-a-read-only-authentication-token) whenever possible to prevent unauthorized writes and deletes.

* [Before you begin](#before-you-begin)
* [Use with module bundlers](#use-with-module-bundlers)
* [Use bundled distributions with browsers and module loaders](#use-bundled-distributions-with-browsers-and-module-loaders)
* [Get started with the example app](#get-started-with-the-example-app)

## Before you begin

1. Install [Node.js](https://nodejs.org/en/download/package-manager/) to serve your front-end app.

2. Ensure that InfluxDB is running and you can connect to it.
   For information about what URL to use to connect to InfluxDB OSS or InfluxDB Cloud, see [InfluxDB URLs](/influxdb/cloud/reference/urls/).

## Use with module bundlers

If you use a module bundler like Webpack or Parcel, install `@influxdata/influxdb-client-browser`.
For more information and examples, see [Node.js](/influxdb/cloud/api-guide/client-libraries/nodejs/).

## Use bundled distributions with browsers and module loaders

1. Configure InfluxDB properties for your script.

   ```
   <script>
     window.INFLUX_ENV = {
       url: 'http://localhost:8086',
       token: 'YOUR_AUTH_TOKEN'
     }
   </script>
   ```

2. Import modules from the latest client library browser distribution.`@influxdata/influxdb-client-browser` exports bundled ESM and UMD syntaxes.

   [ESM](#import-esm)[UMD](#import-umd)

   ```
   <script type="module">
     import {InfluxDB, Point} from 'https://unpkg.com/@influxdata/influxdb-client-browser/dist/index.browser.mjs'

     const influxDB = new InfluxDB({INFLUX_ENV.url, INFLUX_ENV.token})
   </script>
   ```

   ```
   <script src="https://unpkg.com/@influxdata/influxdb-client-browser"></script>
   <script>
     const Influx = window['@influxdata/influxdb-client']

     const InfluxDB = Influx.InfluxDB
     const influxDB = new InfluxDB({INFLUX_ENV.url, INFLUX_ENV.token})
   </script>
   ```

After you’ve imported the client library, you’re ready to [write data](/influxdb/cloud/api-guide/client-libraries/nodejs/write/?t=nodejs) to InfluxDB.

## Get started with the example app

This library includes an example browser app that queries from and writes to your InfluxDB instance.

1. Clone the [influxdb-client-js](https://github.com/influxdata/influxdb-client-js) repo.

2. Navigate to the `examples` directory:

   ```
   cd examples
   ```

3. Update `./env_browser.js` with your InfluxDB [url](/influxdb/cloud/reference/urls/), [bucket](/influxdb/cloud/admin/buckets/), [organization](/influxdb/cloud/admin/organizations/), and [token](/influxdb/cloud/admin/tokens/)

4. Run the following command to start the application at [http://localhost:3001/examples/index.html]()

   ```
   npm run browser
   ```

   `index.html` loads the `env_browser.js` configuration, the client library ESM modules, and the application in your browser.

#### Related

* [Write data with the InfluxDB JavaScript client library](/influxdb/cloud/api-guide/client-libraries/nodejs/write/)
* [Query with the InfluxDB JavaScript client library](/influxdb/cloud/api-guide/client-libraries/nodejs/query/)