Arrange tool windows

By default, tool windows are attached to the edges of the main window. You can detach them to use as separate windows, as described in Tool window view modes.

Move a tool window

Press and hold Alt, click the tool window button, and drag it on the tool window bar.
To drag tool windows without pressing Alt, open the Settings dialog (Ctrl+Alt+S), go to Appearance and Behavior | Appearance, and clear the Drag-and -drop with Alt pressed only checkbox in the UI Options area.
Alternatively, you can click the tool window options menu or right-click the tool window title bar and select where to attach the tool window under Move to.

Resize a tool window

Click and drag the border of a tool window.
To resize the active tool window, press Ctrl+Alt+Shift+Left, Ctrl+Alt+Shift+Right, Ctrl+Alt+Shift+Up, Ctrl+Alt+Shift+Down or use the main menu actions under Window | Active Tool Window | Resize.
To stretch the tool window to the maximum width or height, press Ctrl+Shift+Quote or select Window | Active Tool Window | Resize | Maximize Tool Window from the main menu.

Restore the default arrangement of tool windows

From the main menu, select Window | Restore Default Layout or press Shift+F12.

Save the arrangement of tool windows

From the main menu, select Window | Store Current Layout as Default.

Optimize for wide-screen monitors

WebStorm provides several options to optimize the positioning of tool windows on wide-screen monitors.

In the Settings dialog (Ctrl+Alt+S), select Appearance & Behavior | Appearance.
Under Tool Windows, configure the following:
- Widescreen tool window layout: Maximize the height of vertical tool windows by limiting the width of horizontal tool windows.
- Side-by-side layout on the left and Side-by-side layout on the right: Display vertical tool windows that are attached to the top and bottom edges in two columns instead of stacked on top of each other.
Click OK to apply the changes.

Move tool windows to a separate frame

You can freely drag tool window and editor tabs to a separate frame and arrange the layout you need. For example, you can have only editor on one screen and tools in a separate IDE window on the second screen.

Arrange tool windows in separate frame

Click and drag the tool window button on the tool window bar to a screen you need.
If you have the already detached tab in a separate frame, you can drag tool window buttons and attach them to the tool window bars.

Last modified: 28 December 2022