> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hyperbeam.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

Among other things, the Hyperbeam client-side JavaScript SDK allows you to:

* Connect to a virtual browser
* Control the virtual browser navigation programmatically
* Query the virtual browser state and listen to events
* Manage user control permissions
* Resize the browser
* Set local virtual browser volume

The library is published on [npm as @hyperbeam/web](https://www.npmjs.com/package/@hyperbeam/web).

## Installation

**Using npm:**

```bash Terminal theme={null}
$ npm install @hyperbeam/web --save
```

**Using UNPKG:**

```js JavaScript theme={null}
<script type="module">
  import Hyperbeam from "https://unpkg.com/@hyperbeam/web@latest/dist/index.js"
  // ...
</script>
```

## SDK Reference

<CardGroup cols={2}>
  <Card title="Initializing the SDK" icon="square-plus" color="#a888ff" href="/client-sdk/javascript/reference#initializing-the-sdk">
    Create an instance of the HyperbeamClient object.
  </Card>

  <Card title="The HyperbeamClient Object" icon="window" color="#a888ff" href="/client-sdk/javascript/reference#the-hyperbeamclient-object">
    Control the virtual browser, manage user permissions, and debug connection
    issues.
  </Card>
</CardGroup>

## Examples

<CardGroup cols={2}>
  <Card title="Loading a virtual browser" icon={<div>⚡</div>} color="#a888ff" href="/client-sdk/javascript/examples#loading-a-virtual-browser">
    How to create an instance of the HyperbeamClient object.
  </Card>

  <Card title="Destroying the embed" icon={<div>💣</div>} color="#a888ff" href="/client-sdk/javascript/examples#destroying-the-embed">
    How to tear down network connections and browser events.
  </Card>

  <Card title="Setting video volume" icon={<div>🔉</div>} color="#a888ff" href="/client-sdk/javascript/examples#setting-video-volume">
    How to set the local volume for the virtual browser.
  </Card>

  <Card title="Getting user ID" icon={<div>🆔</div>} color="#a888ff" href="/client-sdk/javascript/examples#getting-user-id">
    How to get the client's user ID.
  </Card>

  <Card title="Pausing video stream" icon={<div>⏸️</div>} color="#a888ff" href="/client-sdk/javascript/examples#pausing-video-stream">
    How to pause/resume the local virtual browser video stream.
  </Card>

  <Card title="Setting admin token" icon={<div>👑</div>} color="#a888ff" href="/client-sdk/javascript/examples#setting-admin-token">
    How to set the client's admin token.
  </Card>

  <Card title="Setting permissions" icon={<div>🔐</div>} color="#a888ff" href="/client-sdk/javascript/examples#setting-permissions">
    How to set user permissions based on a user's ID.
  </Card>

  <Card title="Manual reconnection" icon={<div>🔄</div>} color="#a888ff" href="/client-sdk/javascript/examples#manual-reconnection">
    How to manually reconnect.
  </Card>

  <Card title="Resizing the browser" icon={<div> 📐</div>} color="#a888ff" href="/client-sdk/javascript/examples#resizing-the-browser">
    How to resize the virtual browser to a specific width and height.
  </Card>

  <Card title="Send events programmatically" icon={<div>📡</div>} color="#a888ff" href="/client-sdk/javascript/examples#send-events-programmatically">
    How to send keyboard, mouse, and wheel events to the virtual browser.
  </Card>

  <Card title="Tighter control over keyboard events" icon={<div>⌨️</div>} color="#a888ff" href="/client-sdk/javascript/examples#tighter-control-over-keyboard-events">
    How to customize keyboard events sent the virtual browser.
  </Card>

  <Card title="Control tabs programmatically" icon={<div>🎛️</div>} color="#a888ff" href="/client-sdk/javascript/examples#control-tabs-programmatically">
    How to use Hyperbeam's tab API.
  </Card>

  <Card title="Listen to tab events" icon={<div>👂</div>} color="#a888ff" href="/client-sdk/javascript/examples#listen-to-tab-events">
    How to listen to tab events.
  </Card>

  <Card title="Optimize server location" icon={<div>🗺️</div>} color="#a888ff" href="/client-sdk/javascript/examples#optimize-server-location">
    How to create a session with the optimal server location.
  </Card>
</CardGroup>