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

# Dictation SDK JavaScript Integration

> Use DictationClient and show() in vanilla JavaScript or non-React frameworks

## Overview

Use the **imperative** API when you integrate with vanilla JavaScript, Vue, Angular, or other non-React stacks, or when you need **multiple dynamic editors** or a **custom overlay** system.

This guide follows **JavaScript Integration**, **Switching Between Fields**, and related notes in **`Suki Dictation SDK.md`**.

## Prerequisites

* [Installation](../installation) of `@suki-sdk/dictation` and `@suki-sdk/core`
* [Authentication](./authentication) configured with `SukiAuthManager`

## Create the client

```javascript JavaScript expandable theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
import { SukiAuthManager } from "@suki-sdk/core";
import { DictationClient } from "@suki-sdk/dictation";

const authManager = new SukiAuthManager({
  partnerId: "YOUR_PARTNER_ID",
  partnerToken: "YOUR_PARTNER_TOKEN",
  environment: "staging",
  loginOnInitialize: true,
});

const dictationClient = new DictationClient({ authManager });
```

## Call show()

```javascript JavaScript expandable theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
await dictationClient.show({
  mode: "in-field",
  fieldId: "assessment",
  rootElement,
  initialText,
  onSubmit,
  onCancel,
});
```

The iframe **automatically resizes** to match the **container** element (`rootElement`). See [Configuration reference](./configuration) for every `ShowOptions` field.

## Switching between fields

Calling **`show()`** again **replaces** the active session. You do **not** need to call **`hide()`** manually between fields:

```javascript JavaScript theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
show(fieldA);
show(fieldB);
```

This is equivalent to calling `hide` on the previous context and then `show` for the next; **manual cleanup is not required**.

## Single client per scope

Use **one** `DictationClient` instance per page scope so you do not get **multiple overlays**. See [Error handling](./error-handling).

## Next steps

* [Modes and callbacks](./modes-and-callbacks) for `in-field` vs `scratchpad` and callback payloads
* [React integration](./react-integration) if you move to React
* [Quickstart](../quickstart) for a full minimal example