Stored components with script can not be rendered properly
Thanks @artf! Finally i was able to figure it out The problems was in tagVarStart and tagVarEnd. After commenting it out it starts working
Read full answer below ↓Question
I am facing some problem when try to save some components which includes some scripts and reload the page the components are not rendered properly. It's showing empty boxes.
Example: When i try to save a chart component from jvas28/grapesjs-echarts and reload the page i am getting this
<img width="1438" alt="Screen Shot 2021-08-18 at 4 20 43 PM" src="https://user-images.githubusercontent.com/8138036/129891078-2191094d-d735-4178-9859-588f774120b6.png">
Here is the example app https://codesandbox.io/s/cranky-wescoff-93pxd?file=/src/App.js
storageManager: {
autoSave: 1,
autoload: 1,
type: "local"
}
I also tried to setup remote storage. But I get the same result. Here is the api output. <img width="1291" alt="Screen Shot 2021-08-18 at 4 35 53 PM" src="https://user-images.githubusercontent.com/8138036/129891362-534bab14-f1c6-4c58-b061-a895df35921c.png">
I think this is related to https://github.com/artf/grapesjs/issues/1487 https://github.com/artf/grapesjs/issues/2069 https://github.com/artf/grapesjs/issues/3535 https://github.com/artf/grapesjs/issues/3141
Answers (3)
Thanks @artf!
Finally i was able to figure it out
The problems was in tagVarStart and tagVarEnd. After commenting it out it starts working
return grapesjs.init({
// tagVarStart: '{{ ',
// tagVarEnd: ' }}',
.
.
});
Hey @shkhalid thanks for the report, but on this repository, you should open reproducible issues without external plugins as it might be an issue with the plugin itself. At least for what I can tell about the core, I see no issues in Components with JS (if correctly implemented by following this guide)
Thanks for reporting this, @shkhalid.
Great question about Stored components with script can not be rendered properly. The recommended approach with Components 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 #3316
The editor does not remove the dead script blocks
Version: 0.16.34 Are you able to reproduce the bug from the demo? [ ] Yes [x ] No As I understand the code import dialog skips all the HTML...
Issue #3631
How to load dynamic content in the final HTML file?
I looked everywhere, including the issues section and tried a few things. But really unsure how to load dynamic content in my components al...
Issue #3363
Set content function empties the component content
I am trying to use the set function to change the content of a component, but actually the result is an empty component with nothing inside...
Issue #3140
Interactive component in canvas
I am building a quiz builder plugin using grapesjs. I was wondering if we can add a component which is interactive and adds new components...
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 →Related tutorials
In-depth guides on the same topic.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS vs Webflow vs Builder.io vs Puck: Which Visual Builder to Choose in 2026
A practitioner's 2026 comparison of GrapesJS, Webflow, Builder.io, and Puck — pricing, AI features, lock-in, and a one-line rule for picking the right one
Tutorial
GrapesJS vs Webflow vs Tilda (2026): Honest Comparison, Pricing & Which to Pick
GrapesJS vs Webflow vs Tilda compared head-to-head: real 2026 pricing, SEO features, code export, and which one actually fits your project
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.