riffrec

Hook API

Use the hook when you want to build your own recording controls:

const { start, stop, status } = useRiffrec();

status is one of "idle", "recording", "stopping", "disabled", or "error". While recording, RiffrecProvider renders a fixed stop control above the host app so the user always has a clear "Stop and save" action. After the download starts, it shows a confirmation telling the user to share the zip for feedback. Host apps can customize that confirmation with downloadNoticeTitle and downloadNoticeMessage. stop() downloads a zip file and returns:

{
  sessionPath: string | null;
  method: "zip";
  filesPresent: string[];
}

Desktop Workflow

1. Enter an https:// website URL in the address bar. Local http://localhost URLs are supported for development feedback.
2. Sign in or navigate inside Riffrec's isolated browser profile if required.
3. Choose microphone and click capture, add optional reviewer notes, acknowledge the recording disclosure, and press Start recording.
4. Reproduce the issue, add moment markers where useful, then press Stop and save session.
5. Share the saved zip with an agent or teammate.

Desktop sessions capture the webpage loaded inside Riffrec: screen video, optional microphone audio, DOM click element details, top-level navigation, network URLs/methods/statuses/durations, console errors, notes, and capture context. They do not capture activity in an existing Safari/Chrome/Arc tab, request or response bodies, typed values, or reliable internal React component names on third-party sites.

Riffrec stores website cookies and local storage only in its dedicated local browser profile so authenticated reproductions work. It stages in-progress and unsaved recording media locally for crash recovery; interrupted or damaged drafts remain on this Mac until saved or deleted with the recovery-data action in the app. Use Clear website sign-in data after recording on sensitive sites.

React Package Integration

For a developer who can integrate Riffrec in a React app, the package can additionally identify React component context during feedback.

npm install riffrec

import { RiffrecProvider, RiffrecRecorder } from "riffrec";

export function App() {
  return (
    <RiffrecProvider>
      <RiffrecRecorder />
      {/* your app */}
    </RiffrecProvider>
  );
}

RiffrecRecorder renders a start/stop button, consent dialog, capture checklist, and recording indicator. start() must still be called from a user gesture such as a button click because browsers require that for screen recording.