GrapesJS

# 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

Update the root layer with another component.

# Parameters

# 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

# isOpen

Check the layer open state of the component.

# Parameters

Returns Boolean (opens new window)

# setVisible

Update the layer visibility state of the component.

# Parameters

# isVisible

Check the layer visibility state of the component.

# Parameters

Returns Boolean (opens new window)

# setLocked

Update the layer locked state of the component.

# Parameters

# isLocked

Check the layer locked state of the component.

# Parameters

Returns Boolean (opens new window)

# setName

Update the layer name of the component.

# Parameters

# getName

Get the layer name of the component.

# Parameters

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.

← Style Manager →