# JavaScript

Source: https://docs.interop.io/browser/developers/browser-client/javascript/index.html

## Overview

The [`@interopio/browser`](https://www.npmjs.com/package/@interopio/browser) library provides access to the io.Connect APIs in your JavaScript Browser Client apps.

## Referencing

The [`@interopio/browser`](https://www.npmjs.com/package/@interopio/browser) library is available as a package on NPM and UNPKG.

To install the `@interopio/browser` library, execute the following command:

```cmd
npm install @interopio/browser
```

Reference the library as a script in your web app:

```html
<script src="./node_modules/@interopio/browser/dist/browser.umd.js">
```

Or import it as a module:

```javascript
import IOBrowser from "@interopio/browser";
```

You can also reference the `@interopio/browser` library directly from UNPKG:

```html
<script src="https://unpkg.com/@interopio/browser@latest/dist/browser.umd.js"></script>
```

The [`@interopio/browser`](https://www.npmjs.com/package/@interopio/browser) library will inject the `IOBrowser()` factory function in the global `window` object.

## Initialization

Initialize the [`@interopio/browser`](https://www.npmjs.com/package/@interopio/browser) library by invoking the exposed `IOBrowser()` factory function. It accepts an optional [`Config`](https://docs.interop.io/browser/reference/javascript/io.connect%20browser/config/index.md) object in which you can specify settings for the io.Connect APIs.

The following example demonstrates initializing the `@interopio/browser` library with default settings:

```javascript
import IOBrowser from "@interopio/browser";

// Use the initialized API object returned by the factory function to access the io.Connect APIs.
const io = await IOBrowser();
```

Initializing the `@interopio/browser` library with custom settings:

```javascript
import IOBrowser from "@interopio/browser";
import IOWorkspaces from "@interopio/workspaces-api";

const initializeIOConnect = async () => {

    // Initializing the Workspaces library.
    const initOptions = {
        libraries: [IOWorkspaces]
    };

    // Use the initialized API object to access the io.Connect APIs.
    const io = await IOBrowser(initOptions);

    // Here, the io.Connect library is initialized and you can access all available io.Connect APIs.
    const myWorkspace = await io.workspaces.restoreWorkspace("My Workspace");
};

initializeIOConnect().catch(console.error);
```

## io.Connect JavaScript Capabilities

Once the `@interopio/browser` library has been initialized, your Browser Client app has access to all io.Connect functionalities. For more detailed information on the different io.Connect capabilities and APIs, see the following sections:

- [Shared Contexts](https://docs.interop.io/browser/capabilities/data-sharing/shared-contexts/index.md)
- [Channels](https://docs.interop.io/browser/capabilities/data-sharing/channels/index.md)
- [Interop](https://docs.interop.io/browser/capabilities/data-sharing/interop/index.md)
- [Intents](https://docs.interop.io/browser/capabilities/data-sharing/intents/intents-api/index.md)
- [Window Management](https://docs.interop.io/browser/capabilities/windows/window-management/index.md)
- [Workspaces](https://docs.interop.io/browser/capabilities/windows/workspaces/workspaces-api/index.md)
- [Layouts](https://docs.interop.io/browser/capabilities/windows/layouts/layouts-api/index.md)
- [Themes](https://docs.interop.io/browser/capabilities/windows/themes/index.md)
- [Modals](https://docs.interop.io/browser/capabilities/windows/modals/modals-api/index.md)
- [App Management](https://docs.interop.io/browser/capabilities/app-management/index.md)
- [App Preferences](https://docs.interop.io/browser/capabilities/app-preferences/index.md)
- [Plugins](https://docs.interop.io/browser/capabilities/plugins/setup/index.md)
- [Notifications](https://docs.interop.io/browser/capabilities/notifications/notifications-api/index.md)
- [Search](https://docs.interop.io/browser/capabilities/search/search-api/index.md)