Ui Toolkit/web

# Zoom Video SDK UI Toolkit

Background reference for the prebuilt Zoom Video SDK UI Toolkit on web. Prefer `choose-zoom-approach` first when the user might still need Meeting SDK instead.

**Official Documentation**: https://developers.zoom.us/docs/video-sdk/web/ui-toolkit/ **API Reference**: https://marketplacefront.zoom.us/sdk/uitoolkit/web/ **NPM Package**: https://www.npmjs.com/package/@zoom/videosdk-zoom-ui-toolkit **Live Demo**: https://sdk.zoom.com/videosdk-uitoolkit

## Quick Links

**New to UI Toolkit? Follow this path:**

1. **Quick Start** - Get running in 5 minutes (see below) 2. **JWT Authentication** - Server-side token generation (required) 3. **Composite vs Components** - Choose your approach 4. **Framework Integration** - React, Vue, Angular, Next.js patterns 5. **Integrated Index** - see the section below in this file

**Having issues?** - Session not joining → Check JWT Authentication (most common issue) - React 18 peer dependency error → See Installation section - CSS not loading → See [Troubleshooting](troubleshooting/common-issues.md) - Components not showing → Check Component Lifecycle - Start with preflight checks → [5-Minute Runbook](RUNBOOK.md)

## Overview

The Zoom Video SDK UI Toolkit is a **pre-built video UI library** that renders complete video conferencing experiences with minimal code. Unlike the raw Video SDK, the UI Toolkit provides:

- ✅ **Ready-to-use UI** - Professional video interface out of the box - ✅ **Zero UI code** - No need to build video layouts, controls, or participant management - ✅ **Framework agnostic** - Works with React, Vue, Angular, Next.js, vanilla JS - ✅ **Highly customizable** - Choose which features to enable, customize themes - ✅ **Built-in features** - Chat, screen share, settings, virtual backgrounds included

**When to use UI Toolkit:** - You want a complete video solution quickly - You need Zoom-like UI consistency - You don't want to build custom video UI - You need standard features (chat, share, participants)

**When to use raw Video SDK instead:** - You need complete custom UI control - You're building a non-standard video experience - You need access to raw video/audio data - You want to build your own rendering pipeline

## Installation

```bash npm install @zoom/videosdk-zoom-ui-toolkit jsrsasign npm install -D @types/jsrsasign ```

**Note**: React support depends on the UI Toolkit version. Check the package peer dependencies for your installed version (React 18 is commonly required).

## Quick Start

### Basic Usage (Vanilla JS)

```javascript import uitoolkit from "@zoom/videosdk-zoom-ui-toolkit"; import "@zoom/videosdk-ui-toolkit/dist/videosdk-zoom-ui-toolkit.css";

const container = document.getElementById("sessionContainer");

const config = { videoSDKJWT: "your_jwt_token", sessionName: "my-session", userName: "John Doe", sessionPasscode: "", features: ["video", "audio", "share", "chat", "users", "settings"], };

uitoolkit.joinSession(container, config);

uitoolkit.onSessionJoined(() => { console.log("Session joined"); });

uitoolkit.onSessionClosed(() => { console.log("Session closed"); }); ```

### Next.js / React Integration

```typescript 'use client';

import { useEffect, useRef } from 'react';

export default function VideoSession({ jwt, sessionName, userName }) { const containerRef = useRef<HTMLDivElement>(null); const uitoolkitRef = useRef<any>(null);

useEffect(() => { let isMounted = true;

const init = async () => { const uitoolkitModule = await import('@zoom/videosdk-zoom-ui-toolkit'); const uitoolkit = uitoolkitModule.default; uitoolkitRef.current = uitoolkit; // If TypeScript complains about CSS imports, configure your app to allow them // (for example via a global `declare module \"*.css\";`), or import the CSS from // a global entrypoint (Next.js layout/_app) instead of inlining here. await import('@zoom/videosdk-ui-toolkit/dist/videosdk-zoom-ui-toolkit.css');

if (!isMounted || !containerRef.current) return;

const config: any = { videoSDKJWT: jwt, sessionName: sessionName, userName: userName, sessionPasscode: '', features: ['video', 'audio', 'share', 'chat', 'users', 'settings'], };

uitoolkit.joinSession(containerRef.current, config); uitoolkit.onSessionJoined(() => console.log('Joined')); uitoolkit.onSessionClosed(() => console.log('Closed')); };

init();

return () => { isMounted = false; if (uitoolkitRef.current && containerRef.current) { try { uitoolkitRef.current.closeSession(containerRef.current); } catch (e) {} } }; }, [jwt, sessionName, userName]);

return <div ref={containerRef} style={{ width: '100%', height: '100vh' }} />; } ```

## Available Features

| Feature | Description | |---------|-------------| | `video` | Enable video layout and send/receive video | | `audio` | Show audio but