CodeSandbox(codesandbox.io)
codesandbox.io
CodeSandbox
https://codesandbox.io/
47 comments
I have to register to do anything?
To run code, certainly! We automatically provision an auto-scaling mutable development API environment associated with your account when you do so. :) Happens in seconds.
You say that as though it's obvious that one has to create an account, even though many similar services, including CodeSandbox, don't require one for playing around.
Backend vs Frontend.
While it is true that Runkit (backend) offers the ability to play around without being logged in, Francisco and team are also focused on providing an amazing Node prototyping, learning and debugging environment, so that’s a necessity. We’re super impressed with their work. (Note to Runkit team: feel free to jump in.)
Our value prop, however, is that we’re an API platform (Standard Library), and Code.xyz is a product that enables less technical people (those uncomfortable with command line tools) the ability to jump in and build within our ecosystem right away.
APIs are namespaced to your user account as an intentional design decision of the system. Code.xyz is a product that’s intended to be used in a professional setting to stand up business APIs (Slack bots, Stripe webhooks) and we’re okay with that trade off — at least for now!
I’d say if you just wanna play around with an embeddable REPL environment stick to Runkit. If you want an API you can stand up and run in production (for whatever purpose) but also want to develop it and collaborate on it in the browser, then we’re for you! Think of us like Google Docs for API development, at least that’s our North Star.
While it is true that Runkit (backend) offers the ability to play around without being logged in, Francisco and team are also focused on providing an amazing Node prototyping, learning and debugging environment, so that’s a necessity. We’re super impressed with their work. (Note to Runkit team: feel free to jump in.)
Our value prop, however, is that we’re an API platform (Standard Library), and Code.xyz is a product that enables less technical people (those uncomfortable with command line tools) the ability to jump in and build within our ecosystem right away.
APIs are namespaced to your user account as an intentional design decision of the system. Code.xyz is a product that’s intended to be used in a professional setting to stand up business APIs (Slack bots, Stripe webhooks) and we’re okay with that trade off — at least for now!
I’d say if you just wanna play around with an embeddable REPL environment stick to Runkit. If you want an API you can stand up and run in production (for whatever purpose) but also want to develop it and collaborate on it in the browser, then we’re for you! Think of us like Google Docs for API development, at least that’s our North Star.
I am so happy that we're on Hacker News!
If you have any questions about how things work in CodeSandbox don't hesitate to ask me! I'll watch this thread to answer any questions.
If you have any questions about how things work in CodeSandbox don't hesitate to ask me! I'll watch this thread to answer any questions.
CodeSandbox is awesome and so are you. Thanks so much for your help in integrating CodeSandbox in GitLab. We're really excited to ship client side evaluation in GitLab 11.2 today so people can have a live preview of Vue and React code in the Web IDE https://docs.gitlab.com/ee/user/project/web_ide/#client-side...
Don't have a question, just want to say your "VS Code in a browser" thing is straight up incredible. :)
CodeSandbox is awesome, but I've stopped using it because I am not a fan of what Prettier does to my code. Any way to completely disable it by default?
If you are signed in, click on your name, then Preferences. Under Editor, you can disable Prettify On Save.
This is awesome! I do not see anyone mentioning another product in the same space: https://repl.it/
I'm not a user nor related in any way. I just think they have an interesting story!
I'm not a user nor related in any way. I just think they have an interesting story!
Thanks for the mention -- we're big fans of Ives and co!
VS Code has really done an incredible job and we're all benefiting from their work. One thing that we've done recently is add Language Servers on our containers. So when you boot up a language on Repl.it, say python/java/c++, we'll start a language server and that gives you kick-ass code intelligence: autocomplete, click-to-symbol, and some refactoring features: https://repl.it/blog/intel
VS Code has really done an incredible job and we're all benefiting from their work. One thing that we've done recently is add Language Servers on our containers. So when you boot up a language on Repl.it, say python/java/c++, we'll start a language server and that gives you kick-ass code intelligence: autocomplete, click-to-symbol, and some refactoring features: https://repl.it/blog/intel
Upon opening the page, my CPU temperature jumped 25 degrees. Also, I can't figure how anyone can type with an input delay of >150ms without quitting in frustration in less than 5 minutes.
It is incredible. Thank you very much for it. I have only one problem: I do not understand the business model. How can you provide such a fantastic tool for free ?
How does this stack up against StackBlitz [1]?
[1] http://stackblitz.com/
[1] http://stackblitz.com/
Curious about that too. Has anybody done any quasi-extensive comparison?
It looks extremely similar, is StackBlitz perhaps copied?
Hello! Creator of CodeSandbox here!
I don't want to give a comparison of StackBlitz and CodeSandbox, because my view as one of the creators would be skewed. I want to note though that CodeSandbox existed before StackBlitz released, I published CodeSandbox in April ([1] [2]) and StackBlitz released in August [3].
[1] https://hackernoon.com/codesandbox-an-online-react-editor-b8...
[2] https://news.ycombinator.com/item?id=14022860
[3] https://medium.com/@ericsimons/stackblitz-online-vs-code-ide...
I don't want to give a comparison of StackBlitz and CodeSandbox, because my view as one of the creators would be skewed. I want to note though that CodeSandbox existed before StackBlitz released, I published CodeSandbox in April ([1] [2]) and StackBlitz released in August [3].
[1] https://hackernoon.com/codesandbox-an-online-react-editor-b8...
[2] https://news.ycombinator.com/item?id=14022860
[3] https://medium.com/@ericsimons/stackblitz-online-vs-code-ide...
StackBlitz creator here! We actually had been working on SB for over 6 months before codesandbox launched. Not sure why Ives omitted that detail considering he was in this previous thread: https://news.ycombinator.com/item?id=14929228
Great to see CSB making improvements!
Great to see CSB making improvements!
I absolutely <3 CodeSandbox. I’ve been using CodeSandbox for the past six months or so and it’s been a game changer for two things: (1) onsite frontend interviews - no more waiting for npm installs or worrying about node compatibility and (2) quick create-react-app prototypes - and if I get far enough, I simply download the source and continue to work locally.
Wow, it's amazing how fast it loaded a full featured editor, compared to something like Plunkr.
Send my compliments to the Chef!
Send my compliments to the Chef!
I've really enjoyed using Code Sandbox. I even embed it in the docs for my open source Vue JS component b/c it shows how to set up the component in a very real-world environment.
Looks really good - only request I'd have is to allow for .pug in vanilla. Seems like they have support for it, but it isn't enabled in the vanilla box.
That's a really good point! I deployed a new update with .pug support in vanilla, here's a sandbox to play with it: https://codesandbox.io/s/mjln1846k8.
Whoa cool. There's a couple of webdev languages I never heard before on it. This seems like a great site to play with it and learn.
Definitely a useful tool. Easy on the eyes, thanks for sharing! It'll be nice to use this tool to learn some React :)
This is one of the best online IDE to quickly set up a React App. Thanks for the awesome work Ives van Hoorne.
The animation has race condition issues btw.
"almost fully" open source....
Looking forward to ReasonML support
Super awesome!
crashed FF 61
Yet another variant of Visual Studio Code
Lots of online frontend REPLs, but this one is my new fave, and I've used it for a few code interviews as well as exploring new ideas quickly. As a React dev, it's very easy to drop in a new dependency and try it out, and now they have collaborative code editing as well. All for free, which is amazing. Also introduced me to prettier which is a fantastic, set-and-forget formatter. [1]
[1] https://github.com/prettier/prettier
[1] https://github.com/prettier/prettier
Ives van Hoorne (of CodeSandbox) got Visual Studio code to run in the browser
https://twitter.com/CompuIves/status/1031930891122049024
https://twitter.com/CompuIves/status/1031930891122049024
Looking at the bio it seems like the creator is just an university student. That's crazy impressive! I thought an app of this level of polish would require at least a small team of experienced devs/designers.
Very cool. We (Sourcegraph) could never get VS Code fast enough to be the right fit for code browsing and search, which is what we're targeting. So we built our own components (open-source at https://github.com/sourcegraph/codeintellify). For browsing and search, you need fast loading, low resource consumption, a native system feel for text, etc.
For editing in the browser, where you're likely to keep one tab open for a long time, it is an absolutely obvious choice. A huge undertaking for sure, and it's awesome that he was able to accomplish it!
For editing in the browser, where you're likely to keep one tab open for a long time, it is an absolutely obvious choice. A huge undertaking for sure, and it's awesome that he was able to accomplish it!
Theia IDE folks are working on this as well. They have a very similar project/product. I'm curious how much of the work is overlapping...
The SourceGraph folks seemed to have been one of the first to get major chunks of VSCode running in browser. I've stumbled across a few others doing similar things but they seemed like toys.
The SourceGraph folks seemed to have been one of the first to get major chunks of VSCode running in browser. I've stumbled across a few others doing similar things but they seemed like toys.
GHEdit was released ~2 years ago: https://github.com/spiffcode/ghedit/blob/master/README.md
This is really impressive! Seems like it would be in Microsoft's best interest to recruit him for the Code team.
VSCode IS running inside a browser.
> VSCode IS running inside a browser.
I used to be a major contributor and follower of Atom. People commonly asked why Atom couldn't run in the browser. The answer was simple, node and a browser are totally different things. Imagine a browser opening files, starting processes, running arbitrary C-code, etc.
No, VSCode does not normally run in a browser.
I used to be a major contributor and follower of Atom. People commonly asked why Atom couldn't run in the browser. The answer was simple, node and a browser are totally different things. Imagine a browser opening files, starting processes, running arbitrary C-code, etc.
No, VSCode does not normally run in a browser.
Ives said it was relatively easy to swap out the node bits.
He also said that the reason for that was the way the VSCode team structured the code, not because it's "running in a browser already": https://twitter.com/CompuIves/status/1031932607326371843
What everyone else has been doing is embedding Monaco (the barebones text editor component) into their shell. The shell implements things like searches, key bindings, a file explorer tree view, top menu, fake-console etc.
What the creator is saying is that he got the actual VSCode project running in the browser. This means that the vast plugin ecosystem will run inside the browser. I suppose he'd have replaced all the nodejs dependencies with browser versions; for example an "fs" module that keeps files in-memory (or maybe using indexeddb) etc.
Further down that tweet, he says that the code is very easy to get started with. That's been my experience looking at it briefly; VSCode just seems like it was written by a team with deep expertise in IDE-making and PLs.
What the creator is saying is that he got the actual VSCode project running in the browser. This means that the vast plugin ecosystem will run inside the browser. I suppose he'd have replaced all the nodejs dependencies with browser versions; for example an "fs" module that keeps files in-memory (or maybe using indexeddb) etc.
Further down that tweet, he says that the code is very easy to get started with. That's been my experience looking at it briefly; VSCode just seems like it was written by a team with deep expertise in IDE-making and PLs.
[1] https://code.xyz/
[2] https://stdlib.com/