Skip to main content

Quickstart for GitHub Codespaces

Try out GitHub Codespaces in 5 minutes.


In this guide, you'll create a codespace from a template repository and explore some of the essential features available to you within the codespace. You'll work in the browser version of Visual Studio Code, which is initially the default editor for GitHub Codespaces. After trying out this quickstart you can use Codespaces in other editors, and you can change the default editor. Links are provided at the end of this guide.

From this quickstart, you'll learn how to create a codespace, connect to a forwarded port to view your running application, publish your codespace to a new repository, and personalize your setup with extensions.

For more information on exactly how GitHub Codespaces works, see the companion guide "Deep dive into GitHub Codespaces."

Creating your codespace

  1. Navigate to the github/haikus-for-codespaces template repository.

  2. Click Use this template, then click Open in a codespace.

    Screenshot of the 'Use this template' button and dropdown menu

Running the application

Once your codespace is created, the template repository will be automatically cloned into it. Now you can run the application and launch it in a browser.

  1. When the terminal becomes available, enter the command npm run dev. This example uses a Node.js project, and this command runs the script labeled "dev" in the package.json file, which starts up the web application defined in the sample repository.

    npm run dev in terminal

    If you're following along with a different application type, enter the corresponding start command for that project.

  2. When your application starts, the codespace recognizes the port the application is running on and displays a prompt to let you know it has been forwarded.

    Port forwarding "toast" notification

  3. Click Open in Browser to view your running application in a new tab.

Edit the application and view changes

  1. Switch back to your codespace and open the haikus.json file by clicking it in the Explorer.

  2. Edit the text field of the first haiku to personalize the application with your own haiku.

  3. Go back to the running application tab in your browser and refresh to see your changes.

    If you've closed the tab, open the Ports panel and click the Open in browser icon for the running port.

    Port Forwarding Panel

Committing and pushing your changes

Now that you've made a few changes, you can use the integrated terminal or the source view to publish your work to a new repository.

  1. In the Activity Bar, click the Source Control view. Source control view

  2. To stage your changes, click + next to the haikus.json file, or next to Changes if you've changed multiple files and you want to stage them all.

    Source control side bar with staging button highlighted

  3. To commit your staged changes, type a commit message describing the change you've made, then click Commit.

    Source control side bar with a commit message

  4. Click Publish Branch.

    Screenshot of the "Publish branch" button in VS Code

  5. In the "Repository Name" dropdown, type a name for your new repository, then select Publish to GitHub private repository or Publish to GitHub public repository.

    Screenshot of the "Repository Name" dropdown in VS Code

    The owner of the new repository will be the GitHub account with which you created the codespace.

  6. In the pop-up that appears in the lower right corner of the editor, click Open on GitHub to view the new repository on In the new repository, view the haikus.json file and check that the change you made in your codespace has been successfully pushed to the repository.

    Screenshot of the "Open in GitHub" pop-up in VS Code

Personalizing with an extension

When you connect to a codespace using the browser, or the Visual Studio Code desktop application, you can access the Visual Studio Code Marketplace directly from the editor. For this example, you'll install a VS Code extension that alters the theme, but you can install any extension that's useful for your workflow.

  1. In the left sidebar, click the Extensions icon.

  2. In the search bar, type fairyfloss and click Install.

    Add an extension

  3. Select the fairyfloss theme by selecting it from the list.

    Select the fairyfloss theme

About Settings Sync

You can enable Settings Sync to sync extensions and other settings across devices and instances of VS Code. When you enable Settings Sync in an instance of VS Code, such as the VS Code desktop application on your laptop, your settings for that instance are stored in the cloud. From the cloud, the settings are pulled into all new codespaces at the point of creation, and continuously synced to any existing codespaces in which Settings Sync is enabled.

Whether Settings Sync is enabled by default in a codespace depends on your existing settings and on whether you open the codespace in the browser or in the VS Code desktop application. For more information, see "Personalizing GitHub Codespaces for your account."

Next steps

You've successfully created, personalized, and run your first application within a codespace but there's so much more to explore! Here are some helpful resources for taking your next steps with GitHub Codespaces.

Further reading