Published at
Updated at
Reading time
2min

Lately, there's been a lot of movement in the "coding in the cloud" area. We have CodePen or JSFiddle for years, but now it feels like we're entering a new era.

CodeSandbox and Stackblitz provide editing, bundling and serving modern web applications online. And even though I thought it wouldn't happen anymore, GitHub joined the party with CodeSpaces and github.dev not too long ago.

Many of these new tools leverage VS Code and run it in your browser. If you're a VS Code user, you get the convenience of reusing your extensions and settings. It just works (and it really does!).

Today I discovered something that blew my mind, but let's set the stage first.

I shared CodeSwing previously. The VS Code extension provides a CodePen-like coding environment write within your editor. It's beautiful!

CodeSwing in VS Code including an editor for HTML, JS and CSS and a preview window

It never appeared to me that you could run it in the cloud, and that's exactly what Jonathan Carter's repo "Rock Paper Scissors" demonstrates. Why's that cool?

If GitHub provides a cloud version of VS Code that also runs extensions, then you can spin up your own tiny CodeSwing preview environment that's connected to a GitHub repository by pressing . (or changing the URL from github.com to github.dev). 🤯

Check out the repo to see it in action.

Rock Paper Scissors repo including a CodePen-like coding environment using CodeSwing

It seems like all you have to do is to initialize CodeSwing in your project. This action will create a codeswing.json.

{
    "scripts": [],
    "styles": [],
    "layout": "splitBottom"
}

That won't do anything if CodeSwing isn't installed, though. To tell github.dev that you need CodeSwing to be installed, define a .devcontainer/devcontainer.json file listing all the required project extensions.

{
  "extensions": ["codespaces-contrib.codeswing"]
}

People opening your project in github.dev will then be prompted and told to install the recommended extensions. 🎉

And now, if folks want to play around with your code and see it live, there's no need for a download or git clone. The files, editor and preview are all online! 😲

I'm curious to see where we go with all this new "coding in the cloud" stuff!

Was this post helpful?
Yes? Cool! You might want to check out Web Weekly for more WebDev shenanigans. The last edition went out 10 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles