How to load grapesjs by default preview

Hi, @sridharK64 thank you for your report, can you elaborate on your issue, please? As we only have:

1. 'How to load grapesjs by default preview'
2. Your stack blitz

Could you tell us what you're trying to achieve?

@sridharK64 I got what you mean but the next time try to elaborate a bit better.

To trigger the preview on load, this would be enough

editor.onReady(() => {
   editor.runCommand('core:preview')
});

but in your example, you're using @grapesjs/react with full custom UI, which means you have to implement your own implementation of how to handle the preview with your react components.

Thanks for reporting this, @sridharK64.

Great question about How to load grapesjs by default preview. The recommended approach with GrapesJS is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. 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!