Skip to main content

SDK Migration Guide

As Dyte joins Cloudflare, we are transitioning all Dyte SDKs to the new Cloudflare RealtimeKit SDKs.

danger

The Dyte SDKs are now in maintenance mode and will no longer receive feature updates or bug fixes. We strongly recommend migrating to the Cloudflare RealtimeKit SDKs to ensure you continue to receive the latest features and improvements. You can find the official documentation for RealtimeKit here.

Package Mapping​

The following table maps the deprecated Dyte SDKs to their new Cloudflare RealtimeKit equivalents for Web Components:

Dyte SDKRealtimeKit SDK
@dytesdk/web-core@cloudflare/realtimekit
@dytesdk/ui-kit@cloudflare/realtimekit-ui
@dytesdk/ui-kit-addons@cloudflare/realtimekit-ui-addons
@dytesdk/video-background-transformer@cloudflare/realtimekit-virtual-background
@dytesdk/recording-sdk@cloudflare/realtimekit-recording-sdk

Migration Steps​

Migrating from Dyte to Cloudflare RealtimeKit is straightforward, as it primarily involves updating package names and renaming html tags, JS classes and css selectors.

To perform the migration manually, please follow the steps outlined below.

1. Update package.json​

First, uninstall all Dyte packages from your project:

npm uninstall @dytesdk/web-core @dytesdk/ui-kit @dytesdk/ui-kit-addons @dytesdk/video-background-transformer @dytesdk/recording-sdk

Next, install the corresponding Cloudflare RealtimeKit packages:

npm install @cloudflare/realtimekit @cloudflare/realtimekit-ui @cloudflare/realtimekit-ui-addons @cloudflare/realtimekit-virtual-background @cloudflare/realtimekit-recording-sdk

2. Update Import Paths​

In your project's source code, perform a find-and-replace for all Dyte package import paths with their new RealtimeKit equivalents.

FindReplace With
@dytesdk/web-core@cloudflare/realtimekit
@dytesdk/ui-kit@cloudflare/realtimekit-ui
@dytesdk/ui-kit-addons@cloudflare/realtimekit-ui-addons
@dytesdk/video-background-transformer@cloudflare/realtimekit-virtual-background
@dytesdk/recording-sdk@cloudflare/realtimekit-recording-sdk

3. Update Codebase with New Naming Conventions​

The migration introduces a new set of naming conventions. The general rule is to replace Dyte with RealtimeKit, RTK, or Rtk, depending on the context.

Naming Convention Summary
  • Main Class: Dyte -> RealtimeKit (e.g., DyteClient -> RealtimeKitClient)
  • Core SDK Classes & Types: Dyte -> RTK (e.g., DyteSelf -> RTKSelf)
  • UI Kit Components & Types: Dyte -> Rtk (e.g., DyteMeeting -> RtkMeeting)
  • CSS Selectors & HTML Tags: dyte- -> rtk- (e.g., dyte-meeting -> rtk-meeting)

Core SDK Changes​

If you are using the CDN, first step is to replace the Dyte Core SDK script tag with RealtimeKit Core SDK.

Replace

<script src="https://cdn.dyte.in/core/dyte2.js"></script>

with

<script src="https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/browser.js"></script>

If you are importing, DyteClient in an module script tag, replace it with RealtimeKitClient.

Replace

<script type="module">
import DyteClient from 'https://cdn.jsdelivr.net/npm/@dytesdk/web-core@latest/dist/index.es.js';
</script>

with

<script type="module">
import RealtimeKitClient from 'https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js';
</script>
FindReplace With
DyteClientRealtimeKitClient
info

Instead of using latest version, use the specific version of RealtimeKit SDKs to prevent any unexpected behavior. For example, Replace https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js with https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@1.1.6/dist/index.es.js.

Classes & Types:

// Before
import type { DyteSelf, DyteSelfMedia } from '@dytesdk/web-core';

// After
import type { RTKSelf, RTKSelfMedia } from '@cloudflare/realtimekit';
FindReplace With
DyteSelfRTKSelf
DyteSelfMediaRTKSelfMedia
DytePluginsRTKPlugins

UI Kit Changes​

If you are importing, UI Kit in an module script tag, replace it with RealtimeKit UI Kit.

Replace

<script type="module">
import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui@latest/loader/index.es2017.js';
defineCustomElements();
</script>

with

<script type="module">
import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui@latest/loader/index.es2017.js';
defineCustomElements();
</script>

For all UI Kit components, types, and providers, replace Dyte with Rtk.

Components:

<!-- Before -->
<dyte-meeting></dyte-meeting>

<!-- After -->
<rtk-meeting></rtk-meeting>
FindReplace With
dyte-meetingrtk-meeting
dyte-ui-providerrtk-ui-provider
dyte-participant-tilertk-participant-tile
dyte-settingsrtk-settings
dyte-dialog-managerrtk-dialog-manager

CSS & HTML:

If you have customized components using CSS or are using raw HTML tags, replace the dyte- prefix with rtk-.

/* Before */
dyte-meeting {
  background-color: #fff;
}

/* After */
rtk-meeting {
  background-color: #fff;
}
Custom Design System

If you are using a custom design system, remember to rename provideDyteDesignSystem to provideRtkDesignSystem.

Add-on Packages​

  • UI Kit Addons: For custom elements like dyte-full-screen-toggle, rename them to rtk-full-screen-toggle.
  • Video Background Transformer: This package is now @cloudflare/realtimekit-virtual-background. Replace the DyteVideoBackgroundTransformer class with RealtimeKitVideoBackgroundTransformer.
  • Recording SDK: This package is now @cloudflare/realtimekit-recording-sdk. Replace the DyteRecording class with RealtimeKitRecording.