DomSnapshot

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!

Usage

  <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 repo

By 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'))    

Methods

saveSnapshot() - save current web-page as snapshot to firebase / return snapshot id

showSnapshot(id) - restore page snapshot by id from firebase / return snapshot object

Viwer

An SPA for snapshots preview

dom-snapshot-ui

Dom Snapshot

JS methods to serialize HTML page to JSON and restore it

Dom Snapshot Info

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