July 13th, 2024

WebContainers: Dev environments. In your web app

WebContainers by StackBlitz transform web development with instant coding in browsers. Full-stack apps, secure Node.js projects, interactive docs, and AI-native IDEs benefit developers, educators, and industry stakeholders.

Read original articleLink Icon
WebContainers: Dev environments. In your web app

WebContainers by StackBlitz revolutionize web development by enabling instant, interactive coding experiences directly in the browser. Developers can create full-stack applications with customizable coding environments, enhancing the learning experience. The WebContainer API allows running Node.js projects in the browser securely and efficiently, benefiting various stakeholders in the industry. This technology opens up possibilities for interactive documentation, educational content, and AI-native IDEs. With support for major browsers and frameworks, WebContainers offer fast performance and ease of use. By eliminating the need for external servers, developers can build branded products seamlessly. The API supports running native package managers and setting up environments in a few simple steps. Overall, WebContainers empower developers to create rich development experiences, interactive tutorials, and AI applications while reducing server costs and accelerating product delivery.

Related

What Happens When You Put a Database in the Browser?

What Happens When You Put a Database in the Browser?

WebAssembly (Wasm) enhances browser capabilities, enabling high-performance apps like DuckDB for ad-hoc queries and Python environments. DuckDB Wasm boosts performance in interfaces like lakeFS, Evidence, and Count. MotherDuck enables local querying, emphasizing efficient data processing.

New Web Development: Or, why Copilots and chatbots are bad for modern web dev

New Web Development: Or, why Copilots and chatbots are bad for modern web dev

The analysis critiques Copilots, chatbots, and React for web development, citing slow sites, complex code, and high costs. It advocates for a shift to browser APIs, CSS, and HTML for better performance and lower expenses. Transition challenges include finding developers skilled in vanilla JavaScript. Organizations are urged to prioritize simplicity, efficiency, and core web technology training.

Developing Inside a Container

Developing Inside a Container

The Visual Studio Code Dev Containers extension allows developers to create a development environment within a container, ensuring consistent tool access and runtime stacks. Users need Docker installed and can enhance functionalities with extensions like Remote Development.

WebVM is a server-less virtual Linux environment running client-side

WebVM is a server-less virtual Linux environment running client-side

WebVM is an open-source Linux virtualization platform on GitHub, focusing on CPU and HDD compatibility. Users connect via Tailscale for networking, engaging the community through Discord and GitHub for issue tracking.

Is Mesop and Web Components the cure to Front-end fatigue?

Is Mesop and Web Components the cure to Front-end fatigue?

Mesop, a Python UI framework for AI apps, now supports Web Components. This allows fine UI control, JS library use without complex toolchains, and aims to reduce front-end fatigue. Mesop plans to enhance support with React integration and open-source components.

Link Icon 17 comments
By @libming_ - 3 months
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

By @ericmsimons - 3 months
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

By @fragmede - 3 months
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/

By @curtisblaine - 3 months
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.
By @kristopolous - 3 months
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.

By @spankalee - 3 months
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.

By @nojvek - 3 months
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.

By @bluelightning2k - 3 months
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.

By @pjmlp - 3 months
Keyboard doesn't echo on Android Chrome, only after return is pressed.
By @jrvarela56 - 3 months
Your application and development environment (editor + 'server') are in the same runtime.

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

By @johnny22 - 3 months
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.
By @tcper - 3 months
Good tech, but only good fit for StackBlitz.

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

By @jappgar - 3 months
Your scientists were so preoccupied with whether they could that they never stopped to think if they should.
By @moffkalast - 3 months
Dev environments? In my web app?

It's more likely than you think!