Loading initial project data from a designer-mode project results in wrong canvas size
I can kinda force it to the correct canvas size by:Not providing projectData in the initial config, Loading the projectData via editor.loadProjectData(...) after initialization and Then running editor.Canvas.getModel().updateDevice(); though it animates from the full width back to device size. It seems that loading th...
Read full answer below βQuestion
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v103 Reproducible demo link https://codesandbox.io/s/laughing-austin-k12mc3?file=/index.js Describe the bug If you view the linked CodeSandbox and find the commented out line providing the projectData to the editor, you will see that the canvas gets resized away from the size specified by the device. In a debugger, it seems that updateDim is called multiple times at initialization: the first time with the correct device size and then again with empty width and height which then leads to the...
Answers (4)
I can kinda force it to the correct canvas size by:Not providing projectData in the initial config, Loading the projectData via editor.loadProjectData(...) after initialization and Then running editor.Canvas.getModel().updateDevice(); though it animates from the full width back to device size. It s...
Thanks @contentfree I'll try to fix that for the next release
Thanks @artf. I'll keep my eye open for the next release (looks like your kanban board is empty now β¦ so should be imminent?)
Thanks for reporting this, @contentfree. The issue with Loading initial project data from a designer-mode project results in wrong canvas size appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, cre...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3806
Target :null when adding video
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome new version Reproducible demo link...
Issue #6549
Couldnt Resize image
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://code...
Issue #4497
Updating to GrapesJS v19.5 from v18.4 results in Chrome becoming unresponsive
GrapesJS version[x] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 104.0.5112.79Reproducible demo link h...
Issue #4940
Destroying and re-initializing produces "Cannot read properties of undefined (reading 'get')"
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Google Chrome Version 110.0.5481.100 (Offi...
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 integrate GrapesJS into an Astro app (complete guide 2026)
Embed GrapesJS in an Astro site: mount it in a client-side script, save content to an Astro API endpoint, and export clean HTML/CSS.
Tutorial
GrapesJS custom components guide (2026)
Define custom GrapesJS components with DomComponents.addType: detection with isComponent, a model with traits and defaults, and a view for canvas behavior.
Tutorial
How to integrate GrapesJS into a Django app (complete guide 2026)
Embed GrapesJS in a Django project: render the editor in a template, persist content to a view with CSRF, store the project JSON, and export HTML/CSS.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.