# rrweb: Recording walkthroughs
URL: https://generaltranslation.com/en-US/docs/rrweb/guides/recording-walkthroughs.mdx
---

title: Recording walkthroughs
description: How to capture a product flow and assemble a localized recorder bundle with gt-rrweb.
related:
  links:
    - /docs/rrweb/guides/replaying-recordings

---

A recording contains the rrweb event stream, the source-first locale list, and a text overlay built from your published translation catalogs. Use this workflow after completing the [Quickstart](/docs/rrweb/quickstart).

## Choose the capture region [#capture-region]

[`GTRecorder`](/docs/rrweb/reference/recorder#gt-recorder) captures the full document, but `contentSelector` identifies the product region that should be framed for playback. It defaults to `main, [data-gt-content]`.

```tsx title="src/RecordingTools.tsx"
<GTRecorder contentSelector="main" frame="16:9" />
```

Use `frame="none"` to preserve the region's natural dimensions, `frame="16:9"` for the built-in presentation frame, or `frame={{ aspect: 4 / 3 }}` for a custom ratio.

## Load published translations [#translations]

Pass `harvest.loadTranslations` to map recorded hashes to translated content. Without a loader, the recorder still produces a valid source-only bundle.

```tsx title="src/RecordingTools.tsx"
<GTRecorder
  harvest={{
    loadTranslations,
    sourceLocale: 'en',
  }}
/>
```

Set `sourceLocale` when the recording locale is not read from your app's locale cookie. Alternatively, pass `localeCookieName` so the harvest reads your custom cookie.

Content rendered by [`<T>`](/docs/react/reference/components/t) uses the DOM hashes enabled by [`_tagIds`](/docs/react/reference/config#tag-ids). To include bare `gt()` or `useGT()` strings, also pass a `hashMessage` function; interpolated strings whose rendered value differs from their source template remain in the source locale.

## Start and stop capture [#capture]

Call [`start()`](/docs/rrweb/reference/recorder#use-recorder) with the source locale first, followed by every target locale to harvest. The recorder keeps its session in module state, so route-level component remounts do not end an active recording.

```tsx title="src/RecordButton.tsx"
const { start, stop, status } = useRecorder();

await start({ locales: ['en', 'de', 'ja'] });
const bundle = await stop();
```

The status moves from `preparing` to `recording`, returns to `preparing` while translations are harvested, and ends at `idle`. A harvest failure is non-fatal and returns a source-only bundle.

## Store the bundle [#store-bundle]

Serialize the returned [`RecorderBundle`](/docs/rrweb/reference/recorder#recorder-bundle) as JSON and store it with your application assets or upload it to your own storage. The package does not upload recordings.

Review the captured flow before publishing it. Input values are masked, but the DOM event stream can still contain visible page text and application state.

## Next steps

- /docs/rrweb/guides/replaying-recordings