Files
rrweb/docs/recipes/interaction.md
Justin Halsall bcf93ca926 docs: revamp installation docs for esm and umd (#1788)
* docs: revamp installation docs for esm and umd

Document recommended install paths across the main guides and package
READMEs for rrweb, @rrweb/all, @rrweb/record, @rrweb/replay, and
rrweb-player.

Clarify three usage modes: bundler/npm, browser no-build with
import maps and +esm, and legacy UMD fallback.

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Apply formatting changes

* Apply suggestion from @eoghanmurray

Co-authored-by: Eoghan Murray <eoghan@getthere.ie>

* Apply formatting changes

* docs(all): streamline README usage section

Move the guide link next to the import example and remove the
duplicated Usage section to keep docs concise and easier to scan.

* docs(readme): update gzip size badges in zh-cn readme

* docs(plugins): update readme imports to scoped esm packages

Replace `rrweb` default imports and `rrweb.Replayer` usage with
`@rrweb/record` `record` and `@rrweb/replay` `Replayer` in plugin
usage examples.

Also update canvas WebRTC plugin imports to scoped `@rrweb/*`
package names to keep docs aligned with current package structure.

* docs: update docs to prefer scoped esm packages

replace `rrweb` default import examples with `@rrweb/record` and
`@rrweb/replay` across recipes and guides in en/zh-CN.

clarify package selection for new integrations, add `@rrweb/all`
convenience guidance, and refresh CDN/style import snippets for ESM and legacy UMD compatibility.

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
2026-02-17 13:59:02 +01:00

723 B

Interact With UI During Replay

By default, the UI could not interact during replay. But you can use API to enable/disable this programmatically.

import { Replayer } from '@rrweb/replay';

const replayer = new Replayer(events);

// enable user interact with the UI
replayer.enableInteract();

// disable user interact with the UI
replayer.disableInteract();

rrweb uses the pointer-events: none CSS property to disable interaction.

This will let the replay more stable and avoid some problems like navigate by clicking an external link.

If you want to enable user interaction, like input, then you can use the enableInteract API. But be sure you have handled the problems that may cause unstable replay.