Web IDE

DETAILS: Tier: Free, Premium, Ultimate Offering: GitLab.com, Self-managed, GitLab Dedicated

• 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.

FLAG: The availability of this feature is controlled by a feature flag. For more information, see the history.

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.

Support for GitLab Flavored Markdown preview in the Web IDE is proposed in issue 645.

Open the Web IDE

To open the Web IDE:

1. On the left sidebar, select Search or go to and find your project.
2. Use the . keyboard shortcut.

From a file or directory

To open the Web IDE from a file or directory:

1. On the left sidebar, select Search or go to and find your project.
2. Go to your file or directory.
3. Select Edit > Open in Web IDE.

From a merge request

To open the Web IDE from a merge request:

1. On the left sidebar, select Search or go to and find your project.
2. Go to your merge request.
3. 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 ({merge-request}) 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:

1. Press Command+P.
2. In the search box, enter the filename.

Search open files

To search across open files in the Web IDE:

1. Press Shift+Command+F.
2. 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:

1. Press Shift+Command+P.
2. In the search box, enter Local History: Find Entry to Restore.
3. Select the file that contains the uncommitted changes.

Upload a file

To upload a file in the Web IDE:

1. On the left activity bar, select Explorer, or press Shift+Command+E.

2. 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 ({folder-new}).

3. Right-click the directory and select Upload.

4. 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:

1. On the bottom status bar, on the left, select the current branch name.
2. Enter or select an existing branch.

Create a branch

To create a branch from the current branch in the Web IDE:

1. On the bottom status bar, on the left, select the current branch name.
2. From the dropdown list, select Create new branch.
3. 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:

1. On the left activity bar, select Source Control, or press Control+Shift+G.
2. Enter your commit message.
3. Commit to the current branch or create a new branch.

Create a merge request

To create a merge request in the Web IDE:

1. Commit the changes.
2. 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:

1. Press Shift+Command+P.
2. 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:

1. On the top menu bar, select File > Preferences > Theme > Color Theme, or press Command+K then Command+T.
2. From the dropdown list, preview the themes with the arrow keys.
3. Select a theme.

The active color theme is stored in the user settings.

Configure sync settings

To configure sync settings in the Web IDE:

1. Press Shift+Command+P.
2. In the search box, enter Settings Sync: Configure.
3. Select or clear the checkbox for:
   • Settings
   • Keyboard shortcuts
   • User snippets
   • User tasks
   • UI state
   • Extensions
   • Profiles

These settings are synced automatically across multiple Web IDE instances. You cannot sync user profiles or go back to an earlier version of synced 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:

1. On the bottom status bar, on the right, select the bell icon ({notifications}) for a list of notifications.
2. Select the notification you want to view.

Extension marketplace

DETAILS: Offering: GitLab.com

• Introduced as a beta in GitLab 17.0 with flags named web_ide_oauth and web_ide_extensions_marketplace. Disabled by default.
• Feature flag web_ide_oauth enabled on GitLab.com, self-managed, and GitLab Dedicated and feature flag web_ide_extensions_marketplace enabled on GitLab.com in GitLab 17.4.
• Feature flag web_ide_oauth removed in GitLab 17.5.

FLAG: The availability of this feature is controlled by a feature flag. For more information, see the history.

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:

1. On the top menu bar, select View > Extensions, or press Command+Shift+X.
2. In the search box, enter the extension name.
3. Select the extension you want to install.
4. Select Install.

Uninstall an extension

To uninstall an extension in the Web IDE:

1. On the top menu bar, select View > Extensions, or press Command+Shift+X.
2. From the list of installed extensions, select the extension you want to uninstall.
3. Select Uninstall.

Related topics

• GitLab Duo Chat in the Web IDE

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:

1. On the top menu bar, select File > Preferences > Settings, or press Command+,.
2. In the upper-right corner, select Open Settings (JSON).
3. In the settings.json file, add "editor.disableMonospaceOptimizations": true or modify the "editor.fontFamily" setting.

For more information, see VS Code issue 80170.

Update the OAuth callback URL

DETAILS: Offering: Self-managed

Prerequisites:

• You must have administrator access to the instance.

The Web IDE uses an instance-wide OAuth application for authentication. If the OAuth callback URL is misconfigured, you might encounter a Cannot open Web IDE error page with the following message:

The URL you're using to access the Web IDE and the configured OAuth callback URL do not match. This issue often occurs when you're using a proxy.

To resolve this issue, you must update the OAuth callback URL to match the URL used to access the GitLab instance.

To update the OAuth callback URL:

1. On the left sidebar, at the bottom, select Admin.
2. Select Applications.
3. For GitLab Web IDE, select Edit.
4. Enter the OAuth callback URL. You can enter multiple URLs separated by newlines.

Workhorse dependency

DETAILS: Offering: Self-managed

On self-managed GitLab, Workhorse must be installed and running in front of the GitLab Rails server. Otherwise, you might encounter issues when you open the Web IDE or use certain features like Markdown preview.

For more information about this dependency, see features that rely on Workhorse.

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.