Free and Open source Web Builder Framework. Next generation tool for building templates without coding
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

2.3 KiB

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

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 LayerData Object containing layer data

setVisible

Update component visibility

Parameters

  • component Component
  • value boolean

isVisible

Check if the component is visible

Parameters

  • component Component

Returns boolean

setLocked

Update component locked value

Parameters

  • component Component
  • value boolean

isLocked

Check if the component is locked

Parameters

  • component Component

Returns boolean

setName

Update component name

Parameters

  • component Component
  • value string