Ids gets changed while trying to set components on the canvas using json

Hi @shelendravashishtha2 can you please indicate the exact steps (I need to know what is the json you're referring to)

I've seen this happen to if you don't save a reference to the CSS before using the editor.setComponents() method All of the CSS markeup from the elements id selector/reference is removed when using editor.setComponents() method The exact steps i've encountered are save a reference of the editor components as JSON ie

`let jsonElements = editor.getComponents().toJSON();

editor.setComponents(jsonElements)

`

after using the setComponents method the CSS makrup is lost for all of the id selectors of the blocks, and some of the components id's will change ie if it was #iefzr it will change to #iefzr-2

The reason i've used saved the jsonElements is for having a way to edit them via the UI with an editor like monaco editor see my screenshot below, but even without modifying the JSON the CSS still get's reset

Is there a better way to go about modifying the JSON ie one to one instead of modifying it via setComponents?

Thanks for reporting this, @shelendravashishtha2.

Great question about Ids gets changed while trying to set components on the canvas using json. 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!