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
| Location | Responsibility |
|---|---|
| main | Create the window, obtain classroom configuration and expose allowlisted IPC |
| preload | Hold the user token, load WASM, create Headless, attach native adapters and expose restricted APIs |
| renderer | Mount 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.