Show HN: CodeSwing – A CodePen-like interactive playground, built into VS Code

https://github.com/codespaces-contrib/codeswing

by lostintangent • 6 years ago

159 24 6 years ago

methyl2• 6 years ago

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?

lostintangent8• 6 years ago

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!

methyl2• 6 years ago

That are all great plans! React template would be useful, I guess should be more popular than Less/Sass templates.

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?

leetrout• 6 years ago

This reminds me that a solid browser preview added and supported in the core VS Code app would be a killer feature.

lostintangent8• 6 years ago

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

richajak• 6 years ago

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.

14u2c2• 6 years ago

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]

[0] https://github.com/eclipse-theia/theia

stevenschmatz• 6 years ago

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!

goldenkey• 6 years ago

With window tiling capabilities on pretty much every OS/WM these days, it really doesn't make sense to throw the kitchen sink into the editor.

reificator• 6 years ago

While I mostly agree, VSCode is electron. It's more like installing a faucet in the sink that's already there.

efwfwef2• 6 years ago

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?

lostintangent8• 6 years ago

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?

efwfwef2• 6 years ago

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!

qixxiq• 6 years ago

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 :)

lostintangent8• 6 years ago

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 :)

rglover2• 6 years ago

This looks really helpful for doing quick demos during screencasts. I like that it keeps the project local, too. Very neat.

lostintangent8• 6 years ago

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.

rglover2• 6 years ago

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).

tgv• 6 years ago

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.

lostintangent8• 6 years ago

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.

su1000• 6 years ago

https://www.monkwhocode.com/2020/12/coding-interview-questio...

Check this

Show HN: CodeSwing – A CodePen-like interactive playground, built into VS Code

Related Stories