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.

Use cases?

  • Grab all CSS from page!
  • Calc page diffs between renders!


  <script src=""></script>
  // or
  <script src=""></script>
  // or use this gh repo

By default DomSnapshot configured to use demo firebase api to manage snapshots

    const snapshot = new DomSnapshot();
    // waiting for firebase initialization
            // saving current DOM as snapshot
        const id = snapshot.saveSnapshot();
        console.log('snapshotId', id);
        setTimeout(() => {
            console.log('restoring current snapshot');
        }, 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);


    // capture node and send it to server
    snapshoter.saveSnapshot(, 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


Dom Snapshot

JS methods to serialize HTML page to JSON and restore it

Dom Snapshot Info

⭐ Stars 29
🔗 Source Code
🕒 Last Update a year ago
🕒 Created 5 years ago
🐞 Open Issues 17
➗ Star-Issue Ratio 2
😎 Author lifeart