<> is introduced at the beginning editor.getHtml()

I whittled the json down a quite a bit, and noticed there is some possibly invalid JSON being generated as output?

"components":[
                     {
                        "name":"Row",
                        "droppable":".cell",
                        "resizable":{
                           "tl":0,
                           "tc":0,
                           "tr":0,
                           "cl":0,
                           "cr":0,
                           "bl":0,
                           "br":0,
                           "minDim":1
                        },
                        "classes":[
                           "row"
                        ],
                        "attributes":{
                           "id":"ik4zj"
                        }
                     },
                     {
                        "type":"text",
                        "content":"<p style=\\""text-align":"center;\\""><em>With special appreciation for our <a href=\\""https":" target=\\""_blank\\"">Major Sponsors</a>:</em></p>\\n",
                        "attributes":{
                           "id":"in5ko"
                        }
                     }
                  ]

Its like the introduction of the escaped double quotes is off slightly. JSON.stringify and JSON.parse don't seem to care about it, but theres something going on.

The root component of the page should be a wrapper, in your case is a textnode (eg. this might break a lot of stuff), with an empty tagName (the reason behind <>) and for some reason content: "undefined"(?) <img width="377" alt="Screenshot 2024-02-22 at 00 44 33" src="https://github.com/GrapesJS/grapesjs/assets/11614725/0e76b02e-097b-463f-a921-33250850e3f2"> I wouldn't even expect it to load but the editor is making some slight enforcements on the root component but type and tagName are extendable so can not be enforced.

Can't really help here, I can only suggest updating the JSON manually or via script. This doesn't seem to be a behavior of any previous version, so might also be related to some custom code.

This is what was coming out of Grapes 0.18.4, therefor it was generated by grapes. I would expect if content was "undefined", grapes would either strip it or ignore it. For now i'm just stripping the <> out on my end, but I thought I'd just share it with you.

Thanks for reporting this, @mitcht.

Great question about <> is introduced at the beginning editor.getHtml(). The recommended approach with GrapesJS 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!