@writing-process-recorder/sdk

Embeddable custom elements for Writing Process Recorder — a <wpr-editor> that records a student's writing session (keystrokes, pauses, pastes) and a <wpr-replay> that plays one back. Each is self-contained (own Shadow DOM, own bundled React) and registers itself as a side effect of importing it — no setup beyond the import.

Install

npm install @writing-process-recorder/sdk

<wpr-editor> — recording a writing session

import '@writing-process-recorder/sdk/editor';

// after POST /api/sessions/start on the recorder's public API:
const el = document.querySelector('wpr-editor') as HTMLElement & {
  bootstrap: unknown;
  submit(): void;
};
el.bootstrap = { sessionId, sessionKey, captureSettings, lastBatchIndex, lastChain };
// on submit:
el.submit();
// events: 'wpr-status' (save-status changes), 'wpr-submitted' (final verification)

bootstrap is a JS property, not an HTML attribute — set it imperatively via a ref, not as JSX/HTML attribute syntax.

<wpr-replay> — reviewing a recorded session

import '@writing-process-recorder/sdk/replay';

const el = document.querySelector('wpr-replay') as HTMLElement & { sessionId: string };
el.sessionId = submission.session_id; // triggers its own internal data fetch
// event: 'wpr-replay-progress' ({ currentIndex, total })

Notes

• Both elements are fully self-contained — bundled React, Shadow-DOM-scoped styles — and safe to drop into any host page regardless of what framework (if any) that page itself uses.
• VITE_API_URL (baked in at SDK build time) controls which recorder API host <wpr-replay> fetches from. Point the build at the environment you intend to publish for.