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
Introducing GJS.Market Services: ship your GrapesJS editor without the integration risk
It's everything that usually eats weeks of engineering time, scoped and priced up front. No open-ended hourly surprises.
Tutorial
GrapesJS custom components guide (2026)
Define custom GrapesJS components with DomComponents.addType: detection with isComponent, a model with traits and defaults, and a view for canvas behavior.
Tutorial
Building an AI-Assisted Document Engine with Next.js, GrapesJS, and the AI SDK
Transform your static template editor into an intelligent, generative design workspace with Vercel AI SDK, AI Elements and Next.js.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.