WebContainers: Dev environments. In your web app

by tosh • 2 years ago

148 63 2 years ago

so I'm looking at the demo at https://stackblitz.com/edit/stackblitz-webcontainer-api-star...

Alright, looks like a lot of work went into this. What's the unique use case here? Help me out. I don't really understand why people would want to write code like this.

0x1ceb00da• 2 years ago

Creating online playgrounds that execute in the users browser.

kristopolous5• 2 years ago

ok, that's a busy and crowded field with at least a dozen entrenched players: gitpod, codeanywhere, codepen, replit, jsfiddle, coder, jsbin, playcode, aws cloud9, codeenvy, github codespaces, and just plain old jupyter notebooks, just to name the ones I can think of.

Is this really just a metoo product?

rezonant3• 2 years ago

It's far beyond that. Web containers in Stackblitz is an entirely local in-browser IDE, complete with frontend and backend support, NPM, git, a full VS Code based IDE experience and end to end debugging (step right from your frontend right into your backend code). It runs (well, simulates?) HTTP and WebSockets right within the environment.

curtisblaine2• 2 years ago

Thin clients. Your workstation only needs to run a browser, all the tooling is already provided. Allows you to access your environment from anywhere.

fragmede8• 2 years ago

In this case, the environment is running locally, so while the code may be backed by cloud storage, the resources being used are the local machine.

firtoz• 2 years ago

I have a version of Anthropic Artifacts working in my project here. Claude generates the code (backend or frontend), I wrap it into a little package, boom, instant deployment.

bluelightning2k2• 2 years ago

I've always been very impressed with StackBlitz. What they've done not only here but Sandpack also. Absolutely next level.

And they do all this work then open source it instead of keeping it as a technical advantage.

Strongly recommend their blog.

Not affiliated just a fan.

QuiiBz• 2 years ago

Sandpack is made by CodeSandbox, not StackBlitz: https://github.com/codesandbox/sandpack

bluelightning2k2• 2 years ago

Thanks for pointing out my error there. Pretty big misattribution.

bberenberg• 2 years ago

Is this open source somewhere? I haven’t found it.

jFriedensreich• 2 years ago

its NOT open source. the github package just loads stuff from their servers and does not contain the actual web container code

meiraleal2• 2 years ago

I had to check again if they made it opensource or if it is still just fake marketing misleading but yeah, still the same bullshit. You didn't even take the effort to validate if your "support" is really valid.

moffkalast• 2 years ago

Dev environments? In my web app?

It's more likely than you think!

curtisblaine2• 2 years ago

There ought to be an open source version of this. Wondering if it's "just" compiling the respective binaries needed by the tool chain (node, esbuild, who knows what else) to WebAssembly and providing proxied network access (for the registry). Alternatively, wondering if this could work with the various linux-on-a-webpage demos that were recently posted here.

fragmede8• 2 years ago

That demo is really impressive. It's click, scroll, click to get to it though. I'd make it a big button on the main page with marketing copy around it.

Bonus points for also buying https://webcontainer.io/ (no s) and pointing it at the right place.

Also, this is like the better funded, more productized cousin of https://webvm.io/

nickstinemates• 2 years ago

Where/what is the demo you're referencing? I'd like to watch it.

fragmede8• 2 years ago

Not a video demo, the demo of their product, at https://webcontainer.new/

ericmsimons6• 2 years ago

Thanks for this feedback- we’ll definitely make it easier to land on the webcontainer.new demo from the homepage. I think our main concern initially was that without docs context it might be too confusing what’s going on, but I think we could find ways to ease that in that experience itself

fragmede8• 2 years ago

My eyes glazed over the docs context and scrolled until there was a bright blue button to click. If that hadn't been there I probably would have just bounced off of the page for being too wordy in a time of infinite distraction.

Personally, I'd be direct and add something to the effect of

The page that you see on the right is being rendered to your browser by an instance of vite, running on your laptop, npm and all, being served directly to your browser. This is what sets us apart from other web dev environments.

to the readme.md on webcontainers.new and to the copy directing people to click that blue button. As a sibling comment says, "looks like every other modern code playground", which is what it looks like, but it isn't. You and your team have put in a lot of hard work to differentiate on that specific thing.

Your target market is developers, which raises the bar for technical understanding. Respect your customers' intelligence and just give it to them straight.

imo. you didn't ask for suggestions but this is the Internet :)

jappgar2• 2 years ago

Your scientists were so preoccupied with whether they could that they never stopped to think if they should.

ramesh31• 2 years ago

There's a special kind of hell awaiting anyone silly enough to build anything on this.

speed_spread• 2 years ago

We've said the same thing the day Node.js was invented and look where we are now. Whatever you build based on these bad ideas _is_ that special hell.

pjmlp• 2 years ago

Keyboard doesn't echo on Android Chrome, only after return is pressed.

tcper2• 2 years ago

Good tech, but only good fit for StackBlitz.

Don't know who will need this product to run a node.js enviroment in browser.

seveibar• 2 years ago

We used this to build an interactive cli in the browser for Seam, and I’m currently working on using it to host a local typescript language server for tscircuit so that the playground has autocomplete. Imo a very useful technology

tcper2• 2 years ago

You can use xterm.js to implement interactive cli in browsers, and you can use backend language server to implement autocomplete.

xterm.js is just not so fashion.

ericmsimons6• 2 years ago

We originally thought the same but a few years back started seeing increasing demand outside of stackblitz itself.

Surprisingly a very large and growing number of use cases across interactive edu tools, AI code execution (https://webcontainers.io/ai), SaaS dev envs for end users to write code, amongst others

jrvarela56• 2 years ago

Your application and development environment (editor + 'server') are in the same runtime.

This seems important for iterating JS/TS programs ala Smalltalk.

libming_• 2 years ago

StackBlitz has always struck me as a solution in search of a problem.

Buyer beware: WebContainers is closed-source and there are hundreds of open issues from users. Most of them are ignored for weeks and months at a time as the company pivots from one thing to the next: https://github.com/stackblitz/webcontainer-core/issues

paulgb• 2 years ago

“It’s a solution in search of a problem and also has hundreds of issues from users” is kind of a funny juxtaposition, in the same sense that “nobody goes there, it’s too crowded” is.

lolinder3• 2 years ago

StackBlitz != WebContainers.

StackBlitz is another code playground.

WebContainers is a library that they've extracted from their codebase and are selling that allows other people to build full-stack code playgrounds on their sites.

ericmsimons6• 2 years ago

stackblitz ceo here, just to clarify:

we haven’t ever pivoted from webcontainers, not sure what you’re talking about there. it’s been our main thing since forever :)

stackblitz itself is a product suite built on top of webcontainers. note that many issues in the repo you linked are not for webcontainers specifically, but instead mostly for stackblitz specific functionality.

we have about 3m devs/mo using us for free on stackblitz.com, so we do the best we can for free public issue triage but do prioritize our paying customers (we are a business after all :)

koolala• 2 years ago

I wish you could make WebContainers actually an open source standard library for local sandboxed client / server coding one day. I know CORS screws everything up...

You already have the customers / platform...

ericmsimons6• 2 years ago

Hi HN! Cofounder of StackBlitz/WebContainers here, cool to wake up and see this on the front page unexpectedly :) Happy to answer any questions!

Btw one emergent use case we've seen growing rapidly has been code execution for AI agents. Would love thoughts/questions/feedback if you’re working on things in that space: https://webcontainers.io/ai

spankalee3• 2 years ago

What's the patent you mention on the site? Are any other web-based terminal, shell, or Node emulators at risk of violating it? Is it for a specific implementation technique? It's kind of scary to see in the docs, to be honest.

ericmsimons6• 2 years ago

Good question, here's the link to it: https://patents.google.com/patent/US20220417315A1/en?q=(stac...

It's somewhat specific to our use case as you'll see when you read through. A motivation for securing this was that we've had issues (one instance in particular) where we caught a direct competitor directly copy+pasting code from our compiled builds into their own competing product. Asking them nicely to stop didn't do anything, nor getting emails from our lawyers.

The main lever a startup has to solve this is to keep innovating and being the best product in the market, which is what we have done & continue to do. But having a patent is a useful lever for general deterrence from bad actors like this. (Also want to say thanks and give credit to Vinay Hiremath, cofounder of Loom, who went through similar in the early days of Loom and helped point us down the path of securing a patent)

orliesaurus• 2 years ago

Hi working on agentic code execution, can you explain why you think a webcontainer is a good and useful solution to do LLM code exec over other low level container solutions

nojvek• 2 years ago

What does webcontainers exactly mean? Browsers don't allow me to call arbitrary other urls since the called server needs to allow with cross domain request headers.

What happens if I close browser tab? does that make the webcontainer go poof? What about memory and CPU requirements?

The idea sounds like a great hack, but the whole point of cloud IDEs is that it uses someone else's resources. I could get a 64 CPU with a bunch of H100s to dev on, run some script in background, and shut it when I'm done.

spankalee3• 2 years ago

WebContainers is pretty awesome, and at this point if I were a server runtime (especially Deno and Bun), I would try to maintain a first-party web platform version for exactly the type of linkable, ephemeral, no-install, sandboxed, local dev environments of your that WebContainers provides.

I do wish this were open source, and the mention of a patent scares me - I feel like lots of people have tried this over the years, are they running afoul of some patent not fully linked to from the WebContainers site? - but I understand the investment that StackBlitz has made and the need to make money.

johnny22• 2 years ago

i don't seem to remember you being able to run these without a net connection. It not being open makes it a no go.

WebContainers: Dev environments. In your web app

Related Stories