Device width is invalid by default

Yeah, you're right, actually, there is no option to select the default device... For now, as a workaround, do it manually after init:

const editor = grapesjs.init({...});
editor.setDevice('Mobile');

And as you're using the mobile-first approach, you would need to fix your Desktop device:

{
  name: 'Desktop',
  width: '', // default size
  widthMedia: '376px', // Tells the editor which media to apply for bigger screens
}

In the next release, I'll add the default option in the device manager configuration

deviceManager: {
          // The device `id` to select on start, if not indicated, the first available from `devices` will be used.
          default: 'Mobile',
          devices: [...],
},

Thanks for reporting this, @imouou.

The issue with Device width is invalid by default 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:

1. Add a setTimeout wrapper to ensure the DOM has settled:

setTimeout(() => {
  // your operation here
}, 0);

2. Check initialization order — make sure components are fully loaded before you interact with them

3. 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