Symbols and IDs
Thanks for reporting this, @lexoyo. Great question about Symbols and IDs. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for the on() event listener method Most operations can be achieved by listening to editor and c...
Read full answer below ↓Question
@artf The elements with an ID in the symbols have different ID in the different instances of the symbol. It makes sense because it's bad to have multiple elements with the same ID in an HTML document
Issue 1
Users who have a symbol on different pages are confused because the styles they "add" to an element ID is "lost". Did you think of a clean way to work around this in this use case?
Issue 2
Another problematic use case is when I have multiple occurences of a symbole, with in side it
- an element with an ID
- a reference to this ID, e.g.
<label for="the-id">
Solutions
Then it breaks and there is no way to make it work right? I have other similar use cases unfortunately. For those I'm thinking I could implement a workaround in my grapesjs-symbols plugin (a wrapper around symbols, with ui etc), it would detect that a symbol is pasted or duplicated and change the references to IDs inside the symbol but I'm not sure if the for attribute will be synced and then changed everywhere... What do you think?
Edit: I tried and it seem to work well for the "Issue 2"
Following these issues I understand the IDs will not be addressed in the mid or long term right?
- #6659
- #4837
Thank you for your help !
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (1)
Thanks for reporting this, @lexoyo.
Great question about Symbols and IDs. The recommended approach with StyleManager is to use the event-driven API.
Start here:
- Check the GrapesJS documentation for your specific module
- Look for the
on()event listener method - 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!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #6663
Symbols break when loading pages progressively (instances lose __symbol link)
Here is a video showing the bug: https://github.com/user-attachments/assets/0fdc76ed-cee5-4481-98b1-cbbf52572b31 GrapesJS version [x] I con...
Issue #6659
Symbol styles not synced
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 145.0 (64-bit) Reproducible demo l...
Issue #3627
[QUESTION]: I'm trying to duplicate the page, but the styles are not geting applied due to the Ids, changes to -2,-3 at the end.
This is what my function looks like. I am trying duplicate the page, the HTML part is fine but as css is applied through ids, when a new pa...
Issue #4529
When we resize an image with a class 'xyz', all the elements on the page with same class also gets resized because editor adds css to those classes.
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Version 104.0.5112.101 (Official Build) (arm...
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 →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.