## 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] * [getLayerData][11] [Page]: page.html [Component]: component.html ## setRoot Update the root layer with another component. ### Parameters * `component` **([Component] | [String][12])** 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][13]<[Component]>** ## setOpen Update the layer open state of the component. ### Parameters * `component` **[Component]** Component to update * `value` **[Boolean][14]** ## isOpen Check the layer open state of the component. ### Parameters * `component` **[Component]** Returns **[Boolean][14]** ## setVisible Update the layer visibility state of the component. ### Parameters * `component` **[Component]** Component to update * `value` **[Boolean][14]** ## isVisible Check the layer visibility state of the component. ### Parameters * `component` **[Component]** Returns **[Boolean][14]** ## setLocked Update the layer locked state of the component. ### Parameters * `component` **[Component]** Component to update * `value` **[Boolean][14]** ## isLocked Check the layer locked state of the component. ### Parameters * `component` **[Component]** Returns **[Boolean][14]** ## setName Update the layer name state of the component. ### Parameters * `component` **[Component]** Component to update * `value` **[String][12]** New 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][15]** 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]: #getlayerdata [12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array [14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean [15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object