Customize the navigator
@minuwan well actually the view already renders the icon https://github.com/artf/grapesjs/blob/94e295ef919dceaade90a3aa36355f2e23935657/src/navigator/view/ItemView.js#L47 but the idea of customizing the render of layers it's not bad.
Read full answer below βQuestion
Is there any way to customize the view of the navigator/layers panel? I need to display an icon in front of each item in the navigator.
Answers (3)
@minuwan well actually the view already renders the icon https://github.com/artf/grapesjs/blob/94e295ef919dceaade90a3aa36355f2e23935657/src/navigator/view/ItemView.js#L47 but the idea of customizing the render of layers it's not bad.
I am not sure what "the navigator" is but since you can create your own panels and whatever, you can customize every bit of the visuals.
Can you be more precise on where you try to add your icons?
@NicoEngler Navigator is the layers panel, GrapesJS called it "The Navigator". Currently, it only contains few configs, but the render it in a different layout or add an icon to a layer item is not possible it seems.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2364
How to add toolbar functionality to the layers panel.
I am trying to add the toolbar to the layers panel and I am not sure how to go about this. Is there any way to accomplish this? toolbar Whe...
Issue #3268
How to add javascript in the html without sanitization?
Hey @artf, I am taking javascript input from the user. I need to add this javascript inside the template HTML but it gets sanitized. Is the...
Issue #2196
Link element selection shows no toolbar
Steps to reproduce: add Text, select a word, click on Link icon in RTE panel, select a Link. Expected behaviour: when I select Link I expec...
Issue #2355
Rulers support in designer mode?
I know there's an older thread with Rulers support as a suggested roadmap item (but it's been closed) - Just wondering if there's any chanc...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins βPremium plugins ship with support, regular updates, and production-ready features β save days of integration work.
Browse premium plugins βRelated tutorials
In-depth guides on the same topic.
Tutorial
Superβ―Tooltip for GrapesJS β Versionβ―0.1.5 Released π
Weβre excited to announce the vβ―0.1.5 update of Superβ―Tooltip, our floatingβmenu and tooltip plugin for GrapesJS
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.