Editor takes a long time to load (sometimes over 1 minute)
Thanks @MisterKeyboard for providing the JSON. Your project contains 10K style rules, which is a lot, but still, I'd not expect the load to be impacted that much. @mohamedsalem401 I think we need to verify if data source related changes (eg. StyleableModel.set) are not impacting too much there 🤔
Read full answer below ↓Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Firefox
Reproducible demo link
https://grapesjs.com/demo.html
Describe the bug
Description The editor has very slow loading times.
On complex pages (e.g. homepage with many elements and plugins such as carousels), it can take up to 1 minute 20 seconds to fully load.
But even on pages with only a few elements, the loading is still noticeably slow (several seconds).
This performance issue makes the editor difficult to use in production.
Steps to reproduce
-
Open the GrapesJS editor with a page that has multiple components and plugins (e.g. carousels).
-
Wait for the editor to load.
-
Test also with a simple page with only a few blocks.
Expected result
The editor should load within a few seconds, regardless of the page complexity.
Actual result
With complex pages: loading takes up to 1m20s.
With simple pages: still slow, not immediate.
Environment
GrapesJS version: 0.22.7
Backend: Symfony 7.3
Frontend: Angular 19
Browser: [e.g. Chrome 127, Firefox latest]
OS: [MacOS / Windows / Linux]
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (4)
Thanks @MisterKeyboard for providing the JSON.
Your project contains 10K style rules, which is a lot, but still, I'd not expect the load to be impacted that much.
@mohamedsalem401 I think we need to verify if data source related changes (eg. StyleableModel.set) are not impacting too much there 🤔
@artf Will take a look and give an update on this.
@MisterKeyboard can you share the JSON of the project so we can verify that
Thanks for reporting this, @MisterKeyboard.
The issue with Editor takes a long time to load (sometimes over 1 minute) appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.
What to try:
- Add a setTimeout wrapper to ensure the DOM has settled:
setTimeout(() => {
// your operation here
}, 0);
-
Check initialization order — make sure components are fully loaded before you interact with them
-
Use the editor's event system — listen to completion events:
editor.on('component:mount', (component) => {
// safe to interact with component here
});
Recommended next steps:
- Test with the latest GrapesJS version if you haven't
- Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
- Include GrapesJS version, browser, and console errors in your report
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4837
HTML elements ids are incremented on different pages loaded in projectData
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 109 Reproducible demo link https:/...
Issue #5003
slow absolute drag on Chrome
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 111 Reproducible demo link https://...
Issue #6211
Too much recursion
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 131.0.2 Reproducible demo link htt...
Issue #5556
Too many classes will cause the webpage to crash
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? latest version of Chrome Reproducible demo...
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
Big news from DevFuture — we just repriced everything
Hey GrapesJS community 👋 we just repriced all prices on plugins.
Tutorial
10 Mistakes When Building a Visual Editor (And How to Avoid Them)
Visual editors are powerful tools — they enable non-technical users to create websites, emails, landing pages, and applications without writing code
Tutorial
GrapesJS vs Webflow vs Tilda: What to Choose for Your Business in 2026
Choosing the right website platform in 2026 is no longer just about building a site
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.