Components name

1. You can use data-gjs-custom-name on your components html. <h1 data-gjs-custom-name="Your Name" ...>

2. You can use data-gjs-icon on your components html. <h1 data-gjs-icon='<i class="fa fa-arrows"></i>' ...>

Please change your title to something more meaningful so others can find already solved problems better :)

EDIT: you can use data-gjs-name instead of data-gjs-custom-name

I'd add that if you rely on HTML5 drag & drop, you can use canvas:dragdata event https://grapesjs.com/docs/api/editor.html#available-events

This allows you to make the editor understand "external drops", eg. by default GrapesJS can recognize images, by using canvas:dragdata you can make it recognize files like videos, PDFs, etc.

@NicoEngler Any other way to set default custom names for each type? If someone drag and drop content from outside, I want to display those div's names as "Divs" as well. :)