CodeSandbox

by tosh • 8 years ago

228 47 8 years ago

adpirz• 8 years ago

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

tosh• 8 years ago

Ives van Hoorne (of CodeSandbox) got Visual Studio code to run in the browser

https://twitter.com/CompuIves/status/1031930891122049024

colemickens• 8 years ago

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.

scottlu2• 8 years ago

GHEdit was released ~2 years ago: https://github.com/spiffcode/ghedit/blob/master/README.md

sqs• 8 years ago

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!

zawerf• 8 years ago

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.

fulyscentedking• 8 years ago

VSCode IS running inside a browser.

jeswin• 8 years ago

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.

mchahn• 8 years ago

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.

Memosyne• 8 years ago

This is really impressive! Seems like it would be in Microsoft's best interest to recruit him for the Code team.

jjcm• 8 years ago

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.

CompuIves3• 8 years ago

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.

eugeniub• 8 years ago

Boy that landing page sure is a battery sucker. I left it open for a couple minutes and came back to my laptop whirring like crazy.

donut• 8 years ago

Yeah same. What's it doing?

dabernathy89• 8 years ago

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.

syntaxing• 8 years ago

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.

the_arun• 8 years ago

Super awesome!

keithwhor3• 8 years ago

If you like CodeSandbox you should check out Code.xyz [1] — not the same target (Code.xyz is for building and shipping backend APIs to the Standard Library [2] platform) but we were definitely inspired by CodeSandbox and others! We built our rendering engine from scratch (as in, scratch, ‘nilla JS) to meet our needs at a low browser payload.

[1] https://code.xyz/

[2] https://stdlib.com/

philliphaydon• 8 years ago

I have to register to do anything?

keithwhor3• 8 years ago

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.

ryanashcraft• 8 years ago

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.

arusahni• 8 years ago

How does this stack up against StackBlitz [1]?

[1] http://stackblitz.com/

somada141• 8 years ago

Curious about that too. Has anybody done any quasi-extensive comparison?

coding123• 8 years ago

It looks extremely similar, is StackBlitz perhaps copied?

CompuIves3• 8 years ago

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

CompuIves3• 8 years ago

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.

sytse• 8 years ago

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

onion2k• 8 years ago

Don't have a question, just want to say your "VS Code in a browser" thing is straight up incredible. :)

tomduncalf• 8 years ago

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?

wyze• 8 years ago

If you are signed in, click on your name, then Preferences. Under Editor, you can disable Prettify On Save.

gitgud• 8 years ago

Wow, it's amazing how fast it loaded a full featured editor, compared to something like Plunkr.

Send my compliments to the Chef!

kovek• 8 years ago

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!

amasad• 8 years ago

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

singularity2001• 8 years ago

crashed FF 61

reacweb• 8 years ago

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 ?

mattbgates• 8 years ago

Definitely a useful tool. Easy on the eyes, thanks for sharing! It'll be nice to use this tool to learn some React :)

thisbool32• 8 years ago

"almost fully" open source....

emilfihlman• 8 years ago

The animation has race condition issues btw.

Dinux• 8 years ago

Yet another variant of Visual Studio Code

andrepd• 8 years ago

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.

slifin• 8 years ago

Looking forward to ReasonML support

sajithdilshan• 8 years ago

This is one of the best online IDE to quickly set up a React App. Thanks for the awesome work Ives van Hoorne.

CodeSandbox

Related Stories