Online code playgrounds are a great way to try out code snippets without setting up a project locally and firing up your IDE. You can quickly validate your idea and share it with others. The majority offer a quick and dirty solution for this. However, most of them fall short when dealing with bigger applications.
The basics
Online code playgrounds offer a variety of basic, we can say must have, functionalities:
- syntax highlighting
- preview window
- file pre-processing (like Typescript, SASS)
- inclusion of external files and JavaScript libraries
- sharing via a short URL
- embedding demonstrations in other pages
- zero cost for basic features
There is a long list of editors that fulfill the above criteria: JSFiddle, CodePen, JSBin, Liveweave, PlayCode, Plunker, JSitor.
The problem
The above playgrounds are completely fine, but I wanted to share complete projects generated by framework CLIs (like Angular CLI, Vue CLI, and CreateReactApp). Although some playgrounds let you use frontend frameworks, those are usually accessed globally. The way you wouldn't write your next production application.
The features I wanted:
- use the same stack as on a production project
- import from Github
- use any NPM package
The solution
The project that surprised and me and has the above features is Codesandbox.
Codesandbox lets you import your Github projects or start a new React, Angular, Vue application generated by their CLIs. It just works and boots fast. I managed to migrate my TodoApp implemented in React Hooks within seconds.
It has some nice additional features also:
- deployment to Netlify or Zeit
- VSCode integration (like shortcuts)
- live collaboration
- autocompletion
- linting
- devtool functionality
- Github committing
- container sandboxes for backend applications (Node.js)
- it's open-source, you can contribute
Summary
I was amazed by the simplicity, speed, and feature set of Codesandbox. It feels like THE online playground that we needed. I've tried other playgrounds, but after this, I'm not looking back.
Hope you will feel the same and try out this awesome website.
Top comments (21)
It's been around for quite a while now and a lot of people are using it every day.
I see it used a lot by "influencers" who need to share their ideas and examples on social media, but also a ton of educators who use it for their courses, both live and recorded.
It's pretty good and keeps getting better.
Another good one, when it comes to fullstack apps, is Glitch. Not as helpful with the initial boilerplate setup, although those can be found as templates, but it's quite good at giving you the Node backend to code at the same time and the live reload for that is impressively fast.
It was completely new to me.
Glitch seems promising too.
How does this compare to stackblitz.com/
codesandbox is open source, stackblitz is not (though parts of it are). Otherwise, I find that both have advantages vs disadvantages over the other. For example, I've had trouble loading some angular cli configs in codesandbox (but not in stackblitz), and I've had trouble loading some libraries (like
luxon) in stackblitz but not codesandbox. Though both are very similar and evolving fairly quickly so your mileage may vary.Personally, I've come to prefer codesandbox over stackblitz for the sole reason that it is open source (codesandbox was also started before stackblitz, and I'm suspicious that stackblitz is largely a proprietary attempt to copy codesandbox).
But if you ever run into a problem with one, it's worth trying the same thing in the other.
I have tried it, but it doesn't seem to work out of the box
stackblitz.com/github/blacksonic/t...
Codesanbox is a great tool. It almost like an ide for web development. JSfiddle Codepen etc are more of snippet based tool where one can create some small small snippet to test out some basic functionality. In the same list there is one more tool you can consider is JSitor and I am really proud to create that. If you wanna more about it checkout article
JSitor, an alternative of CodePen, JSBin and JSFiddle
Ashvin Kumar Suthar ・ Sep 12 ・ 3 min read
Thanks, added it to the list.
What about StackBlitz which had also been around for a year or two. I agree that both are mind blowing, but Stackblitz has been around for just as long if not longer. Do you know how each is different? Client based vs VM based?
Both are amazing. One cannot be mentioned and championed without mentioning the other.
So, unless you have access to some non-public information, codesandbox (repo started in Nov 2016) is significantly older than stackblitz (repo started in July 2017). Personally, I'm suspicious that stackblitz is simply a proprietary copy of the open source codesandbox (not that stackblitz doesn't bring it's own innovations to the table).
I also learned about stackblitz before codesandbox (via Angular), and incorrectly thought that codesandbox was copying stackblitz.
not as fast but Gitpod is great.
Seems promising also
I knew this article was going to be about Code Sandbox before I even opened it - and I was not disappointed.
It truly is fantastic.
Live collab??? I'm on mobile now, so I assume I'm limited with them, but could it fit a scenario like:
That's a surprisingly difficult spec to fill. Telemetry... I need to check-back on that. (We're IntelliJ, not atom, so that's not a go-to)
You can do that on vs code too and it works really well.
I just shipped an integrated playground experience for VS Code, which might be worth checking out? It leverages your existing VS Code setup as the rich editor, and GitHub Gists as the storage. That way, you can have a fully-featured playground experience, without really having to change your workflow. I’d love to hear whether this meets your needs, and if not, what your feedback is! It’s fully open-source and I’ve been iterating pretty quickly with the community thus far 👍
twitter.com/lostintangent/status/1...
I can finally practice creating components on Vue! Thank you for sharing!!!
I firmly believe it will bring useful values, I also often look to entertainment things like music, klingelton kostenlos is the first thing that comes to mind