DEV Community

Cover image for GitHub Web Editor: FREE VSCode in the browser

GitHub Web Editor: FREE VSCode in the browser

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

Discussion (11)

Collapse
ptejada profile image
Pablo Tejada • Edited

TL;DR + Conclusion
Just watch the video linked 3 times in the post.

Collapse
n3wt0n profile image
Davide 'CoderDave' Benvegnù Author

In most of my articles I have the full text, because I describe some code, or how to achieve something which could be used as a reference.

But in very practical scenarios like this, or showcase-type content, I think the video works best because you can see the product/service in action rather than reading about it...

Collapse
mungojam profile image
Mark Adamson

Text was perfect for me. Read it in 10 seconds, tried it out for myself straight away and publcised to my colleagues. Thanks 🙂

Collapse
n3wt0n profile image
Davide 'CoderDave' Benvegnù Author

Thanks for your feedback :)

Collapse
taufik_nurrohman profile image
Taufik Nurrohman

Hopefully GitHub won’t sue you about the domain name. Nice idea by the way. Previously I know about github1s.com that give the same idea, but it is read-only.

Collapse
akhand3108 profile image
Akhand Patel

Its not a third party feature.
Its by github only.

Collapse
taufik_nurrohman profile image
Taufik Nurrohman

LOL sorry, I thought it was not official 😄

Collapse
n3wt0n profile image
Davide 'CoderDave' Benvegnù Author

Haha.. as @akhand3108 it is an official GItHub service, I'm just reviewing it :)

Collapse
hasnain190 profile image
Hasnain Sikandar

Before github.dev that was still vscode web editer available. If you change the link is your github link by just adding github1s.com from github.com ,it will shift to the vscode. (It is just now Microsoft that is doing the same job and eliminating the small businesses)

Collapse
n3wt0n profile image
Davide 'CoderDave' Benvegnù Author

Well, not exactly...

First of all, github1s is a read-only platform, it is not an editor. The one from github is, instead, a full editor that supports extensions as well.

Second, VSCode is a Microsoft product, so I guess they have the rights to use it... no? ;) (I know it is open source, but it's made primarily by MS)

Collapse
mitbhalodi profile image
Meet Bhalodi

hoe to create react app in codespaces?