Full screen whiteboard with OneNote Online

GitHub release GitHub stars GitHub watchers

This is a minimal CSS hack that transforms OneNote Online into a full screen whiteboard with laser pointer. With the “Split Vertically” bookmarklet below, you may also present OneNote as two sliding whiteboards.

The intended use case is to run OneBoard in “Presentation mode”, while you write and annotate your page on another window or another device. See below for additional modes that let you work directly on the page but still maximise the content.

BEWARE: this is a hack that relies on ids and classes in the HTML delivered by Microsoft. Parts may break at any moment, although hopefully not very often.

Presentation mode, split vertically

Normal OneNote, with OneBoard disabled

Bugs and limitations

To report bugs or changes in behavior, request more servers, or suggest new functionality please file an issue or send a pull request.


Install the Stylus extension for your browser (Chrome, the new Edge, Firefox, or Opera), then open the stylesheet and click on “Install”. After installation, your OneNote pages will appear in presentation mode with no navigation panel and no scrollbars.

To have two side-by-side sliding whiteboards, drag the following link to your bookmark bar (the link is disabled when visiting the github repo – visit the OneBoard page to see the link)

Split Vertically

or create manually a bookmark called “Split Vertically” with the following URL:

javascript:(function(){var e=document,i=e.title;e.head.innerHTML=e.body.innerHTML="",e.title=i;var t=e.createElement("meta");"viewport",t.content="width=device-width, height=device-height, initial-scale=1",e.head.appendChild(t);var d=e.querySelector("html").style,a=e.body,;d.width=d.height=l.width=l.height="100%",l.margin=l.padding="0";var n=e.createElement("iframe");l.display="flex";var;n.src=window.location,r.flex="0 0 50%",r.border="none",r.boxSizing="border-box";var o=n.cloneNode();r.borderRight="solid 2px black","solid 2px black",a.appendChild(n),a.appendChild(o)})();

Clicking on the bookmark will split the page you are browsing into two vertical copies. You can inspect the source code of the above minified Javascript in SplitVertically.js.


After installation, your OneNote pages will appear in Presentation mode. If you want two whiteboards side-by-side, click on the “Split Vertically” bookmark after the notebook is open on the desired page.

To change mode, click on the Stylus button in your browser toolbar, open the OneBoard settings via the gear icon right of “iframe: OneBoard” and select a different mode.

Normal mode

Type mode

Draw mode

Draw mode, split vertically


There are four modes that hide different parts of the UI. Presentation mode (the default) changes the cursor into a laser pointer. Presentation and Draw modes hide as many text editing indicators as possible, including the insertion caret, text selections, spelling errors, and note container borders.

  Presentation Draw Type Normal
OneNote header Hidden Hidden Hidden Hidden
Menu bar Hidden Hidden Hidden  
Text editing Hidden Hidden    
Ribbon Hidden      
Laser pointer Yes No No No

Before activating Draw or Type mode, you should select the appropriate ribbon by switching to Normal mode first.

There are further options to control other elements of the UI.

Hide navigation panel (default: yes)
Permanently hide the left navigation panel. The panel can also be hidden manually via the "View" ribbon, but it reappears on window resize.
Hide scrollbars (default: yes)
Hide the scrollbars.
Laser pointer size (default: 16px)
Configure the laser pointer size. You may have to disable and reenable OneBoard for the option to take effect.
Prevent horizontal scrolling (default: no)
Prevent horizontal scrolling.
Warning. OneNote will scroll on its own when writing text near a border. This can easily happen by accident when clicking close to the border of the page, as it may create a note container that spans beyond the viewport. You may have trouble scrolling back when this option is enabled.


Distributed under the GPL3 license. Copyright © 2020-22 Vincenzo Mantova