Example App
A minimal end-to-end example you can copy, paste, and run.
The fastest way to see a session land is a single static HTML file pointed at a running server.
A complete page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TinyReplay demo</title>
</head>
<body>
<h1>Click things</h1>
<button id="ping">Ping</button>
<input placeholder="Type here - this value is masked" />
<script src="http://localhost:3000/sdk/tinyreplay.umd.js"></script>
<script>
TinyReplay.init({
endpoint: 'http://localhost:3000',
projectId: 'demo',
debug: true,
})
document.getElementById('ping').onclick = () =>
fetch('https://httpbin.org/get').catch(() => {})
</script>
</body>
</html>Cross-origin?
If you serve this file from file:// or another port, the server must allow
the origin. Start it with ALLOWED_ORIGINS=* for local testing, or list your
exact origins for production. See env vars.
What gets recorded here
The DOM and interactions - the heading, the button click, scrolling.
The text input value is masked - maskAllInputs is on by default, so the
characters you type are replaced with asterisks before anything is serialized.
The fetch to httpbin - captured as metadata only: method, URL, status, and
duration. No headers, no body. See network capture.
Console logs - debug: true adds TinyReplay's own logs; the recorder also
captures your page's console output via rrweb's console plugin.
Next
Open the dashboard, watch the session, then read the SDK API to configure flush cadence, masking, and recording duration.