diff --git a/demo/nested.html b/demo/nested.html
index 1d8f06992..289e09a66 100644
--- a/demo/nested.html
+++ b/demo/nested.html
@@ -24,8 +24,7 @@ <h1>Nested grids demo</h1>
     <a class="btn btn-primary" onClick="addNewWidget('.nested1')" href="#">Add Widget Grid1</a>
     <a class="btn btn-primary" onClick="addNewWidget('.nested2')" href="#">Add Widget Grid2</a>
     <br><br>
-
-    <div class="grid-stack"></div>
+    <!-- grid will be added here -->
   </div>
 
   <script type="text/javascript">
@@ -45,6 +44,7 @@ <h1>Nested grids demo</h1>
       {x:5, w:4, h:4, content: 'nested 2 - constrained to parent (default)', subGrid: {children: sub2, dragOut: false, class: 'nested2', ...subOptions}},
     ]};
 
+    // create and load it all from JSON above
     GridStack.addGrid(document.querySelector('.container-fluid'), layout);
 
     addNewWidget = function(selector) {
diff --git a/demo/serialization.html b/demo/serialization.html
index 64e7313f2..b97141626 100644
--- a/demo/serialization.html
+++ b/demo/serialization.html
@@ -14,11 +14,11 @@
     <h1>Serialization demo</h1>
     <a onClick="saveGrid()" class="btn btn-primary" href="#">Save</a>
     <a onClick="loadGrid()" class="btn btn-primary" href="#">Load</a>
-    <a onClick="saveGridManual()" class="btn btn-primary" href="#">Save Manual</a>
-    <a onClick="loadGridManual()" class="btn btn-primary" href="#">Load Manual</a>
+    <a onClick="saveFullGrid()" class="btn btn-primary" href="#">Save Full</a>
+    <a onClick="loadFullGrid()" class="btn btn-primary" href="#">Load Full</a>
     <a onClick="clearGrid()" class="btn btn-primary" href="#">Clear</a>
     <br/><br/>
-    <div class="grid-stack"></div>    
+    <div id="gridCont"><div class="grid-stack"></div></div>
     <hr/>
     <textarea id="saved-data" cols="100" rows="20" readonly="readonly"></textarea>
   </div>
@@ -41,54 +41,33 @@ <h1>Serialization demo</h1>
     ];
     serializedData.forEach((n, i) =>
       n.content = `<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br> ${i}<br> ${n.content ? n.content : ''}`);
+    let serializedFull;
 
-    // NEW 2.x method
+    // 2.x method - just saving list of widgets with content (default)
     loadGrid = function() {
-      grid.load(serializedData, true);
+      grid.load(serializedData, true); // update things
     }
 
-    // NEW 2.x method
+    // 2.x method
     saveGrid = function() {
+      delete serializedFull;
       serializedData = grid.save();
       document.querySelector('#saved-data').value = JSON.stringify(serializedData, null, '  ');
     }
 
-    // old (pre 2.x) way to manually load a grid
-    loadGridManual = function() {
-      let items = GridStack.Utils.sort(serializedData);
-      grid.batchUpdate();
-
-      if (grid.engine.nodes.length === 0) {
-        // load from empty
-        items.forEach(function (item) {
-          grid.addWidget('<div class="grid-stack-item"><div class="grid-stack-item-content">' + item.id + '</div></div>', item);
-        });
-      } else {
-        // else update existing nodes (instead of calling grid.removeAll())
-        grid.engine.nodes.forEach(function (node) {
-          let item = items.find(function(e) { return e.id === node.id});
-          grid.move(node.el, item.x, item.y, item.w, item.h);
-        });
-      }
-
-      grid.commit();
-    };
+    // 3.1 full method saving the grid options + children (which is recursive for nested grids)
+    saveFullGrid = function() {
+      serializedFull = grid.save(true, true);
+      serializedData = serializedFull.children;
+      document.querySelector('#saved-data').value = JSON.stringify(serializedFull, null, '  ');
+    }
 
-    // old (pre 2.x) way to manually save a grid
-    saveGridManual = function() {
-      serializedData = [];
-      grid.engine.nodes.forEach(function(node) {
-        serializedData.push({
-          x: node.x,
-          y: node.y,
-          w: node.w,
-          h: node.h,
-          id: node.id,
-          custom: 'save anything here'
-        });
-      });
-      document.querySelector('#saved-data').value = JSON.stringify(serializedData, null, '  ');
-    };
+    // 3.1 full method to reload from scratch - delete the grid and add it back from JSON
+    loadFullGrid = function() {
+      if (!serializedFull) return;
+      grid.destroy(true); // nuke everything
+      grid = GridStack.addGrid(document.querySelector('#gridCont'), serializedFull)
+    }
 
     clearGrid = function() {
       grid.removeAll();
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index b0d1cb358..fc2f7d7da 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -44,7 +44,10 @@ Change log
 
 ## 3.3.0-dev
 
-- add new `addGrid(parent, opts)` to create a grid and load children, which is used by `load()` to supports nested grids creation. see [nested.html](https://github.com/gridstack/gridstack.js/blob/develop/demo/nested.html) demo.
+- add new `addGrid(parent, opts)` to create a grid and load children instead of `init() + load()`, which is used by `load()` to supports nested grids creation.
+see [nested.html](https://github.com/gridstack/gridstack.js/blob/develop/demo/nested.html) demo.
+- `save()` will now work on nested grids, recursively saving info. added flag to also allow saving the current grid options + children
+(needed for nested grids) so you can now call new `adddGrid()` to re-create everything from JSON.
 
 ## 3.3.0 (2020-11-29)
 
diff --git a/doc/README.md b/doc/README.md
index b007a1290..330ce8c37 100644
--- a/doc/README.md
+++ b/doc/README.md
@@ -21,6 +21,7 @@ gridstack.js API
   - [resizestart(event, el)](#resizestartevent-el)
   - [resizestop(event, el)](#resizestopevent-el)
 - [API](#api)
+  - [addGrid(parent: HTMLElement, opt: GridStackOptions)](#addgridparent-htmlelement-opt-gridstackoptions)
   - [addWidget(el?: GridStackWidget | GridStackElement, options?: GridStackWidget)](#addwidgetel-gridstackwidget--gridstackelement-options-gridstackwidget)
   - [batchUpdate()](#batchupdate)
   - [compact()](#compact)
@@ -249,6 +250,11 @@ grid.on('resizestop', function(event: Event, el: GridItemHTMLElement) {
 
 ## API
 
+### addGrid(parent: HTMLElement, opt: GridStackOptions) 
+
+create a grid under given parent, with given options and loading children recursively (for nested grids), instead of `init() + load()`. Used by `load()` to supports nested grids creation.
+see [nested.html](https://github.com/gridstack/gridstack.js/blob/develop/demo/nested.html) demo
+
 ### addWidget(el?: GridStackWidget | GridStackElement, options?: GridStackWidget)
 
 Creates new widget and returns it. Options is an object containing the fields x,y,width,height,etc...
diff --git a/spec/gridstack-spec.ts b/spec/gridstack-spec.ts
index a86fa4fbb..599d8a8a3 100644
--- a/spec/gridstack-spec.ts
+++ b/spec/gridstack-spec.ts
@@ -1036,7 +1036,7 @@ describe('gridstack', function() {
       document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
     });
     afterEach(function() {
-      //document.body.removeChild(document.getElementsByClassName('grid-stack')[0]);
+      document.getElementById('gs-cont').remove();
     });
     it('should cleanup gridstack', function() {
       let options = {
@@ -1044,8 +1044,10 @@ describe('gridstack', function() {
         margin: 5
       };
       let grid = GridStack.init(options);
+      let gridEl = grid.el;
       grid.destroy();
-      expect(grid.el.parentElement).toBe(null);
+      expect(gridEl.parentElement).toBe(null);
+      expect(grid.el).toBe(undefined);
       expect(grid.engine).toBe(undefined);
     });
     it('should cleanup gridstack but leave elements', function() {
@@ -1054,11 +1056,13 @@ describe('gridstack', function() {
         margin: 5
       };
       let grid = GridStack.init(options);
+      let gridEl = grid.el;
       grid.destroy(false);
-      expect(grid.el.parentElement).not.toBe(null);
+      expect(gridEl.parentElement).not.toBe(null);
       expect(Utils.getElements('.grid-stack-item').length).toBe(2);
+      expect(grid.el).toBe(undefined);
       expect(grid.engine).toBe(undefined);
-      grid.destroy();
+      grid.destroy(); // sanity check for call twice!
     });
   });
 
@@ -1661,7 +1665,9 @@ describe('gridstack', function() {
       document.body.insertAdjacentHTML('afterbegin', gridHTML);
     });
     afterEach(function() {
-      document.body.removeChild(document.getElementById('gs-cont'));
+      let els = document.body.querySelectorAll('.grid-stack');
+      expect(els.length).toBe(2);
+      els.forEach(g => g.remove());
     });
     it('should not remove incorrect child', function() {
       let grids = GridStack.initAll();
diff --git a/spec/utils-spec.ts b/spec/utils-spec.ts
index f54e16f2f..40b00c5e3 100644
--- a/spec/utils-spec.ts
+++ b/spec/utils-spec.ts
@@ -111,18 +111,6 @@ describe('gridstack utils', function() {
     });
   });
 
-  describe('clone', function() {
-    it('should match content', function() {
-      let a = [1,2,3];
-      let v1 = {one: 1, two: 'two', three: a};
-      let v2: any = Utils.clone(v1);
-      expect(v1 === v2).toBeFalse();
-      expect(v1.one).toEqual(v2.one);
-      expect(v1.two).toEqual(v2.two);
-      expect(v1.three).toEqual(v2.three);
-    });
-  });
-
   describe('removePositioningStyles', function() {
     it('should remove styles', function() {
       let doc = document.implementation.createHTMLDocument();
diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts
index cf28a1cee..6e65831b5 100644
--- a/src/gridstack-engine.ts
+++ b/src/gridstack-engine.ts
@@ -368,13 +368,13 @@ export class GridStackEngine {
       0,
       this.nodes.map(n => {
         if (n === node) {
-          clonedNode = Utils.clone(n);
+          clonedNode = {...n};
           return clonedNode;
         }
-        return Utils.clone(n);
+        return {...n};
       }));
 
-    if (!clonedNode) {  return true;}
+    if (!clonedNode) {return true}
 
     clone.moveNode(clonedNode, x, y, w, h);
 
@@ -401,7 +401,7 @@ export class GridStackEngine {
       null,
       this.float,
       0,
-      this.nodes.map(n => Utils.clone(n)));
+      this.nodes.map(n => {return {...n}}));
     clone.addNode(node);
     return clone.getRow() <= this.maxRow;
   }
diff --git a/src/gridstack.ts b/src/gridstack.ts
index 272fe4ca7..82e855ec0 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -40,6 +40,55 @@ interface GridCSSStyleSheet extends CSSStyleSheet {
   _max?: number; // internal tracker of the max # of rows we created\
 }
 
+// default values for grid options - used during init and when saving out
+const GridDefaults: GridStackOptions = {
+  column: 12,
+  minRow: 0,
+  maxRow: 0,
+  itemClass: 'grid-stack-item',
+  placeholderClass: 'grid-stack-placeholder',
+  placeholderText: '',
+  handle: '.grid-stack-item-content',
+  handleClass: null,
+  styleInHead: false,
+  cellHeight: 'auto',
+  margin: 10,
+  auto: true,
+  minWidth: 768,
+  float: false,
+  staticGrid: false,
+  animate: true,
+  alwaysShowResizeHandle: false,
+  resizable: {
+    autoHide: true,
+    handles: 'se'
+  },
+  draggable: {
+    handle: '.grid-stack-item-content',
+    scroll: false,
+    appendTo: 'body'
+  },
+  dragIn: undefined,
+  dragInOptions : {
+    revert: 'invalid',
+    handle: '.grid-stack-item-content',
+    scroll: false,
+    appendTo: 'body'
+  },
+  disableDrag: false,
+  disableResize: false,
+  rtl: 'auto',
+  removable: false,
+  removableOptions: {
+    accept: '.grid-stack-item'
+  },
+  removeTimeout: 2000,
+  marginUnit: 'px',
+  cellHeightUnit: 'px',
+  disableOneColumnMode: false,
+  oneColumnModeDomSort: false
+};
+
 /**
  * Main gridstack class - you will need to call `GridStack.init()` first to initialize your grid.
  * Note: your grid elements MUST have the following classes for the CSS layout to work:
@@ -77,7 +126,7 @@ export class GridStack {
       return null;
     }
     if (!el.gridstack) {
-      el.gridstack = new GridStack(el, Utils.clone(options));
+      el.gridstack = new GridStack(el, {...options});
     }
     return el.gridstack
   }
@@ -95,7 +144,7 @@ export class GridStack {
     let grids: GridStack[] = [];
     GridStack.getGridElements(selector).forEach(el => {
       if (!el.gridstack) {
-        el.gridstack = new GridStack(el, Utils.clone(options));
+        el.gridstack = new GridStack(el, {...options});
       }
       grids.push(el.gridstack);
     });
@@ -183,24 +232,12 @@ export class GridStack {
     let rowAttr = Utils.toNumber(el.getAttribute('gs-row'));
 
     // elements attributes override any passed options (like CSS style) - merge the two together
-    let defaults: GridStackOptions = {
+    let defaults: GridStackOptions = {...GridDefaults,
       column: Utils.toNumber(el.getAttribute('gs-column')) || 12,
       minRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-min-row')) || 0,
       maxRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-max-row')) || 0,
-      itemClass: 'grid-stack-item',
-      placeholderClass: 'grid-stack-placeholder',
-      placeholderText: '',
-      handle: '.grid-stack-item-content',
-      handleClass: null,
-      styleInHead: false,
-      cellHeight: 'auto',
-      margin: 10,
-      auto: true,
-      minWidth: 768,
-      float: false,
       staticGrid: Utils.toBool(el.getAttribute('gs-static')) || false,
-      _class: 'grid-stack-instance-' + (Math.random() * 10000).toFixed(0),
-      animate: true,
+      _styleSheetClass: 'grid-stack-instance-' + (Math.random() * 10000).toFixed(0),
       alwaysShowResizeHandle: opts.alwaysShowResizeHandle || false,
       resizable: {
         autoHide: !(opts.alwaysShowResizeHandle || false),
@@ -211,27 +248,11 @@ export class GridStack {
         scroll: false,
         appendTo: 'body'
       },
-      dragIn: undefined,
-      dragInOptions : {
-        revert: 'invalid',
-        handle: '.grid-stack-item-content',
-        scroll: false,
-        appendTo: 'body'
-      },
-      disableDrag: false,
-      disableResize: false,
-      rtl: 'auto',
-      removable: false,
       removableOptions: {
         accept: '.' + (opts.itemClass || 'grid-stack-item')
       },
-      removeTimeout: 2000,
-      marginUnit: 'px',
-      cellHeightUnit: 'px',
-      disableOneColumnMode: false,
-      oneColumnModeDomSort: false
     };
-    if (el.getAttribute('gs-animate')) {
+    if (el.getAttribute('gs-animate')) { // default to true, but if set to false use that instead
       defaults.animate = Utils.toBool(el.getAttribute('gs-animate'))
     }
 
@@ -247,8 +268,11 @@ export class GridStack {
       this.el.classList.add('grid-stack-rtl');
     }
 
-    this.opts._isNested = Utils.closestByClass(this.el, this.opts.itemClass) !== null;
-    if (this.opts._isNested) {
+    // check if we're been nested, and if so update our style and keep pointer around (used during save)
+    let parentGridItemEl = Utils.closestByClass(this.el, GridDefaults.itemClass) as GridItemHTMLElement;
+    if (parentGridItemEl && parentGridItemEl.gridstackNode) {
+      this.opts._isNested = parentGridItemEl.gridstackNode;
+      this.opts._isNested.subGrid = this;
       this.el.classList.add('grid-stack-nested');
     }
 
@@ -262,7 +286,7 @@ export class GridStack {
       this.cellHeight(this.opts.cellHeight, false);
     }
 
-    this.el.classList.add(this.opts._class);
+    this.el.classList.add(this.opts._styleSheetClass);
 
     this._setStaticClass();
     this._updateStyles();
@@ -379,9 +403,15 @@ export class GridStack {
     return el;
   }
 
-  /** saves the current layout returning a list of widgets for serialization */
-  public save(saveContent = true): GridStackWidget[] {
+  /**
+   * saves the current layout returning a list of widgets for serialization (with default to save content), which might include any nested grids.
+   * Optionally you can also save the grid with options itself, so you can call the new GridStack.addGrid()
+   * to recreate everything from scratch. GridStackOptions.children would then contain the widget list.
+   */
+  public save(saveContent = true, saveGridOpt = false): GridStackWidget[] | GridStackOptions {
+    // return copied nodes we can modify at will...
     let list = this.engine.save(saveContent);
+
     // check for HTML content as well
     if (saveContent) {
       list.forEach(n => {
@@ -393,6 +423,30 @@ export class GridStack {
         }
       });
     }
+
+    // check if save entire grid options (needed for recursive) + children...
+    if (saveGridOpt) {
+
+      // check for nested grid
+      list.forEach(n => {
+        if (n.subGrid) {
+          n.subGrid = (n.subGrid as GridStack).save(saveContent, true) as GridStackOptions;
+        }
+      })
+
+      let o: GridStackOptions = {...this.opts};
+      // delete default values that will be recreated on launch
+      if (o.marginBottom === o.marginTop && o.marginRight === o.marginLeft && o.marginTop === o.marginRight) {
+        o.margin = o.marginTop;
+        delete o.marginTop; delete o.marginRight; delete o.marginBottom; delete o.marginLeft;
+      }
+      if (o.rtl === (this.el.style.direction === 'rtl')) { o.rtl = 'auto' }
+      if (this._isAutoCellHeight) { o.cellHeight = 'auto' }
+      Utils.removeInternalAndSame(o, GridDefaults);
+      o.children = list;
+      return o;
+    }
+
     return list;
   }
 
@@ -440,10 +494,10 @@ export class GridStack {
       let item = (w.id || w.id === 0) ? this.engine.nodes.find(n => n.id === w.id) : undefined;
       if (item) {
         this.update(item.el, w);
-        if (w.subGrid && w.subGrid.children) { // update any sub grid as well
+        if (w.subGrid && (w.subGrid as GridStackOptions).children) { // update any sub grid as well
           let sub = item.el.querySelector('.grid-stack') as GridHTMLElement;
           if (sub && sub.gridstack) {
-            sub.gridstack.load(w.subGrid.children); // TODO: support updating grid options ?
+            sub.gridstack.load((w.subGrid as GridStackOptions).children); // TODO: support updating grid options ?
           }
         }
       } else if (addAndRemove) {
@@ -454,7 +508,7 @@ export class GridStack {
         }
         if (w.subGrid) { // see if there is a sub-grid to create too
           let content = w.el.querySelector('.grid-stack-item-content') as HTMLElement;
-          GridStack.addGrid(content, w.subGrid);
+          w.subGrid = GridStack.addGrid(content, w.subGrid as GridStackOptions);
         }
       }
     });
@@ -600,22 +654,26 @@ export class GridStack {
   }
 
   /**
-   * Destroys a grid instance.
-   * @param removeDOM if `false` grid and items elements will not be removed from the DOM (Optional. Default `true`).
+   * Destroys a grid instance. DO NOT CALL any methods or access any vars after this as it will free up members.
+   * @param removeDOM if `false` grid and items HTML elements will not be removed from the DOM (Optional. Default `true`).
    */
   public destroy(removeDOM = true): GridStack {
+    if (!this.el) { return; } // prevent multiple calls
     this._updateWindowResizeEvent(true);
     this.setStatic(true); // permanently removes DD
     if (!removeDOM) {
       this.removeAll(removeDOM);
-      this.el.classList.remove(this.opts._class);
-      delete this.el.gridstack;
+      this.el.classList.remove(this.opts._styleSheetClass);
     } else {
       this.el.parentNode.removeChild(this.el);
     }
     this._removeStylesheet();
+    delete this.opts._isNested;
+    delete this.opts;
     delete this.placeholder;
     delete this.engine;
+    delete this.el.gridstack; // remove circular dependency that would prevent a freeing
+    delete this.el;
     return this;
   }
 
@@ -1096,7 +1154,7 @@ export class GridStack {
 
     let cellHeight = this.opts.cellHeight as number;
     let cellHeightUnit = this.opts.cellHeightUnit;
-    let prefix = `.${this.opts._class} > .${this.opts.itemClass}`;
+    let prefix = `.${this.opts._styleSheetClass} > .${this.opts.itemClass}`;
 
     // create one as needed
     if (!this._styles) {
@@ -1116,7 +1174,7 @@ export class GridStack {
       let right: string = this.opts.marginRight + this.opts.marginUnit;
       let left: string = this.opts.marginLeft + this.opts.marginUnit;
       let content = `${prefix} > .grid-stack-item-content`;
-      let placeholder = `.${this.opts._class} > .grid-stack-placeholder > .placeholder-content`;
+      let placeholder = `.${this.opts._styleSheetClass} > .grid-stack-placeholder > .placeholder-content`;
       Utils.addCSSRule(this._styles, content, `top: ${top}; right: ${right}; bottom: ${bottom}; left: ${left};`);
       Utils.addCSSRule(this._styles, placeholder, `top: ${top}; right: ${right}; bottom: ${bottom}; left: ${left};`);
       // resize handles offset (to match margin)
@@ -1281,6 +1339,8 @@ export class GridStack {
    * and remember the prev columns we used, as well as check for auto cell height (square)
    */
   public onParentResize(): GridStack {
+    if (!this.el) {return} // return if we're gone
+
     // make the cells content (minus margin) square again
     if (this._isAutoCellHeight) {
       Utils.throttle(() => {
diff --git a/src/types.ts b/src/types.ts
index 3a8db5207..e0034d1e0 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -177,10 +177,10 @@ export interface GridStackOptions {
   /** if `true` will add style element to `<head>` otherwise will add it to element's parent node (default `false`). */
   styleInHead?: boolean;
 
-  /** @internal */
-  _isNested?: boolean;
-  /** @internal */
-  _class?: string;
+  /** @internal point to a parent grid item if we're nested */
+  _isNested?: GridStackNode;
+  /** @internal unique class name for our generated CSS style sheet */
+  _styleSheetClass?: string;
 }
 
 
@@ -218,8 +218,8 @@ export interface GridStackWidget {
   id?: numberOrString;
   /** html to append inside as content */
   content?: string;
-  /** optional nested grid options and list of children */
-  subGrid?: GridStackOptions;
+  /** optional nested grid options and list of children, which then turns into actual instance at runtime */
+  subGrid?: GridStackOptions | GridStack;
 }
 
 /** Drag&Drop resize options */
diff --git a/src/utils.ts b/src/utils.ts
index 7458f43fd..7cc70a7b4 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -223,18 +223,27 @@ export class Utils {
     return true;
   }
 
-  /** makes a shallow copy of the passed json struct */
-  // eslint-disable-next-line
-  static clone(target: {}): {} {
-    return {...target};
+  /** removes field from the first object if same as the second objects (like diffing) and internal '_' for saving */
+  static removeInternalAndSame(a: unknown, b: unknown):void {
+    if (typeof a !== 'object' || typeof b !== 'object') return;
+    for (let key in a) {
+      let val = a[key];
+      if (val && typeof val === 'object') {
+        for (let i in val) {
+          if (val[i] === b[key][i] || i[0] === '_') { delete val[i] }
+        }
+        if (!Object.keys(val).length) { delete a[key] }
+      } else if (val === b[key] || key[0] === '_') { delete a[key] }
+    }
   }
 
   /** return the closest parent matching the given class */
   static closestByClass(el: HTMLElement, name: string): HTMLElement {
-    el = el.parentElement;
-    if (!el) return null;
-    if (el.classList.contains(name)) return el;
-    return Utils.closestByClass(el, name);
+
+    while(el = el.parentElement) {
+      if (el.classList.contains(name)) return el;
+    }
+    return null;
   }
 
   /** delay calling the given function by certain amount of time */