@edithpro/sdk

The core EdithPro screen recording SDK. Embeds a fully-featured recording popup into any web page via a single JavaScript class — no iframes, no redirects, no backend required on your end.

Works standalone (vanilla JS / script tag) and is the underlying engine for @edithpro/react and @edithpro/vue.

Installation

npm install @edithpro/sdk
# or
yarn add @edithpro/sdk
# or
pnpm add @edithpro/sdk

Script tag (CDN / no bundler)

<script src="https://cdn.edithpro.app/sdk/latest/index.iife.js"></script>
<script>
  const ep = new EdithPro({ clientId: 'ep_live_xxx', workspaceId: 'ws_xxx' });
  ep.init();
</script>

Quick start

import { EdithPro } from '@edithpro/sdk';

const ep = new EdithPro({
  clientId: 'ep_live_abc123',    // from your EdithPro dashboard
  workspaceId: 'ws_64f2a1b3',
});

await ep.init();

document.getElementById('record-btn').addEventListener('click', () => ep.open());

That's it. ep.open() renders the recording popup inside a Shadow DOM — completely isolated from your page's styles.

Configuration

Pass options to the constructor. Only clientId and workspaceId are required.

const ep = new EdithPro({
  // Required
  clientId: 'ep_live_abc123',
  workspaceId: 'ws_64f2a1b3',

  // Optional — appearance
  theme: 'light',                  // 'light' | 'dark'  (default: 'light')
  logoUrl: 'https://your-site.com/logo.png',
  dashboardUrl: 'https://app.your-site.com',

  // Optional — recording defaults
  metadata: {
    folderId: 'folder_abc',        // default folder for recordings
    title: 'Support call',         // pre-filled recording title
  },

  // Optional — user attribution
  user: {
    id: 'user_123',
    name: 'Jane Smith',            // any extra fields are stored on the recording
  },

  // Optional — network
  apiUrl: 'https://sdk-api.edithpro.app',    // default
  wsUrl: 'wss://sdk-api.edithpro.app',       // default

  // Lifecycle callbacks
  onReady: () => console.log('SDK ready'),
  onOpen: () => console.log('Popup opened'),
  onClose: () => console.log('Popup closed'),
  onRecordingCreated: (recording) => console.log('Created', recording),
  onRecordingStart: (recordingId) => console.log('Started', recordingId),
  onPause: (duration) => console.log('Paused at', duration, 's'),
  onResume: () => console.log('Resumed'),
  onStop: (recordingId, duration) => console.log('Stopped', recordingId, duration),
  onDelete: (recordingId) => console.log('Deleted', recordingId),
  onComplete: (recordingId) => console.log('Processing done', recordingId),
  onError: (error) => console.error(error),
});

Config reference

| Option | Type | Default | Description | |---|---|---|---| | clientId | string | required | Public SDK key from your EdithPro dashboard | | workspaceId | string | required | Workspace that recordings are stored in | | theme | 'light' \| 'dark' | 'light' | Popup color scheme | | logoUrl | string | — | Logo shown in the popup header | | dashboardUrl | string | https://app.edithpro.app | Where the "Home" button links | | apiUrl | string | https://sdk-api.edithpro.app | REST API base URL | | wsUrl | string | wss://sdk-api.edithpro.app | WebSocket URL for live recording sync | | user | { id: string; [key: string]: any } | — | User to attribute recordings to | | metadata.folderId | string | — | Default folder for new recordings | | metadata.title | string | — | Default recording title |

API

Lifecycle

await ep.init()    // Initialize. Safe to call multiple times — idempotent.
ep.open()          // Open the recording popup
ep.close()         // Close the popup (does NOT stop an active recording)
ep.destroy()       // Tear down the SDK and remove all DOM nodes

init() fetches your workspace's styling config and wires up internal state. You don't need to await it before calling open() — the popup waits internally until ready.

State (read-only getters)

ep.isInitialized   // boolean — true after init() resolves
ep.isOpen          // boolean — true while popup is visible
ep.isRecording     // boolean — true from start until stop/delete
ep.isPaused        // boolean — true between pause() and resume()
ep.recordingId     // string | null — current recording ID, null when idle
ep.duration        // number — live elapsed seconds (excludes paused time)

Recording control

// High-level — opens popup + starts immediately
const recording = await ep.record({
  quality: '1080p',       // '720p' | '1080p' | '2K' | '4K'
  cameraId: 'device_id',  // from navigator.mediaDevices.enumerateDevices()
  micId: 'device_id',
  folderId: 'folder_abc',
  title: 'My recording',
});

// Low-level — if you manage the recording ID yourself
ep.startCapture(recording.recording_encrypted_id, {
  cameraId: 'device_id',
  micId: 'device_id',
  quality: '1080p',
});

ep.pause()     // Pause without closing
ep.resume()    // Resume from paused state
ep.stop()      // Stop and save the recording
ep.delete()    // Stop and permanently discard

await ep.restart({ quality: '720p' })   // Stop current + start a new one

Quality options

| Value | Resolution | Bitrate | |---|---|---| | '720p' | 1280 × 720 | 2.5 Mbps | | '1080p' | 1920 × 1080 | 6 Mbps | | '2K' | 2560 × 1440 | 10 Mbps | | '4K' | 3840 × 2160 | 18 Mbps |

TypeScript types

import type {
  EdithProConfig,
  RecordSettings,
  Recording,
  RecordingCreate,
  Folder,
  TabType,
} from '@edithpro/sdk';

EdithProConfig

Full constructor options object (all fields documented in the Config section above).

RecordSettings

interface RecordSettings {
  cameraId?: string
  micId?: string
  quality?: '720p' | '1080p' | '2K' | '4K'
  folderId?: string
  title?: string
}

Recording

interface Recording {
  recording_encrypted_id: string
  user_id: string
  title: string | null
  description: string | null
  is_active: boolean
  is_deleted: boolean
  status?: string
  duration?: number
  created_at: string
  updated_at: string
}

TabType

type TabType = 'record' | 'capture' | 'settings' | 'about'

Security model

clientId is a public key — treat it like Stripe's pk_live_xxx. It is safe to ship in frontend code.

Every SDK request attaches X-SDK-Client-ID and the browser's Origin header. The EdithPro server validates that the origin is registered for that client ID. Access is rejected if the domain is not in your allowed list (configured in the EdithPro dashboard).

No user credentials or tokens are ever handled by the SDK.

Browser requirements

• Chrome 94+ / Edge 94+ — full support
• Firefox 113+ — full support
• Safari 16.4+ — full support
• Requires HTTPS (browser getDisplayMedia / getUserMedia are blocked on HTTP)

Frameworks

If you're using React or Vue, use the dedicated wrapper packages — they handle reactivity automatically:

• @edithpro/react
• @edithpro/vue

License

MIT © EdithPro