- Open the Web IDE
- Open a file
- Search open files
- View a list of modified files
- Restore uncommitted changes
- Upload a file
- Switch branches
- Create a branch
- Commit changes
- Create a merge request
- Use the command palette
- Edit settings
- Edit keyboard shortcuts
- Change the color theme
- View missed notifications
- Interactive web terminals
- Extension marketplace
- Related topics
- Troubleshooting
Web IDE
-
Introduced in GitLab 15.7 with a flag named
vscode_web_ide
. Disabled by default. - Enabled on GitLab.com in GitLab 15.7.
- Enabled on self-managed in GitLab 15.11.
The Web IDE is an advanced editor with commit staging. You can use the Web IDE to make changes to multiple files directly from the GitLab UI. For a more basic implementation, see Web Editor.
To pair the Web IDE with a remote development environment, see Remote development.
Support for improvements to Markdown preview when using GitLab Flavored Markdown in the Web IDE is proposed in issue 645.
Open the Web IDE
To open the Web IDE:
- On the left sidebar, select Search or go to and find your project.
- Use the . keyboard shortcut.
From a file or directory
To open the Web IDE from a file or directory:
- On the left sidebar, select Search or go to and find your project.
- Go to your file or directory.
- Select Edit > Open in Web IDE.
From a merge request
To open the Web IDE from a merge request:
- On the left sidebar, select Search or go to and find your project.
- Go to your merge request.
- In the upper right, select Code > Open in Web IDE.
The Web IDE opens new and modified files in separate tabs and displays changes side by side. To reduce load time, only 10 files with the most lines changed are opened automatically.
On the left Explorer sidebar, any new or modified file is indicated by the merge request icon () next to the filename. To view changes to a file, right-click the file and select Compare with merge request base.
Open a file
To open a file by name in the Web IDE:
- Press Command P.
- In the search box, enter the filename.
Search open files
To search across open files in the Web IDE:
- Press Shift Command F.
- In the search box, enter your search term.
View a list of modified files
To view a list of files you modified in the Web IDE:
- On the left activity bar, select Source Control, or press Control Shift G.
Your CHANGES
, STAGED CHANGES
, and MERGE CHANGES
are displayed.
For more information, see the VS Code documentation.
Restore uncommitted changes
You do not have to manually save any file you modify in the Web IDE. Modified files are automatically staged and can be committed. Uncommitted changes are saved in your browser’s local storage and persist even if you close the browser tab or refresh the Web IDE.
If your uncommitted changes are not available, you can restore the changes from local history. To restore uncommitted changes in the Web IDE:
- Press Shift Command P.
- In the search box, enter
Local History: Find Entry to Restore
. - Select the file that contains the uncommitted changes.
Upload a file
To upload a file in the Web IDE:
- On the left activity bar, select Explorer, or press Shift Command E.
-
Go to the directory where you want to upload the file. To create a new directory:
- On the left Explorer sidebar, in the upper right, select New Folder ().
- Right-click the directory and select Upload.
- Select the file you want to upload.
You can upload multiple files at once. The files are uploaded and automatically added to the repository.
Switch branches
The Web IDE uses the current branch by default. To switch branches in the Web IDE:
- On the bottom status bar, on the left, select the current branch name.
- Enter or select an existing branch.
Create a branch
To create a branch from the current branch in the Web IDE:
- On the bottom status bar, on the left, select the current branch name.
- From the dropdown list, select Create new branch.
- Enter the new branch name.
If you do not have write access to the repository, Create new branch is not visible.
Commit changes
To commit changes in the Web IDE:
- On the left activity bar, select Source Control, or press Control Shift G.
- Enter your commit message.
- Commit to the current branch or create a new branch.
Create a merge request
To create a merge request in the Web IDE:
- Commit the changes.
- In the notification that appears in the lower right, select Create MR.
For more information, see View missed notifications.
Use the command palette
You can use the command palette to access many commands. To open the command palette and run a command in the Web IDE:
- Press Shift Command P.
- Enter or select the command.
Edit settings
You can use the settings editor to view and modify your user and workspace settings. To open the settings editor in the Web IDE:
- On the top menu bar, select File > Preferences > Settings, or press Command ,.
In the settings editor, you can search for the settings you want to modify.
Edit keyboard shortcuts
You can use the keyboard shortcuts editor to view and modify the default keybindings for all available commands. To open the keyboard shortcuts editor in the Web IDE:
- On the top menu bar, select File > Preferences > Keyboard Shortcuts, or press Command K then Command S.
In the keyboard shortcuts editor, you can search for:
- The keybindings you want to change
- The commands you want to add or remove keybindings for
Keybindings are based on your keyboard layout. If you change your keyboard layout, existing keybindings are updated automatically.
Change the color theme
You can choose between different color themes for the Web IDE. The default theme is GitLab Dark.
To change the color theme in the Web IDE:
- On the top menu bar, select File > Preferences > Theme > Color Theme, or press Command K then Command T.
- From the dropdown list, preview the themes with the arrow keys.
- Select a theme.
The active color theme is stored in the user settings.
View missed notifications
When you perform actions in the Web IDE, notifications appear in the lower right. To view any notification you might have missed:
- On the bottom status bar, on the right, select the bell icon () for a list of notifications.
- Select the notification you want to view.
Interactive web terminals
When you set up a remote development server in the Web IDE, you can use interactive web terminals to:
- Access a remote shell on the server.
- Interact with the server’s file system and execute commands remotely.
You cannot use interactive web terminals to interact with a runner. However, you can use a terminal to install dependencies and compile and debug code.
For more information, see Remote development.
Extension marketplace
-
Introduced as a beta in GitLab 17.0 with flags named
web_ide_oauth
andweb_ide_extensions_marketplace
. Disabled by default.
Prerequisites:
- In user preferences, you must enable the extension marketplace.
- In group settings, users with the Owner role must enable the extension marketplace for enterprise users.
You can use the extension marketplace to download and run VS Code extensions in the Web IDE.
The extension marketplace is preconfigured at the GitLab instance level
and is hardcoded to https://open-vsx.org/
.
Epic 11770 proposes to change this behavior.
Install an extension
To install an extension in the Web IDE:
- On the top menu bar, select View > Extensions, or press Command Shift X.
- In the search box, enter the extension name.
- Select the extension you want to install.
- Select Install.
Uninstall an extension
To uninstall an extension in the Web IDE:
- On the top menu bar, select View > Extensions, or press Command Shift X.
- From the list of installed extensions, select the extension you want to uninstall.
- Select Uninstall.
Related topics
Troubleshooting
When working with the Web IDE, you might encounter the following issues.
Character offset when typing
When you type in the Web IDE, you might get a four-character offset. As a workaround:
- On the top menu bar, select File > Preferences > Settings, or press Command ,.
- In the upper-right corner, select Open Settings (JSON).
- In the
settings.json
file, add"editor.disableMonospaceOptimizations": true
or modify the"editor.fontFamily"
setting.
For more information, see VS Code issue 80170.
Report a problem
To report a problem, create a new issue with the following information:
- The error message
- The full error details
- How often the problem occurs
- Steps to reproduce the problem
If you’re on a paid tier, you can also contact Support for help.