JS methods to serialize rendered HTML page to JSON and restore it. JS library for browser-render HTML page serialization (with firebase support) JS * deserialization supported.
- Grab all CSS from page!
- Calc page diffs between renders!
<script src="https://gitcdn.xyz/cdn/lifeart/dom-snapshot/master/dist/index.js"></script>
// or
<script src="https://cdn.jsdelivr.net/gh/lifeart/dom-snapshot/dist/index.js"></script>
// or use this gh repoBy default DomSnapshot configured to use demo firebase api to manage snapshots
const snapshot = new DomSnapshot();
// waiting for firebase initialization
snapshot.loaded().then(()=>{
// saving current DOM as snapshot
const id = snapshot.saveSnapshot();
console.log('snapshotId', id);
setTimeout(() => {
console.log('restoring current snapshot');
snapshot.showSnapshot(id)
}, 3000);
});
"Offline" usage example (without firebase sync)
var selector = '#readme > article > pre';
var s1 = snapshoter.takeSnapshot(selector);
document.querySelector(selector).style['fontSize'] = '20px';
document.querySelector(selector).setAttribute('foo', 'bar');
var s2 = snapshoter.takeSnapshot(selector);
var diff = snapshoter.getSnapshotsDiff(s1, s2);
console.log(diff);
// capture node and send it to server
snapshoter.saveSnapshot(Date.now(), snapshoter.createSnapshot('body')) saveSnapshot() - save current web-page as snapshot to firebase / return snapshot id
showSnapshot(id) - restore page snapshot by id from firebase / return snapshot object
An SPA for snapshots preview