The github.dev web-based editor

About the web-based editor

The web-based editor introduces a lightweight editing experience that runs entirely in your browser. With the web-based editor, you can navigate files and source code repositories from GitHub, and make and commit code changes. You can open any repository, fork, or pull request in the editor.

The web-based editor is available to everyone for free on GitHub.com.

The web-based editor provides many of the benefits of Visual Studio Code, such as search, syntax highlighting, and a source control view. You can also use Settings Sync to share your own VS Code settings with the editor. For more information, see "Settings Sync" in the VS Code documentation.

The web-based editor runs entirely in your browser’s sandbox. The editor doesn’t clone the repository, but instead uses the GitHub Repositories extension to carry out most of the functionality that you will use. Your work is saved in the browser’s local storage until you commit it. You should commit your changes regularly to ensure that they're always accessible.

You must be signed in to use the web-based editor.

Opening the web-based editor

You can open any GitHub repository in the web-based editor in either of the following ways:

• To open the repository in the same browser tab, press . while browsing any repository or pull request on GitHub.

  To open the repository in a new browser tab, press >.

• Change the URL from "github.com" to "github.dev".

• When viewing a file, use the dropdown menu next to and select Open in github.dev.

  

Codespaces and the web-based editor

Both the web-based editor and GitHub Codespaces allow you to edit your code straight from your repository. However, both have slightly different benefits, depending on your use case.

	web-based editor	GitHub Codespaces
Cost	Free.	Free monthly quota of usage for personal accounts. For information on pricing, see "About billing for GitHub Codespaces."
Availability	Available to everyone on GitHub.com.	Available to everyone on GitHub.com.
Start up	The web-based editor opens instantly with a key-press and you can start using it right away, without having to wait for additional configuration or installation.	When you create or resume a codespace, the codespace is assigned a VM and the container is configured based on the contents of a devcontainer.json file. This set up may take a few minutes to create the environment. For more information, see "Creating a codespace for a repository."
Compute	There is no associated compute, so you won’t be able to build and run your code or use the integrated terminal.	With GitHub Codespaces, you get the power of a dedicated VM on which you can run and debug your application.
Terminal access	None.	GitHub Codespaces provides a common set of tools by default, meaning that you can use the Terminal exactly as you would in your local environment.
Extensions	Only a subset of extensions that can run in the web will appear in the Extensions View and can be installed. For more information, see "Using extensions."	With GitHub Codespaces, you can use most extensions from the Visual Studio Code Marketplace.

Continue working on Codespaces

You can start your workflow in the web-based editor and continue working on a codespace. If you try to access the Run and Debug View or the Terminal, you'll be notified that they are not available in the web-based editor.

To continue your work in a codespace, click Continue Working on… and select Create New Codespace to create a codespace on your current branch. Before you choose this option, you must commit any changes.

Using source control

When you use the web-based editor, all actions are managed through the Source Control View, which is located in the Activity Bar on the left hand side. For more information on the Source Control View, see "Version Control" in the VS Code documentation.

Because the web-based editor uses the GitHub Repositories extension to power its functionality, you can switch branches without needing to stash changes. For more information, see "GitHub Repositories" in the VS Code documentation.

Create a new branch

1. 현재 분기가 상태 표시줄에 표시되지 않으면 codespace 아래쪽에서 상태 표시줄을 마우스 오른쪽 단추로 클릭하고 소스 제어 를 선택합니다.
2. 상태 표시줄에서 분기 이름을 클릭합니다.
3. 드롭다운에서 전환하려는 분기를 클릭하거나 새 분기의 이름을 입력하고 새 분기 만들기 를 클릭합니다. Any uncommitted changes you have made in your old branch will be available on your new branch.

Commit your changes

1. 작업 표시줄에서 Source Control(소스 제어) 보기를 클릭합니다.
2. 변경 내용을 스테이징하려면 변경한 파일 옆 또는 여러 파일을 변경하고 모두 스테이징하려는 경우 Changes(변경 내용) 옆의 + 아이콘을 클릭합니다.
3. 변경 내용을 설명하는 커밋 메시지를 입력합니다.
4. 스테이징된 변경 내용을 커밋하려면 소스 제어 사이드바 위쪽의 확인 표시를 클릭합니다.
5. Once you have committed your changes, they will automatically be pushed to your branch on GitHub.

Create a pull request

1. 리포지토리의 로컬 복사본에 대한 변경 내용을 커밋한 후 Create Pull Request(끌어오기 요청 만들기) 아이콘을 클릭합니다.
2. 병합하려는 로컬 분기 및 리포지토리와 병합하려는 원격 분기 및 리포지토리가 올바른지 확인합니다. 그런 다음 끌어오기 요청에 제목과 설명을 입력합니다.
3. 만들기 를 클릭합니다.

Working with an existing pull request

You can use the web-based editor to work with an existing pull request.

1. Browse to the pull request you'd like to open in the web-based editor.
2. Press . to open the pull request in the web-based editor.
3. Once you have made any changes, commit them using the steps in Commit your changes. Your changes will be committed directly to the branch, it's not necessary to push the changes.

Using extensions

The web-based editor supports VS Code extensions that have been specifically created or updated to run in the web. These extensions are known as "web extensions". To learn how you can create a web extension or update your existing extension to work for the web, see "Web extensions" in the VS Code documentation.

Extensions that can run in the web-based editor will appear in the Extensions View and can be installed. If you use Settings Sync, any compatible extensions are also installed automatically. For information, see "Settings Sync" in the VS Code documentation.

Troubleshooting

If you have issues opening the web-based editor, try the following:

• Make sure you are signed in to GitHub.
• Disable any ad blockers.
• Use a non-incognito window in your browser to open the web-based editor.

Known limitations

• The web-based editor is currently supported in Chrome (and various other Chromium-based browsers), Edge, Firefox, and Safari. We recommend that you use the latest versions of these browsers.
• Some keybindings may not work, depending on the browser you are using. These keybinding limitations are documented in the "Known limitations and adaptations" section of the VS Code documentation.
• . may not work to open the web-based editor according to your local keyboard layout. In that case, you can open any GitHub repository in the web-based editor by changing the URL from github.com to github.dev.