# Layers
You can customize the initial state of the module from the editor initialization
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
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
- getRoot
- getComponents
- setOpen
- isOpen
- setVisible
- isVisible
- setlocked
- isLocked
- setName
- getName
- getLayerData
# setRoot
Update the root layer with another component.
# Parameters
component
(Component | String (opens new window)) Component to be set as root
# Examples
const component = editor.getSelected();
layers.setRoot(component);
Returns Component
# getRoot
Get the current root layer.
# Examples
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
const component = editor.getSelected();
const components = layers.getComponents(component);
console.log(components);
Returns Array (opens new window)<Component>
# setOpen
Update the layer open state of the component.
# Parameters
component
Component Component to updatevalue
Boolean (opens new window)
# isOpen
Check the layer open state of the component.
# Parameters
component
Component
Returns Boolean (opens new window)
# setVisible
Update the layer visibility state of the component.
# Parameters
component
Component Component to updatevalue
Boolean (opens new window)
# isVisible
Check the layer visibility state of the component.
# Parameters
component
Component
Returns Boolean (opens new window)
# setLocked
Update the layer locked state of the component.
# Parameters
component
Component Component to updatevalue
Boolean (opens new window)
# isLocked
Check the layer locked state of the component.
# Parameters
component
Component
Returns Boolean (opens new window)
# setName
Update the layer name of the component.
# Parameters
component
Component Component to updatevalue
String (opens new window) New name
# getName
Get the layer name of the component.
# Parameters
component
Component
Returns String (opens new window) Component layer name
# getLayerData
Get layer data from a component.
# Parameters
component
Component Component from which you want to read layer data.
# Examples
const component = editor.getSelected();
const layerData = layers.getLayerData(component);
console.log(layerData);
Returns Object (opens new window) Object containing the layer data.