/ui-toolkit

name: ui-toolkit/web
description: "Reference skill for Zoom Video SDK UI Toolkit. Use after routing to a web video workflow when you want prebuilt React UI instead of building a fully custom Video SDK interface."
user-invocable: false
triggers:
  - "ui toolkit"
  - "zoom ui"
  - "prebuilt video ui"
  - "video conferencing ui"
  - "zoom video ui toolkit"
  - "uitoolkit"
  - "ready-made zoom ui"

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

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)

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

'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 button, send/receive audio | | `share` | Screen sharing | | `chat` | In-session messaging | | `users` | Participant list | | `settings` | Device selection, virtual background | | `preview` | Pre-join camera/mic preview | | `recording` | Cloud recording (paid plan) | | `leave` | Leave/end session button |

Troubleshooting

• **[troubleshooting/common-issues.md](troubleshooting/common-issues.md)** - CSS, SSR, JWT/session join, customization limits

JWT Token Generation (Server-Side)

**Required**: Generate JWT tokens on your server, never expose SDK secret client-side.

Node.js / Nex