Build a responsive Editor layout

Fit the document to the available width while keeping the toolbar and fullscreen button in view.

Build the shell

This standalone Vanilla example uses public/sample.docx from the Quickstart. Replace the body of index.html with this fixed-height shell. The Editor scrolls inside it; the controls stay above it:

<div id="editor-shell">
  <div id="toolbar"></div>
  <button id="fullscreen" type="button" disabled>Fullscreen</button>
  <p id="layout-status" role="status">Opening document…</p>
  <div id="editor"></div>
</div>

<style>
  #editor-shell { display: flex; flex-direction: column; height: 80vh; min-width: 0; }
  #editor-shell:fullscreen { height: 100vh; background: white; }
  #toolbar, #fullscreen, #layout-status { flex: none; }
  #fullscreen { align-self: flex-start; }
  #editor { flex: 1; min-height: 0; min-width: 0; }
</style>

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

Fit to the container

Replace src/main.ts to fit the document to its container and refit after fullscreen changes:

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

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

if (!shell || !fullscreen || !status) throw new Error('The responsive editor shell is incomplete.');
let ready = false;

const showError = ({ error }: { error: unknown }) => {
  console.error('Could not open the document.', error);
  status.textContent = 'Could not open the document. Reload to retry.';
};

const superdoc = new SuperDoc({
  selector: '#editor',
  document: '/sample.docx',
  contained: true,
  onContentError: showError,
  onException: showError,
  onReady: () => {
    ready = true;
    fullscreen.disabled = !document.fullscreenEnabled;
    status.textContent = document.fullscreenEnabled ? '' : 'Fullscreen is unavailable in this browser.';
  },
  zoom: {
    mode: 'fit-width',
    fitWidth: { min: 40, max: 100, padding: 24 },
  },
  ui: {
    toolbar: {
      container: '#toolbar',
      responsiveTo: 'container',
    },
    comments: { layout: 'auto' },
  },
});

const toggleFullscreen = async () => {
  try {
    if (document.fullscreenElement) await document.exitFullscreen();
    else await shell.requestFullscreen();
    status.textContent = '';
  } catch (error) {
    console.error('Could not change fullscreen mode.', error);
    status.textContent = 'Could not change fullscreen mode. You can keep editing here.';
  }
};
const refit = () => {
  fullscreen.textContent = document.fullscreenElement === shell ? 'Exit fullscreen' : 'Fullscreen';
  if (ready) 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.

In [email protected], automatic fitting can shrink a DOCX to the minimum zoom instead of filling its container. If you encounter this, use manual zoom (zoom: { mode: 'manual' }) and let readers adjust it. Remove the setZoomMode('fit-width') call from refit() too. Manual zoom does not refit when the container changes size.

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 viewOptions = { layout: 'web' } as const;

Define this before the constructor and add viewOptions to its configuration, then narrow the window. Text wraps to the host width instead of shrinking the printed page. No layout-engine option is required.

Web layout does not show headers, footers, the ruler, or page-count updates. Keep print layout when those matter.

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.

Check the layout

Narrow the window: print pages should shrink, toolbar controls should move into overflow, and the fullscreen button should stay visible as you scroll. Enter and exit fullscreen to check that the document fits again. If the browser rejects the request, the status explains the failure without blocking editing.

Continue with Loading UI to choose what people see while a document opens.

Build the shell

Fit to the container

Reflow document content

Check the layout

On this page