Issue #4904πŸ’¬ AnsweredOpened February 5, 2023by handhikadj0 reactions

GetHtml() producing invalid structure when there is js inside it

Quick answerby artf

The output is correct (check the real console not the broken one from jsfiddle) and read carefully this section, you should never rely on HTML/CSS to load back the project.

Read full answer below ↓

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

chrome latest

Reproducible demo link

https://jsfiddle.net/snj87o6f/1/

Describe the bug

Context/Description I think this is a bug because I need to save and load the data back with editor.Parser.parseHtml on onStore of storageManager. it's even worse, the structure on the Layer Manager is broken when I refresh the page (onLoad runs). seems like editor.Parser.parseHtml() doesn't parse it correctly

How to reproduce the bug?

  1. drag and drop the countdown block to canvas
  2. see the console

What is the expected behavior? should produce valid html even if there is js inside it so that it's good on storageManager.options.remote.onLoad() and Layer Manager (I think)

If is necessary to execute some code in order to reproduce the bug, paste it here below:

allowScripts: true,
options: {
                            remote: {
                                urlStore: `${baseUri}/storeBuilderHtmlData`,
                                onStore: (storeData, gEditor) => {
                                    return {
                                        pageId,
                                        'gjs-css': gEditor.getCss(),
                                        'gjs-html': gEditor.getHtml(),
                                    }
                                },
                                urlLoad: `${baseUri}/loadBuilderHtmlData?pageId=${pageId}`,
                                onLoad: async (result, gEditor) => {
                                    const { Parser } = gEditor;
                                    const gData = { ...result };

                                    if (!gData.pages) {
                                        gData.pages = [
                                            {
                                                component: Parser.parseHtml(gData.html)['html'],
                                            },
                                        ];
                                    }

                                    if (!gData.styles) {
                                        gData.styles = gData.css ? Parser.parseCss(gData.css) : undefined;
                                    }

                                    delete gData.css;
                                    delete gData.html;

                                    gData['assets'] = myImageAssets;

                                    return gData;
                                }
                            }
                        }

Code of Conduct

  • I agree to follow this project's Code of Conduct

Answers (2)

artfβ€’ February 7, 2023

The output is correct (check the real console not the broken one from jsfiddle) and read carefully this section, you should never rely on HTML/CSS to load back the project.

ClaudeCodeβ€’ May 17, 2026

Thanks for reporting this, @handhikadj.

Great suggestion about getHtml() producing invalid structure when there is js inside it! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior.

Using the event system:

editor.on('component:update', (component) => {
  // your logic here
});

Alternative approaches:

  • Listen to selector:add for CSS selector changes
  • Use selector:custom for custom rules
  • Tap into the change:* events for fine-grained tracking
  • Build a plugin that extends the editor with this capability

Making it official: If this feature would benefit many users, consider opening a formal Feature Request on the GrapesJS repo with:

  • A detailed use case
  • Code example showing the desired behavior
  • Why this matters for your workflow

The core team is receptive to well-motivated feature requests backed by real use cases.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

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.

All tutorials β†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.