> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nmbr.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Fullscreen

> Expand the Nmbr Component to fill the browser viewport.

The Nmbr Component renders inside a container element you control, and its iframe sizes itself to 100% of that container. Fullscreen is therefore handled on your side: expand the container and the component grows to match. No additional configuration is required from Nmbr.

## Using a CSS overlay

The simplest approach is a fixed-position overlay. Add a class that pins the container to every edge of the viewport, then toggle it on demand.

```css theme={null}
#nmbr-container.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
```

```javascript theme={null}
const container = document.querySelector('#nmbr-container');
const fullscreenButton = document.querySelector('#fullscreen-button');

fullscreenButton.addEventListener('click', () => {
  container.classList.toggle('fullscreen');
});
```

Because the overlay covers your own application chrome (including the button that toggled it), render an exit control that stays visible in fullscreen. Position it above the overlay, and toggle its visibility together with the overlay:

```css theme={null}
#exit-fullscreen {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10000;
}
```

```javascript theme={null}
const container = document.querySelector('#nmbr-container');
const fullscreenButton = document.querySelector('#fullscreen-button');
const exitButton = document.querySelector('#exit-fullscreen');

function setFullscreen(on) {
  container.classList.toggle('fullscreen', on);
  exitButton.hidden = !on;
}

fullscreenButton.addEventListener('click', () => {
  setFullscreen(!container.classList.contains('fullscreen'));
});

exitButton.addEventListener('click', () => setFullscreen(false));
```

<Warning>
  Don't rely on the Escape key as the only way out. Once the user interacts with
  the component, keyboard focus moves into its iframe and key events no longer
  reach your page, so an `Escape` listener on the host document stops firing. A
  visible exit control always works because it lives in your page, above the
  overlay. You can still add `Escape` as a convenience:
</Warning>

```javascript theme={null}
document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    setFullscreen(false);
  }
});
```

<Note>
  The component renders its modals and notifications at a very high stacking
  order, so keep your overlay and its exit control below them. The values shown
  above are safe; a much larger `z-index` can cause the component's own dialogs
  to appear behind your overlay.
</Note>

## Native Fullscreen API

For true, OS-level fullscreen that also hides the browser's own chrome, call the [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) on the container instead:

```javascript theme={null}
const container = document.querySelector('#nmbr-container');

// Must be triggered by a user gesture, such as a click
container.requestFullscreen();

// Exit fullscreen
document.exitFullscreen();
```

The CSS overlay is recommended for most integrations: it keeps the browser chrome visible, does not require a user gesture, and gives you full control over the transition.