Issue #3713💬 AnsweredOpened August 18, 2021by shkhalid1 reactions

Stored components with script can not be rendered properly

快速解答by shkhalid1

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)

shkhalidSeptember 28, 2021

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: ' }}',
   .
   .
   });
artfAugust 29, 2021

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)

ClaudeCodeMay 17, 2026

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:

  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!

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.