Browse by category
GrapesJS Layers
GrapesJS layer manager plugins enhance the layers panel with additional controls, grouping features, and visual hierarchy tools. The layers panel is how users navigate and select nested components — these extensions make it faster, more intuitive, and more powerful. Browse free and premium layer manager plugins for GrapesJS, each with installation guides and version compatibility information.
About GrapesJS Layers
The GrapesJS layers panel displays the document tree of all components on the canvas — a hierarchical view where users can select, rename, show or hide, and reorder elements. By default the layers panel is minimal: it shows component names, a visibility toggle, and drag handles. GrapesJS layer manager plugins on GJS.Market add functionality that makes the layers panel more useful for complex, deeply nested page structures. The most common additions include colour-coded component type indicators so users can instantly distinguish blocks, components, and text nodes; component locking controls that prevent accidental edits to finished sections; bulk selection with shift-click; layer search by component name or selector; and collapsible group headers that let users fold away sections of the tree they are not working on. Some layer manager plugins also synchronise with the canvas selection — clicking a layer in the panel smoothly scrolls the canvas to that component and opens its style panel. All layer manager plugins on GJS.Market are compatible with GrapesJS's native component model and do not require changes to your existing block or component definitions.
GrapesJS Layers — FAQ
- What is the GrapesJS layers panel?
- It is the tree view of every component on the canvas, mirroring the component model rather than the rendered DOM. Users select, rename, reorder, and show or hide elements from it. On deeply nested pages it is often the only practical way to reach a component that is behind or inside another one.
- How do I rename a layer in GrapesJS?
- Double-click the layer name in the panel and type. The value is stored on the component as a custom name and only affects the editor — your exported HTML is unchanged. You can also set it in code with component.set('custom-name', 'Hero'), which is what block libraries do to give their sections readable labels.
- Can I hide or lock components from the layers panel?
- Hiding is built in — the eye toggle sets the component's style to display:none, so it also affects the export. Locking is not part of the default panel; plugins in this category add a lock control that makes finished sections unselectable on the canvas, which is the usual fix for users dragging apart a header by accident.
- Why does a component not appear in the layers panel?
- Most often because its type sets layerable to false, which is how wrappers and helper elements stay out of the tree. Textnode children are also hidden by design. If one of your own components is missing, check the layerable, selectable and hoverable flags on its component type definition.
- Can the layers panel search or filter components?
- Not by default — the built-in panel has no search field. Plugins in this category add search by component name or CSS selector, collapsible group headers and colour-coded type indicators, which is what makes the panel workable once a page runs to hundreds of nodes. They build on the native component model, so no changes to your existing blocks are needed.