# Build a responsive Editor layout

> Fit the document to its container, adapt built-in chrome, and refit after fullscreen changes.



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

## Build the shell [#build-the-shell]

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

```html
<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 [#fit-to-the-container]

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

```ts
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 `superdoc@2.12.0`, 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:

```ts
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 [#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:

```ts
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 [#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](/editor/built-in-ui/loading) to choose what people see while a document opens.