Components name

Question

I have two questions.Is there any way to change the built-in components name? I wanted to change the name "Box" to "Div". so the same name appears on select and on the layers/navigator panel. In simple term, if I drag and dropped a div, I need it to be named Div.Any way to add an icon in front of the text of each item type in the layers panel? I mean a box for Div, A list icon for ULs etc...

NicoEngler · Accepted Answer

You can use data-gjs-custom-name on your components html.

You can use data-gjs-icon on your components html.

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

artf · Answer

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.

minuwan · Answer

@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. :)

Components name

Question

Answers (3)

Related Questions and Answers

[QUESTIONS] Disable/change build-in components behavior

[Question] Define or hide properties for specific components

Default Component Properties

Border Color Issue

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories