IDE viewing modes

WebStorm lets you switch between several viewing modes for different usage styles and scenarios. For example, when you need to focus on the code or present to an audience.

Full Screen mode

WebStorm expands the main window to occupy the entire screen. On macOS, all operating system controls are hidden, but you can access the main menu if you hover over the top of the screen.

Distraction-free mode

The editor occupies the entire main window with the source code centered. All other elements of the UI are hidden (tool windows, toolbars, and editor tabs) to help you focus on the source code of the current file. You can still use shortcuts to open tool windows, navigate, and perform other actions.

Presentation mode

WebStorm expands the editor to occupy the entire screen and increases the font size to make it easier for your audience to see what you are doing. Other elements of the UI are hidden, but you can bring them up with corresponding shortcuts or using the main menu if you hover over the top of the screen.

Zen mode

WebStorm combines the Full Screen and Distraction-free modes, so the main window expands leaving only the editor with the source code for you to focus on programming.

Compact mode

If you work on a smaller screen, you can enable the compact mode. In this mode, the IDE has the reduced heights for toolbars and tool window headers, scaled-down spacings and paddings, and smaller icons and buttons.

By default, the editor text in the Distraction-free and Zen viewing modes is centered vertically and the text column width corresponds to the Hard wrap at option on the Editor | Code Style settings page  Ctrl+Alt+S. This means that if your code will be centered when formatted properly, but if there are long unwrapped lines, the text might go beyond the viewport while there is a large margin on the left. In such cases, you may want to decrease the left margin using the Left margin in distraction free mode option on the Advanced Settings settings page  Ctrl+Alt+S.