CodeSwing — Interactive Coding Playground (like CodePen, JSFiddle, etc.) Extension for Visual Studio Code

The Visual Studio Code extension named “CodeSwing” just blew my socks off.

CodeSwing is an interactive coding playground for VS Code, that allows you to build/explore/learn rich web applications (“swings”). It’s like having the magic of a traditional web playground (e.g. CodePen, JSFiddle), but in Visual Studio Code!

~

Using the Command Palette you can create a new Swing in a directory. Here I’ve chosen for the classic HTML/CSS/JS (cfr. CodePen).

Using the “Add Library” command one can quickly import ES Modules, without needing to install any package. This is possible thanks to the wonderful SkyPack.

~

As you’d expect, you choose your own layout

~

The rendering engine is powered by Chromium, so you can use its DevTools.

The version of Chrome that’s bundled with the extension (or is it the Chromium that Electron uses?), is Chrome 91. Because it’s bundled, you can’t set any feature flags — such as Experimental Web Platform Features to enable Scroll-Linked Animations — on it.

~

CodeSwing also has support for React/Svelte/Vue and preprocessors.

When you create swings, you can use your favorite web languages (HTML/Pug, CSS/SCSS/Less, JS/TS) and libraries (React, Vue, Angular, etc.) and have a live preview as you type, without needing to worry about compiling or bundling anything. It’s like a visual REPL for managing runnable code snippets.

In the video below I quickly create a React Component:

~

There’s a ton of more stuff to dig into — such as exporting your Swing to CodePen — detailed in the README.

And oh, if go to codeswing.dev you get redirected to GitHub’s CodeSpaces with a preloaded CodeSwing.

Visual Studio Marketplace: Codeswing →
Codeswing Source (GitHub) →

About the author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.