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
• Components not showing → Check Component Lifecycle
• Start with preflight checks → 5-Minute Runbook

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.

…