Show HN: CodeSwing – A CodePen-like interactive playground, built into VS Code
github.com
github.com
I'll dig in a bit later/tomorrow, but assuming I'll be able to run some of my own JS to convert the code into the visual representation. If not you might have a pull request soon :)
That said, when you create/open a swing, there will be a "CodeSwing" view on the Explorer tab, which displays all the files in the swing. One of those files will be called "codeswing.json", which is the manifest for the swing itself. If you click on it, you'll see two array properties, called "scripts" and "styles", which list the libraries that have been added to the swing. When you add a new library via the "Add Library" command, it will add the selected library to that file: https://github.com/codespaces-contrib/codeswing#external-lib.... Let me know if you have any feedback on that experience!
Regarding sharing: I maintain another VS Code extension called GistPad (https://aka.ms/gistpad) that allows you to login with GitHub and then manage gists/repos without cloning/committing files. GistPad has an integration with CodeSwing that allows you to create swings as gists, and then edit/share them with others: https://github.com/codespaces-contrib/gistpad#codeswing. Since GistPad shows your starred gists, and lets you follow other GitHub users, you can also share swings by simply starring/following others that are creating swings in gists.
Additionally, since you can create new swings as local directories (using the "CodeSwing: New Swing..." command), you could store a swing in a GitHub/BB/GitLab repo, and then when others clone and open that repo in VS Code, the CodeSwing extension will detect the swing and automatically launch the right coding environment. The gif in the project's README shows that in action using GitHub Codespaces.
Let me know if any of that sounds interesting, or if you have feedback on how I could improve the overall experience. Thanks so much for checking out CodeSwing!
For sharing via GistPad: a great start, but ultimately I'd love to share with people without VSCode via hosted URL. There's an excellent bl.ocks.org that can render Gist in a browser (just replace gist.github.com with bl.ocks.org if you have index.html file: https://gist.github.com/methyl/f4c2395f941493b6bf5212dac5e44... => https://bl.ocks.org/methyl/f4c2395f941493b6bf5212dac5e44b2c or if you prefer direct link add /raw https://bl.ocks.org/methyl/raw/f4c2395f941493b6bf5212dac5e44...). I guest GistPad integration could generate those sharable links.
I also noticed there is a preview mode in GistPad. How does it differ from CodeSwing?
Regarding GistPad: it bundles CodeSwing along with it (as an optional, uninstallable dependency), so that you can install GistPad and use it to create code snippets/swings/notes/etc. So CodeSwing is the core "interactive coding playground" environment, that can be used with or without GistPad. And GistPad is effectively a virtual filesystem for VS Code, that allows you to edit gists and repos as if they were always-available files.
When I read the title I was hopping that it would also allow something like the golang or rust playground which I use frequently. I'm wondering now if something like that really exist for VSCode?
Regarding the Golang playground: is this what you're thinking about? https://play.golang.org/. CodeSwing is a general-purpose "interactive coding environment", and therefore, I'd love to expand it over time to include more languages. Right now, it's limited to web scenarios, but that's simply where I started.
Would it be useful to be able to create a new Go/Rust swing inside VS Code, and have it automatically run your code, and display stdout in a console window as you type? Or did you have something else in mind?
The second cool thing about these services is that you can easily share something you made (if I was making a VS Code plugin like that, I would give the option to create a sharable link to a play.golang.org or play.rust-lang.org page
The third cool thing is that you can easily compile using different version and tools.
That being said, if only the first cool thing was implemented, that would already be cool!
BTW, I checked with lsof, but there is no listening port, so I guess the answer is no.
Starting a server that serves the static HTML wouldn’t be too difficult, so I might think that through a bit. As you said, that would enable validation with Firefox, which would be really cool.
Also, just as an FYI: even though the core of CodeSwing is local, you can also store your swings in GitHub repos or Gists, via an integration with another VS Code extension that I maintain called GistPad (https://aka.ms/gistpad). That way, if you want to create samples or share swings with others, you can simply use GitHub + VS Code to do it.
CodeSwing is really meant to enable component/snippet/sample development (like a "visual REPL"), so you can quickly try out, learn & share ideas, without needing to set up any build ceremony in order to get there. I'm hoping that it will be complimentary to a built-in browser preview in VS Code. But I'm keen to hear folks thoughts about it :D
Btw the theia editor, pretty much VS Code, does have this feature [0]
My old MBP bricked the other day, and while I wait for a new laptop I’m going to use a random cheap computer to do my dev work. I love the idea of having a full fledged cloud IDE with all the bells and whistles already set up for me. This helps enable that!