WebStorm 2024.3 Help

New UI

The new user interface (UI) is a redesigned look of WebStorm and other JetBrains IDEs. It has been created to simplify the design and make essential features more accessible – resulting in a cleaner and more modern look and feel.

In this article, you’ll learn about the key changes in the new UI and how to get started with it.

New  UI
Classic UI

Key changes

Themes

We’ve introduced three new themes in this UI – Light, Dark, and Light with Light Header. All of them have been designed to provide improved contrast and a consistent color palette.

Light theme in the new UI
Light with Light Header theme in the new UI
Dark theme in the new UI

You can switch to another theme in Settings | Appearance & Behavior | Appearance. Please note that not all custom themes are fully supported yet.

Fonts

The Inter font is now used for the UI elements. Previously, the default OS fonts from each platform were used, and they were rendered differently.

If you would like to change the UI font, go to Settings | Appearance & Behavior | Appearance, select the Use custom font checkbox, and choose your preferred font.

Icons and compact mode

Our new icon set features distinct shapes and colors to enhance legibility. If you work on a smaller screen, you can enable Compact Mode from View | Appearance | Compact Mode in the main menu. This will reduce the heights of toolbars and tool window headers, scale down the spacings and paddings, and provide smaller icons and buttons.

New UI: Compact mode on
New UI: Compact mode off

Main window header

We’ve simplified the main window header. It provides access to essential actions through icons and widgets. The main window header is also customizable, allowing you to add more actions to the toolbar such as Git push. To do this, right-click an icon or a widget, select Customize Toolbar from its context menu, and then add the preferred actions in the Customize Main Toolbar dialog that opens.

Window header

1. Main menu (Windows and Linux only)

The main menu is located under the hamburger icon. To open it, press Alt+\.

You can return the standard menu bar. To do that, go to Settings | Appearance & Behavior | New UI and enable the Show main menu in separate toolbar option.

2: Project widget

The project widget shows the current project's name and lets you switch between recent projects, create new projects, and open the existing ones.

3: VCS widget

The VCS widget shows the current branch, allows switching branches, and provides access to essential VCS actions like update, commit, and push changes.

It replaces the old branch widget previously located in the status bar at the bottom of the main window, and the VCS actions icons previously located in the navigation bar in the upper right corner.

4: Run widget

This widget allows you to run and debug your application using a run/debug configuration. You can select the configuration you want to run, change the mode for it (run or debug) as well as edit, pin, or delete configurations.

Run widget actions

While giving access to more features right from the main toolbar, new window header widgets hide actions in drop-down menus to simplify the layout.

New UI: header widgets

Quickly add actions to the toolbar

If you miss an action on the main toolbar, you can add it from the list of popular actions.

  • Right-click the toolbar, point to Add to Main Toolbar, and select the action that you want to add from the list.

    If the action that you want to add is not on the list of popular actions, use the Customize Main Toolbar dialog.

    Adding actions to the main toolbar

The selected action appears on the toolbar. You can remove it or change its icon using the Customize Main Toolbar dialog.

Tool windows

The tool windows have a new layout and behavior:

  • The tool window bars have big icons for easier visual navigation and a cleaner look. You can opt for smaller icons in the compact mode.

    To see a tool window name, hover over its icon for a tooltip.

    Tool window icon tooltips
  • If you always want to see the tool window names, right-click a tool window bar and select Show Tool Window Names.

    Tool window names enabled
  • Tool window icons located at the top left and top right of the border will open vertical windows on the left and right sides accordingly.

    Tool window icons located at the bottom left and bottom right of the border will open horizontal tool windows at the bottom of WebStorm.

    Tool windows and tool window icons
  • Use the vertical and horizontal split to arrange tool windows: drag a tool window icon along the sidebar and drop it under the separator for the vertical split or on the other sidebar for a horizontal split.

    Vertical split
    Horizontal split
  • Tool windows that are not present in any of the tool window stripes can be found under the More tool windows button. When a tool window is opened from More tool windows, a bar with its icon will be added at its default location.

    Move and hide tool windows

Navigation bar

The navigation bar is now located in the status bar at the bottom of the main window.

Navigation bar

If you prefer the former location, you can move it back to the top or turn it off completely. To do so, go to the main menu and select View | Appearance | Navigation Bar.

Editor tabs

Working with multiple editor tabs is now more convenient. If tabs don’t fit the screen, you can choose between using a scroll bar or squeezing the tabs to place all of them on the screen. Open the Settings dialog (Ctrl+Alt+S) , go to Editor | General | Editor Tabs, and select the required option.

Scroll tabs
Squeeze tabs
Multiple rows

Gutter

  • Breakpoints are now placed over line numbers by default to save horizontal space. You can place breakpoints near line numbers: press Ctrl+Shift+A, type Breakpoints Over Line Numbers, and disable the option.

    Breakpoints Over Line Numbers on
    Breakpoints Over Line Numbers off
  • Folding icons have been updated. Icons for unfolded areas show up on hover for a less cluttered look.

    You can configure the IDE to always display folding icons: go to Settings | Editor | General | Code Folding and select Always next to Show code folding arrows.

    Folding icons in the gutter appear on hover
  • Annotations (Git Blame) have an updated color palette to help you see the recent changes faster.

    Gutter: Git annotations
Last modified: 11 October 2024