This looks great! I've been looking for exactly something like this for one of my side projects: https://weblight.vercel.app/
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 :)
I’d love to collaborate with you on this! I’ll take a look at your project later this evening, since it might point at some improvements I can add to CodeSwing. Otherwise, I’ll be on the lookout for an issue or pull request from you soon :)
Just tested and it will be a huge productivity improvement for me. Is there any way to inspect what libraries have been added for temporary swings? Do you plan to add sharing functionality, so that I can send over URL for anyone to explore the playground?
Hey! By default, none of the current templates add any libraries to the swing. However, I'm planning on adding new template galleries to make it easy to create/explore ideas using popular frameworks. I'd love to hear if you have any suggestions for what you'd like to see me prioritize (e.g. React, Tailwind, etc.), since I'll be working on that this weekend :D
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!
Ah, got it. Apologies for misunderstanding! I'm currently working on the ability to export a swing to CodePen and Bl.ocks, so that you can create your swings in VS Code, and then share them with the appropriate communities. I should have both of these done this weekend. Would that work for your workflow? Since you can export CodePens as gists, and all Bl.ocks are already gists, you can actually already open any CodePens/Bl.ocks inside of GistPad right now. So I just need to finalize the swing->CodePen/Bl.ocks experience.
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.
That's really cool! Looks like a fiddlejs but for VSCode.
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?
Exactly! I'm a huge fan of CodePen/JSFiddle/etc., but wanted to have an experience that let me take advantage of my existing editor setup, in order to experiment with ideas or learn new things. I built CodeSwing to "scratch my own itch", and I'm keen to hear if it's useful for others as well :D
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 first cool thing about play.golang.org and play.rust-lang.org is that you don't need to setup a project to quickly test something (this is especially a pain in rust as you need to set dependencies in a Cargo.toml file.
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!
That can come in really handy. Does it expose a web-server to other applications? I'm mainly thinking Firefox here (to see if the "swing" is compatible), but there might be other uses for that too.
BTW, I checked with lsof, but there is no listening port, so I guess the answer is no.
Hey! Yeah currently, the swing simply generates a static HTML file, composed of the various files in the swing, and then renders that in the preview window. As you type in the editor, it tries to “intelligently” update that specific file, and re-render the preview window.
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.
Yeah that’s a great use case! Out of curiosity: what kind of screencasts/demos did you have in mind (e.g. web app development)? I just ask, since I’d love to think through if there are opportunities to improve the experience.
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.
Yep, web development. Doing a "how to build this" type of thing. I frequently need to explain things in a screencast that benefit from a quick scratchpad more than they do being integrated into the project code (e.g., explaining a JavaScript Promise in a fundamental sense).
That's on the team's near-term roadmap :) In order to build full apps/projects, having an editor-integrated browser preview will be amazing!
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
Does it support local standalone mode? or something like personal codepen server? did not feel comfortable to keep code there with recent disruption of major cloud providers.
Serious question: why? I think its very useful when an editor in a browser like with Repl.it, GitPod, and this project, but when the editor is running on your desktop using your own browser seems much nicer. You can use all the devtools, extensions, etc that you are accustomed to.
Btw the theia editor, pretty much VS Code, does have this feature [0]
It is much nicer in general, but what about when used with Codespaces?
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!
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 :)