## Layers You can customize the initial state of the module from the editor initialization ```js const editor = grapesjs.init({ // ... layerManager: { // ... }, }) ``` Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance ```js const layers = editor.Layers; ``` ## Available Events * `layer:root` - Root layer changed. The new root component is passed as an argument to the callback. * `layer:component` - Component layer is updated. The updated component is passed as an argument to the callback. ## Methods * [setRoot][1] * [getRoot][2] * [getComponents][3] * [setOpen][4] * [isOpen][5] * [setVisible][6] * [isVisible][7] * [setlocked][8] * [isLocked][9] * [setName][10] * [getName][11] * [getLayerData][12] [Page]: page.html [Component]: component.html ## setRoot Update the root layer with another component. ### Parameters * `component` **([Component] | [String][13])** Component to be set as root ### Examples ```javascript const component = editor.getSelected(); layers.setRoot(component); ``` Returns **[Component]** ## getRoot Get the current root layer. ### Examples ```javascript const layerRoot = layers.getRoot(); ``` Returns **[Component]** ## getComponents Get valid layer child components (eg. excludes non layerable components). ### Parameters * `component` **[Component]** Component from which you want to get child components ### Examples ```javascript const component = editor.getSelected(); const components = layers.getComponents(component); console.log(components); ``` Returns **[Array][14]<[Component]>** ## setOpen Update the layer open state of the component. ### Parameters * `component` **[Component]** Component to update * `value` **[Boolean][15]** ## isOpen Check the layer open state of the component. ### Parameters * `component` **[Component]** Returns **[Boolean][15]** ## setVisible Update the layer visibility state of the component. ### Parameters * `component` **[Component]** Component to update * `value` **[Boolean][15]** ## isVisible Check the layer visibility state of the component. ### Parameters * `component` **[Component]** Returns **[Boolean][15]** ## setLocked Update the layer locked state of the component. ### Parameters * `component` **[Component]** Component to update * `value` **[Boolean][15]** ## isLocked Check the layer locked state of the component. ### Parameters * `component` **[Component]** Returns **[Boolean][15]** ## setName Update the layer name of the component. ### Parameters * `component` **[Component]** Component to update * `value` **[String][13]** New name ## getName Get the layer name of the component. ### Parameters * `component` **[Component]** Returns **[String][13]** Component layer name ## getLayerData Get layer data from a component. ### Parameters * `component` **[Component]** Component from which you want to read layer data. ### Examples ```javascript const component = editor.getSelected(); const layerData = layers.getLayerData(component); console.log(layerData); ``` Returns **[Object][16]** Object containing the layer data. [1]: #setroot [2]: #getroot [3]: #getcomponents [4]: #setopen [5]: #isopen [6]: #setvisible [7]: #isvisible [8]: #setlocked [9]: #islocked [10]: #setname [11]: #getname [12]: #getlayerdata [13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array [15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean [16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object