Symbol styles not synced

Got it, if I want to style something inside a symbol and share the changes I should add a class to it. Thank you both for the help!

Hello This color is applied to the element, in grapesjs this means it will generate a css like #compid { color: red; } but IDs are unique in an HTML page, so the other symbol has a different ID It's a problem to me too, I'm not sure how that should be addressed... Maybe @artf has an idea

Sorry, not a bug, but a "feature" 😅

IMHO, component styles should not be bound to symbols; that's an easy way to override styles between same symbols (common thing). If you need the same styles, you simply leverage the classes.

Thanks for reporting this, @NilLlisterri.

Great question about Symbol styles not synced. The recommended approach with StyleManager is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!