Recipe: Full-page scrolling for long HTML content

[sherdent]

When loading long HTML pages into GrapesJS (e.g. marketing pages with multiple sections), content below the viewport height gets clipped and the canvas doesn't scroll to show it. This is a common issue (referenced in #2201, #2522) and the fix requires a combination of config options that aren't obvious from the docs.

Here's the working recipe:

1. Use protectedCss and frameStyle to override wrapper/body height inside the canvas iframe

const editor = grapesjs.init({
  container: '#gjs',
  protectedCss: '* { box-sizing: border-box; } body { margin: 0; height: auto !important; overflow: auto !important; } #wrapper { min-height: 100% !important; height: auto !important; overflow: visible !important; }',
  canvas: {
    frameStyle: 'body { height: auto !important; } #wrapper { min-height: 100% !important; height: auto !important; }'
  },
});

2. Add CSS to your editor page to enable scrolling on the outer frames container

.gjs-cv-canvas__frames {
  overflow: auto !important;
}

3. Strip <body> tags when saving with editor.getHtml()

editor.getHtml() wraps the output in <body> tags. If you save this and reload it, you get nested <body> tags which break rendering silently:

// Before saving
content = content.replace(/<\/?body[^>]*>/gi, '').trim();

Why all three are needed

• protectedCss fixes the iframe internals (wrapper height: 100% → auto)
• frameStyle provides a second layer of override for the iframe
• The outer .gjs-cv-canvas__frames overflow enables the scroll container around the iframe
• Without all three, content below the fold is clipped with no scrollbar

Root cause

GrapesJS's canvas iframe and its #wrapper element default to height: 100% of the viewport, not height: auto. Content taller than the viewport is rendered but invisible. The maintainer noted in #2201 that changing the default overflow could cause unexpected behaviours with drag-and-drop, so this is left to implementers to configure.

Tested with GrapesJS 0.21.13 loading 8,000+ character HTML pages with multiple sections.

Hope this helps others who hit the same issue.