Layer labels

You can extend the model of your component/s and overwrite the getName function

In case this is useful for anyone, I found an easy/alternative way of doing this when a component is created.

editor.on('component:create', function(component) {

  // filter the tag types you're interested in
  if( component.attributes.tagName === 'div' ) {

    // Get some information you want to use as the replacement text
    // In my case, the component element's id attribute, which is stored in component.ccid
    const idParts = component.ccid.split('-')
    if( idParts.length > 0 && idParts[0] === 'cbt') {
      // This is specific to my case, but 'component.attributes.name' is the field that appears in the layer manager
      component.attributes.name = ''
      for( let i=1; i < idParts.length; i++ ) {
        component.attributes.name += idParts[i].charAt(0).toUpperCase() + idParts[i].slice(1) + ' '
      }
    }
    else {
      component.attributes.name = 'Div'
    }
  }
})

This is how I did it:

  grapesInstance.on('component:create', (component) => {
    component.getName = () => component.attributes['custom-name'] || `${component.attributes.tagName}#${component.ccid}`;
  });

The benefit is that if the components id or tag change later it will still be updated in the layer manager and you can also rename individual components.

Thanks for reporting this, @fmay.

Great question about Question : Layer labels. The recommended approach with GrapesJS is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!