# Customizing the presentation mode in our JavaScript viewer

You can implement the presentation mode as shown in our web demo by writing some custom code.

[Try for Free](https://www.nutrient.io/sdk/web/getting-started.md)

[Launch Demo](https://www.nutrient.io/demo/presentation-mode)

Make the following customizations in Nutrient Web SDK:

- Disable continuous scroll and default to single-page mode.

- Move the main toolbar to bottom.

- Hide the toolbar items that aren’t needed.

- Add a custom toolbar item that can be used to toggle the fullscreen view.

```js

let _instance = null;

const initialViewState = new NutrientViewer.ViewState({
	scrollMode: NutrientViewer.ScrollMode.PER_SPREAD,
	layoutMode: NutrientViewer.LayoutMode.SINGLE,
});

let fullscreenElement =
	typeof defaultConfiguration.container === 'string'? document.querySelector(defaultConfiguration.container).parentNode
		: defaultConfiguration.container.parentNode;

registerFullscreenChangeEvents();

const toolbarItems = [
	{ type: 'pager' },
	{ type: 'spacer' },
	{ type: 'sidebar-thumbnails' },
	{ type: 'search' },
	{ type: 'highlighter' },
];

// A custom toolbar item to toggle fullscreen mode.
const fullScreenToolbarItem = {
	type: 'custom',
	title: 'Toggle full screen mode',
	onPress: () => {
		// You can implement the fullscreen mode on your own. Either see our
		// functions below for information on how to activate it, or look at our guides:
		// https://www.nutrient.io/guides/web/features/fullscreen-mode/
		if (isFullscreenEnabled()) {
			exitFullscreen();
		} else {
			requestFullScreen(fullscreenElement);
		}
	},
};

if (isFullScreenSupported()) {
	toolbarItems.push(fullScreenToolbarItem);
}

return NutrientViewer.load({...defaultConfiguration,
	toolbarItems,
	toolbarPlacement: NutrientViewer.ToolbarPlacement.BOTTOM,
	initialViewState,
}).then((instance) => {
	_instance = instance;
});

function onFullScreenChange() {
	_instance.setViewState(
		_instance.viewState.set('showToolbar',!isFullscreenEnabled()),
	);
}

function registerFullscreenChangeEvents() {
	document.addEventListener('fullscreenchange', onFullScreenChange);
	document.addEventListener('webkitfullscreenchange', onFullScreenChange);
	document.addEventListener('mozfullscreenchange', onFullScreenChange);
	document.addEventListener('MSFullscreenChange', onFullScreenChange);
}

function isFullscreenEnabled() {
	return (
		document.fullscreenElement ||
		document.mozFullScreenElement ||
		document.webkitFullscreenElement ||
		document.msFullscreenElement
	);
}

function isFullScreenSupported() {
	return (
		document.fullscreenEnabled ||
		document.mozFullScreenEnabled ||
		document.msFullScreenEnabled ||
		document.webkitFullscreenEnabled
	);
}

function requestFullScreen(element) {
	if (element.requestFullscreen) {
		element.requestFullscreen();
	} else if (element.mozRequestFullScreen) {
		element.mozRequestFullScreen();
	} else if (element.webkitRequestFullscreen) {
		element.webkitRequestFullscreen();
	} else if (element.msRequestFullscreen) {
		element.msRequestFullscreen();
	}
}

function exitFullscreen() {
	if (document.webkitExitFullscreen) {
		document.webkitExitFullscreen();
	} else if (document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
	} else if (document.msExitFullscreen) {
		document.msExitFullscreen();
	} else if (document.exitFullscreen) {
		document.exitFullscreen();
	}
}

```

Don’t forget to remove the listeners on unmount.

---

## Related pages

- [Fullscreen mode in our JavaScript PDF viewer](/guides/web/features/fullscreen-mode.md)
- [Magazine viewer using JavaScript](/guides/web/viewer/viewing-options/magazine-viewer.md)