DOMRec records and replays DOM updates to make lightweight, pixel-perfect screenshots and movies. Perfect for Web application demos.
The ability to record the DOM of a website makes this package very flexible and allows many other possibilites. There are a few tools that already built up on this:
domrec-coreto record DOM changes of any website.
npm install --save domrec-core # or yarn add domrec-core
You can find the two needed files (
replay.js) inside the
The code basically consists of two parts:
replayingan existing record
To start a recording, you have to pass an HTML node to the
DOMRecorder class. You can also pass
document.body in case you want to record the whole window.
Example which only records everything inside a div with the id
<script src="./dist/recording.js"></script> <script> window.recorder = new DOMRecorder(document.getElementById("content")); </script>
In most cases you want to start recording after the
DOMContentLoaded event has fired.
Ending a recording is easy:
const contents = window.recorder.stop(); document.body.textContent = JSON.stringify(contents);
DOMReplayManager to setup and init the replay of a recording. You have to pass two parameters:
<script src="./dist/replay.js"></script> <div id="replayContainer" style=""></div> <script> const recording = contents // the stored contents object from the recording above const m = new DOMReplayManager(document.getElementById('replayContainer'), recording) m.addReplayStylesheet('./domrec-replay.css') m.init() </script>
In most cases you want to add the
demo/domrec-replay.css file with the
addReplayStylesheet function, otherwise it will look really bad. Try it out ;)
npm run build(in case you want to have source-maps of better debugging, use
demo/record-demo.htmlin the browser and start recording.
//// Paste your demo data text here.inside
demo/replay-demo.htmland simply open
The recording produces an object with the following properties:
initialState: The initial state of the DOM when starting to record
actions: The DOM changes
stylesheets: The (external) stylesheets of the website when the recording started
iframeStylesheets: Contains the URL of stylesheets of iframes encountered during recording.
height: The height of the initial root node
width: The width of the initial root node