Skip to main content

Electron integration

Electron uses @eduskit/sdk-electron and @eduskit/ui-electron, published as 0.1.1. The supplied interface reuses Web UI; IM and RTC use Electron native adapters.

npm install @eduskit/sdk-electron@0.1.1 @eduskit/ui-electron@0.1.1 vue@^3.5.0

Process responsibilities​

LocationResponsibility
mainCreate the window, obtain classroom configuration and expose allowlisted IPC
preloadHold the user token, load WASM, create Headless, attach native adapters and expose restricted APIs
rendererMount UI through window.eduSdk, read snapshots and issue operations

Enable contextIsolation: true and disable nodeIntegration. The source example keeps the user token in preload and exposes a restricted SDK API to the renderer. Native provider rendering handles raw media frames; do not send them through application IPC.

UI entry​

The source example examples/desktop-electron/src/renderer.ts mounts the UI as follows. Configure preload first:

import { ElectronEduClassroom, type ElectronRendererApi } from '@eduskit/ui-electron';

declare global {
interface Window {
eduSdk: ElectronRendererApi;
}
}

const config = window.eduSdk.bootstrap;
const container = document.getElementById('app');
if (!container || !config?.classroomId || !config.userId) {
throw new Error('Missing classroom container or preload configuration');
}
const classroom = ElectronEduClassroom.mount(
container,
{
classroomId: config.classroomId,
userId: config.userId,
appId: config.appId,
displayName: config.displayName,
themeMode: 'system',
},
window.eduSdk,
);
window.addEventListener('beforeunload', () => classroom.destroy());

Follow the adjacent preload.ts for complete setup: createElectronRuntime(wasm) → createElectronEduSdk(options, runtime) → exposeElectronSdk(...). IM and RTC factories come from @eduskit/sdk-electron/native.

Source example​

From edu-sdks:

make build-wasm
npm --prefix examples/desktop-electron install
npm --prefix examples/desktop-electron run dev

Configure EDUSDK_USER_ID, EDUSDK_CLASSROOM_ID and EDUSDK_USER_TOKEN in the example directory. Optional values include EDUSDK_APP_ID, EDUSDK_BACKEND_URL and EDUSDK_DISPLAY_NAME. Development defaults to the development endpoint; packaged builds default to production. Use values for the actual entry environment.

Install and package dependencies for the target Windows/macOS system, matching Electron ABI, CPU architecture, WASM, native libraries and asset paths. The source example includes Worker changes after npm 0.1.1 and requires matching Headless and UI Kit builds.