Performance issue while dragging component to canvas when you have 2k component on canvas
but.... add 2000 dom elements with any basic styling to any page and you'll get lag? that might not be the tool, but how the tool is being used? also check your browser render speed in relation to your pc - http://speed-battle.com/speedtest_e.php https://www.webfx.com/web-development/learn/why-does-your-website-load-s...
Read full answer below ↓Question
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Google Chrome Version 101.0.4951.41 (Official Build) (64-bit)Reproducible demo link https://jsfiddle.net/Laze0pyg/Describe the bug How to reproduce the bug?Add 2k components using the below script.for(let i = 0;i<2000;i++) editor.addComponents('<div>ABC</div>');Try dragging Text Block on to the canvas. What is the expected behavior? There should be no lag. What is the current behavior? The green line placeholder is lagging JS Fiddle https://jsfiddle.net/Laze0pyg/ Demo https://user-images.githubuserc...
Answers (4)
but.... add 2000 dom elements with any basic styling to any page and you'll get lag? that might not be the tool, but how the tool is being used? also check your browser render speed in relation to your pc - http://speed-battle.com/speedtest_e.php https://www.webfx.com/web-development/learn/why-does...
With the latest release, containing the refactor of the Sorter by @mohamedsalem401, the previous demo seems to be working fine now 🥳
https://github.com/GrapesJS/grapesjs/assets/37307788/2d653d49-1a57-458c-bc8c-4833c8c7a690 I have the same problem, and I don't think it is due to the size, I am using the pageManager and I preload an html template and trying to drag new elements to the canvas it happens that the canvas only inserts...
Thanks for reporting this, @mohdSuhailCoditation. Great question about Performance issue while dragging component to canvas when you have 2k component on canvas. The recommended approach with Canvas is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific modul...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4612
Cannot Drop MJML Components onto Blank Canvas after version 0.19.4
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? 105.0.5195.125 (Official Build) (x86_64) R...
Issue #5990
When you delete a component, duplicate classes between components will be deleted.
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 126.0.6478.127(Windows) Reproducibl...
Issue #5086
Style:property:update and Property onChange trigger excessively
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 112.0.5615.137 (Official Bu...
Issue #3861
JS error when press "s" or "w" key - Cannot read properties of undefined (reading 'indexOf')
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 94.0.4606.81 (Official Buil...
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
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.