# rrweb: Replaying recordings
URL: https://generaltranslation.com/en-US/docs/rrweb/guides/replaying-recordings.mdx
---

title: Replaying recordings
description: How to embed a localized recorder bundle with the React or framework-agnostic gt-rrweb player.
related:
  links:
    - /docs/rrweb/guides/recording-walkthroughs

---

The replayer renders the recorded flow with playback controls, click-based cursor movement, scrubbing, theme controls, full-screen playback, and optional locale switching.

## Replay in React [#react]

Use [`GTReplayer`](/docs/rrweb/reference/replayer#gt-replayer) when the host application uses React. Size the parent or pass `style`; the player fills its container width and determines its own aspect ratio.

```tsx title="src/Walkthrough.tsx"
import { GTReplayer } from 'gt-rrweb/replay';
import bundle from './walkthrough.json';

export function Walkthrough() {
  return (
    <GTReplayer
      bundle={bundle}
      initialLocale="fr"
      switchLocalesAllowed
    />
  );
}
```

`initialLocale` takes effect only when it appears in `bundle.locales`. The source locale is used otherwise.

## Replay without React [#without-react]

Use [`createGTReplayer()`](/docs/rrweb/reference/replayer#create-gt-replayer) with a DOM element in any browser application. Keep the returned handle and destroy it when the host view is removed.

```ts title="src/walkthrough.ts"
import { createGTReplayer } from 'gt-rrweb/replay';
import bundle from './walkthrough.json';

const container = document.querySelector<HTMLElement>('#walkthrough');
if (!container) throw new Error('Missing walkthrough container');

const player = createGTReplayer(container, bundle, {
  initialLocale: 'fr',
});

// When the host view is removed:
player.destroy();
```

## Control locale switching [#locale-switching]

Locale controls appear when the bundle includes `locales` and `switchLocalesAllowed` is not `false`. Switching replaces the text overlay in place without rebuilding the rrweb session.

Set `switchLocalesAllowed={false}` for an embed fixed to one locale. A bundle without locale metadata or overlays replays the recorded source normally.

## Inspect bundles locally [#debug]

Set `debug` to allow a developer to drag a recording JSON file onto the player and replace the active bundle. Invalid JSON and non-recording files produce a notice instead of replacing the session.

Keep `debug` off for ordinary embeds; it defaults to `false`.

## Next steps

- /docs/rrweb/guides/recording-walkthroughs