grapesjs/docs/api/layer_manager.md

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) 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<Component>

setOpen

Update the layer open state of the component.

Parameters

• component Component Component to update
• value Boolean

isOpen

Check the layer open state of the component.

Parameters

• component Component

Returns Boolean

setVisible

Update the layer visibility state of the component.

Parameters

• component Component Component to update
• value Boolean

isVisible

Check the layer visibility state of the component.

Parameters

• component Component

Returns Boolean

setLocked

Update the layer locked state of the component.

Parameters

• component Component Component to update
• value Boolean

isLocked

Check the layer locked state of the component.

Parameters

• component Component

Returns Boolean

setName

Update the layer name of the component.

Parameters

• component Component Component to update
• value String New name

getName

Get the layer name of the component.

Parameters

• component Component

Returns String 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 Object containing the layer data.