GitHub Web Editor: FREE VSCode in the browser

Davide 'CoderDave' Benvegnù - Aug 23 '21 - - Dev Community

A lightweight code editor, based on VSCode, that can be accessed via Browser, and it's completely free. Sounds too good to be true? Well this time it's not.

Intro

As promised in the article / video about Codespaces that I've released last week (check it out if you haven't yet), today we talk about an awesome new feature that has been released by GitHub together with Codespaces.

I'm talking about the new Web Editor experience accessible directly from your repos. Best part? It's completely free for everyone!

Video

As usual, if you are a visual learner, or simply prefer to watch and listen instead of reading, here you have the video with the whole explanation and demo, which to be fair is much more complete than this post.

Link to the video: https://youtu.be/UDbdChCXIKw

If you rather prefer reading, well... let's just continue :)

What is it?

The new Web Editor is a lightweight code editor, based on VSCode. It is similar to Codespaces, but it is not backed by any compute backing; it is in fact entirely powered by your browser.

This means it has some limitations over Codespaces, and we will see it in a moment, but on the flipside it's very fast to load and quickly navigate. It is perfect for making small changes to your code without the need of having an IDE on your laptop.

How to Access it

There are currently 2 ways to access the new Web Editor:

  • Directly via URL - just change github.com to github.dev in your browser when in the repo you want to work on
  • By Keyboard - pressing the full stop . keyboard button while in the repo

How it works

Alright, it's time to see this in actions. Images are 1,000 times better than words, so check it out here:

Demo starts at minute 1:50

Conclusions

Comment down below with what you think of this new Web Editor. It's still in beta, so probably some features will be added, but I think it's really cool!

I will soon have another article/video in which I will do a bit by bit comparison between Codespaces and this Web Editor, so consider following me or subscribing if you don't wanna miss it.

Also, checkout this video, where I talk about the new Codespaces features now that it's GA.

Like, share and follow me 🚀 for more content:

📽 YouTube
Buy me a coffee
💖 Patreon
🌐 CoderDave.io Website
👕 Merch
👦🏻 Facebook page
🐱‍💻 GitHub
👲🏻 Twitter
👴🏻 LinkedIn
🔉 Podcast

Buy Me A Coffee

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .