Build a responsive Editor layout

Responsive Editor layouts have three independent concerns: the document scale, the available toolbar width, and whether the document scrolls inside a fixed-height host. Configure each explicitly.

Build the shell

Request fullscreen on an element that contains the toolbar, the fullscreen button, and the Editor:

<div id="editor-shell">
  <div id="toolbar"></div>
  <button id="fullscreen" type="button">Fullscreen</button>
  <div id="editor"></div>
</div>

<script type="module" src="/src/main.ts"></script>

Fit to the container

Configure fit-to-width and container-aware chrome, then refit after the browser enters or exits fullscreen:

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const shell = document.querySelector<HTMLElement>('#editor-shell');
const fullscreen = document.querySelector<HTMLButtonElement>('#fullscreen');

if (!shell || !fullscreen) throw new Error('The responsive editor shell is incomplete.');

const superdoc = new SuperDoc({
  selector: '#editor',
  document: '/contract.docx',
  contained: true,
  zoom: {
    mode: 'fit-width',
    fitWidth: { min: 40, max: 100, padding: 24 },
  },
  ui: {
    toolbar: {
      container: '#toolbar',
      responsiveTo: 'container',
    },
    comments: { layout: 'auto' },
  },
});

const toggleFullscreen = async () => {
  if (document.fullscreenElement) await document.exitFullscreen();
  else await shell.requestFullscreen();
};
const refit = () => superdoc.setZoomMode('fit-width');

fullscreen.addEventListener('click', toggleFullscreen);
document.addEventListener('fullscreenchange', refit);

window.addEventListener('beforeunload', () => {
  fullscreen.removeEventListener('click', toggleFullscreen);
  document.removeEventListener('fullscreenchange', refit);
  superdoc.destroy();
});

zoom.mode: 'fit-width' continuously follows the available document width. The min, max, and padding values constrain that policy. Calling setZoom() switches to manual mode; call setZoomMode('fit-width') to resume automatic fitting.

responsiveTo: 'container' measures the toolbar mount instead of the browser window. Lower-priority controls move into the overflow menu when space becomes tight. comments.layout: 'auto' lets the review UI move between the sidebar and inline threads.

Auto layout measures the nearest Editor ancestor with a width and derives when to switch. Override that behavior only when another element defines the available space or your application needs a fixed breakpoint:

const config = {
  ui: {
    comments: {
      layout: 'auto',
      responsive: {
        target: '#editor-shell',
        breakpoint: 1200,
      },
    },
  },
};

target accepts a CSS selector or an HTMLElement. Below breakpoint, measured in CSS pixels, comments render inline.

Reflow document content

Fit-to-width preserves print pages and scales them. To remove visible page boundaries and rewrap DOCX content when the Editor container changes width, select web layout instead:

const superdoc = new SuperDoc({
  selector: '#editor',
  document: '/contract.docx',
  viewOptions: { layout: 'web' },
});

Web layout selects a retained semantic document surface; no layout-engine option is required. The browser owns normal-flow wrapping, so the document follows the Editor host's inner width without a page-layout pass.

The browser Editor's web layout does not show headers, footers, the ruler, or page-count updates. It updates changed semantic blocks in place rather than rendering page windows. Use print layout when page-specific presentation or page virtualization is required.

Set contained: true only when the host has a deliberate fixed height and should own an internal scroll region. Leave it off when the document should expand with the page. Avoid nesting the Editor inside another horizontal scroller.

The Fullscreen API is browser-owned, so the application must provide the button and handle rejected fullscreen requests where required by its product. The explicit fullscreenchange refit prevents the document from keeping dimensions calculated for the previous viewport.