How to create an infinite canvas in GrapesJS with a fixed 16:9 editable area?

[abhi1722]

I’m trying to implement an infinite (or large scrollable) canvas in GrapesJS, but I only want a specific portion (for example, a 16:9 area) to be the main editable and preview area — similar to how a video editor or design tool has a "safe area" for actual content, while the rest of the canvas acts as a rough workspace.

The goals are:

Allow users to scroll or pan around the canvas (like an infinite workspace).

Only a specific portion (e.g., 16:9 aspect ratio) should appear in the preview and exported view.

The rest of the canvas should be treated as a non-editable rough area or background workspace.

Context:

Framework: React + GrapesJS

Use case: Building a design editor where users can design within a fixed aspect ratio (16:9) while still having space around for notes, temporary elements, etc.