Updating to GrapesJS v19.5 from v18.4 results in Chrome becoming unresponsive
A reproduce on Fiddle (with vue) I can not reproduce without vue jsfiddle Steps to reproduce the issue:Add a text componentSelect the text component then click the 'Convert to Conditional' button at the bottomHover over the conditional text component, and then it freezes. Seems something just trigger onHover forever
Read full answer below βQuestion
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Chrome 104.0.5112.79
Reproducible demo link
https://jsfiddle.net/gvrnw2c3/4/
Describe the bug
How to reproduce the bug?
I'm currently unable to reproduce the bug using jsfiddle, which leads me to believe it's a problem with Chrome, but I'll continue trying to reproduce this.
Within my project as shown in the video:
- Click on a 'conditional-text' component (custom component type I've added)
- Click on 'Open Conditionals' button then within the dialog that appears on the screen, click 'Apply'
- Hover the cursor over the 'conditional-text' component
In JSFiddle (currently doesn't crash but I will continue to test):
- Click on the 'Hello World' text component
- Click on the 'Convert to Conditional' button at the bottom of the page
- Click on the newly created 'conditional-text' component (with the text "Open conditionals to choose text")
- Click on the 'Change Conditional' button at the bottom of the page
- Move the cursor over the 'conditional-text' component (currently doesn't crash but I will continue to test)
What is the expected behavior?
The app should continue running as normal (works fine in GrapesJS v18.4)
What is the current behavior?
The whole screen crashes as soon as the cursor is over the 'conditional-text' component and after around 5 seconds the following appears:
<img width="455" alt="Screenshot 2022-08-03 at 18 15 14" src="https://user-images.githubusercontent.com/67364267/182594957-2cc8e70b-42c4-452e-b29e-b02d77e9821c.png">Here is the screen capture of the issue:
After some (unsuccessful) debugging, I also found the following:
The commented out lines in the following methods (which are triggered upon clicking the 'Apply' button as seen in the video) seemed to be responsible for the crash. It's worth mentioning that all of these lines, when not commented out, affect the appearance of the component in the canvas (i.e. they change the visible text), so perhaps it's something to do with the view of the component being rendered. The other lines below do not result in the crash :
applyIfCondition(conditionCode, conditionObjects) {
const selectedComponent = this.editor.getSelected()
if (selectedComponent.isInstanceOf("conditional-text")) {
console.log(conditionCode, ...conditionObjects)
selectedComponent.addAttributes({ liquidtag: "if" })
// selectedComponent.components(conditionCode)
selectedComponent.set("conditionObjects", conditionObjects)
selectedComponent.set("isNew", false)
// selectedComponent.getView().render()
}
},
selectIfCondition(displayText, selectedIndex) {
const selectedComponent = this.editor.getSelected()
if (selectedComponent.isInstanceOf("conditional-text")) {
console.log(displayText, selectedIndex)
// selectedComponent.set("displayedText", displayText)
selectedComponent.set("selectedConditionIndex", selectedIndex)
// selectedComponent.getView().render()
}
},
So it's the following lines that seem to cause the crash, from what I can tell so far - if I uncomment any of these lines from the methods, the text inside the component changes upon clicking apply and the crash happens when hovering over the component :
selectedComponent.components(conditionCode)
selectedComponent.getView().render()
selectedComponent.set("displayedText", displayText)
selectedComponent.getView().render()
N.B. The custom 'conditional-text' component in my project is the same as in the jsfiddle - I have tried to reproduce the error by simplifying the rest of the code (I didn't want to copy over all of the logic from my project), but the code that matters is still being executed.
Please let me know if you require any further information.
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (4)
A reproduce on Fiddle (with vue) I can not reproduce without vue jsfiddle
Steps to reproduce the issue:
- Add a text component
- Select the text component then click the 'Convert to Conditional' button at the bottom
- Hover over the conditional text component, and then it freezes.
Seems something just trigger onHover forever

Thanks guys, I was actually able to reproduce it by wrapping the example inside Vue but I'm not sure exactly why is stuck in the loop here.
At first look, it seems to be related to Vue's Proxy observers. By comparing the demo with the previous grapesjs version it looks like not all parts are transformed in Proxies and that prevents it from being stuck.
As a quick workaround here would be to put the editor outside of Vue to prevent transforming all objects into proxies.
let editor;
Vue.createApp({
mounted() {
editor = grapesjs.init({ ... });
// ...
},
// ..
}).mount('#app')
Thanks @artf, all working perfectly now upon declaring the editor outside of the Vue instance.
Thanks for reporting this, @benryanwilliams.
Great question about Updating to GrapesJS v19.5 from v18.4 results in Chrome becoming unresponsive. The recommended approach with Canvas 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 #6409
Cannot drag to move components on mobile
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v133 Reproducible demo link https:/...
Issue #5245
Contents of component with editable:false are still editable
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 114.0.5735.198 Reproducible demo li...
Issue #5633
Cannot select component in ``component:remove`` handler
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 120.0.6099.225 Reproducible...
Issue #5141
component resets attribute values on updating traits ( first time only )
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 113.0.5672.63 Reproducible...
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
Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live
We're shipping a set of discovery upgrades. New label filters, a proper compatibility switch for GrapesJS vs Studio, one-click and a smarter sort bar.
Tutorial
GJS Market 2.0 - Donations, Tracking, Labels and Better Product Discovery
Weβve rolled out a new set of GrapesJS marketplace updates across GJS Market, focused on improving how creators distribute products
Tutorial
Preset DevFuture 2.0 β New Update Released
Preset continues evolving as a clean, production-ready starting point for building visual editors powered by GrapesJS
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.