Custom component styles are not applied after deletion and re-addition
I'm facing a similar issue, where the re-added component has the correct styles property: <img width="1112" height="17" alt="Image" src="https://github.com/user-attachments/assets/474011c4-b1be-48df-9aa8-14c3dcdfc68d" /> But if I use the "View Code" button, the CSS was not injected, in my case they aren't even in the...
Read full answer below โQuestion
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v143.0.7499.193 Reproducible demo link https://codesandbox.io/p/sandbox/2l3887 Describe the bug How to reproduce the bug? Open the page and load the GrapesJS editor Select the Row component and delete it Click the Row component in the left sidebar to add a Row to the canvas What is the expected behavior? The newly added Row component should display correct styles (white background, border, border-radius, padding, etc.) What is the current behavior? After re-adding the Row component, the .gj...
Answers (4)
I'm facing a similar issue, where the re-added component has the correct styles property: <img width="1112" height="17" alt="Image" src="https://github.com/user-attachments/assets/474011c4-b1be-48df-9aa8-14c3dcdfc68d" /> But if I use the "View Code" button, the CSS was not injected, in my case they...
@mdmontesinos your usage is not correct, styles has to be defined at the component definition, and it's not expected to change. Also, it's wrong to use IDs for component definition if the component is expected to be reused, the ID will be recreated, rely on classes, especially for styles. But the r...
@artf I'm using an ID because there will always be a single instance of that component in my project. My use case is that a component is designed externally to be used as a "background" and then imported into projects that use it. Therefore, when the external component is updated, I need to also up...
This is a common issue encountered when defining static, type-level styles directly within a custom component's styles property in GrapesJS. The behavior you're observing is not strictly a bug in GrapesJS's core functionality, but rather a consequence of how its internal style manager optimizes and...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4573
ParseStyle is not a function
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Firefox 104.0.1Reproducible demo link https:...
Issue #4196
Ids gets changed while trying to set components on the canvas using json
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link no link Desc...
Issue #5990
When you delete a component, duplicate classes between components will be deleted.
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 126.0.6478.127(Windows) Reproducibl...
Issue #4754
Closing `</script>` tag not escaped for script properties
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 107.0.5304.122 (64-bit) Rep...
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
Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)
New to GrapesJS? See exactly what the stock editor gives you, where it falls short, and which plugins close the gaps โ a beginner-friendly 2026 comparison
Tutorial
Lighthouse for GrapesJS: Audit Accessibility and SEO Without Leaving the Editor
Live WCAG 2.1/2.2 accessibility auditor + SEO manager for GrapesJS. Every finding is bound to the exact component โ click to select, then one-click fix.
Tutorial
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners โ this post is for you.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.