1<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.15.4"><link rel="canonical" href="https://blog.stackblitz.com/posts/introducing-webcontainers/"><link rel="sitemap" href="/sitemap-index.xml"><title>Introducing WebContainers: Run Node.js natively in your browser</title><meta name="title" content="Introducing WebContainers: Run Node.js natively in your browser"><meta name="description" content="Today we're excited to announce WebContainers, a new type of WebAssembly-based operating system that boots instantly and enables Node.js environments to run natively in-browser."><meta property="og:type" content="website"><meta property="og:url" content="https://blog.stackblitz.com/posts/introducing-webcontainers/"><meta property="og:title" content="Introducing WebContainers: Run Node.js natively in your browser"><meta property="og:description" content="Today we're excited to announce WebContainers, a new type of WebAssembly-based operating system that boots instantly and enables Node.js environments to run natively in-browser."><meta property="og:image" content="https://blog.stackblitz.com/posts/introducing-webcontainers/social.jpg"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://blog.stackblitz.com/posts/introducing-webcontainers/"><meta name="twitter:title" content="Introducing WebContainers: Run Node.js natively in your browser"><meta name="twitter:description" content="Today we're excited to announce WebContainers, a new type of WebAssembly-based operating system that boots instantly and enables Node.js environments to run natively in-browser."><meta name="twitter:image" content="https://blog.stackblitz.com/posts/introducing-webcontainers/social.jpg">
1<script> 2window.dataLayer = window.dataLayer || []; 3window.dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); 4</script>
4<script async src="https://www.googletagmanager.com/gtm.js?id=GTM-WM95FBXP"></script>
4<link rel="stylesheet" href="/_astro/_slug_.BnhLmJzd.css"> 5<link rel="stylesheet" href="/_astro/_slug_.DFhqW6D7.css"> 6<style>._icon_1vecz_1{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}._icon_1vecz_1._bars_1vecz_9{-webkit-mask-image:url(/icons/bars-regular.svg);mask-image:url(/icons/bars-regular.svg)}._icon_1vecz_1._books_1vecz_13{-webkit-mask-image:url(/icons/books-solid.svg);mask-image:url(/icons/books-solid.svg)}._icon_1vecz_1._chevron-right_1vecz_17{-webkit-mask-image:url(/icons/chevron-right-regular.svg);mask-image:url(/icons/chevron-right-regular.svg)}._icon_1vecz_1._magnifying-glass_1vecz_21{-webkit-mask-image:url(/icons/magnifying-glass-solid.svg);mask-image:url(/icons/magnifying-glass-solid.svg)}._icon_1vecz_1._rocket_1vecz_25{-webkit-mask-image:url(/icons/rocket-launch-solid.svg);mask-image:url(/icons/rocket-launch-solid.svg)}._icon_1vecz_1._rss_1vecz_29{-webkit-mask-image:url(/icons/rss-solid.svg);mask-image:url(/icons/rss-solid.svg)}._icon_1vecz_1._shield_1vecz_33{-webkit-mask-image:url(/icons/shield-check-sharp-solid.svg);mask-image:url(/icons/shield-check-sharp-solid.svg)}._icon_1vecz_1._spinner_1vecz_37{-webkit-mask-image:url(/icons/spinner-third-regular.svg);mask-image:url(/icons/spinner-third-regular.svg)}._icon_1vecz_1._users_1vecz_41{-webkit-mask-image:url(/icons/users-solid.svg);mask-image:url(/icons/users-solid.svg)}._icon_1vecz_1._xmark_1vecz_45{-webkit-mask-image:url(/icons/xmark-large-regular.svg);mask-image:url(/icons/xmark-large-regular.svg)}._icon_1vecz_1._discord_1vecz_49{-webkit-mask-image:url(/icons/discord.svg);mask-image:url(/icons/discord.svg)}._icon_1vecz_1._facebook_1vecz_53{-webkit-mask-image:url(/icons/facebook.svg);mask-image:url(/icons/facebook.svg)}._icon_1vecz_1._github_1vecz_57{-webkit-mask-image:url(/icons/github.svg);mask-image:url(/icons/github.svg)}._icon_1vecz_1._linkedin_1vecz_61{-webkit-mask-image:url(/icons/linkedin-in.svg);mask-image:url(/icons/linkedin-in.svg)}._icon_1vecz_1._twitter_1vecz_65{-webkit-mask-image:url(/icons/twitter.svg);mask-image:url(/icons/twitter.svg)} 7.container[data-astro-cid-scazbq23]{background-image:url(/bg/sbb-light-background-alt-img.png);background-attachment:fixed;background-size:cover}.container__content[data-astro-cid-scazbq23]{padding:80px 0;align-items:center}.container__content[data-astro-cid-scazbq23].expanded{padding-top:132px}.author-container[data-astro-cid-scazbq23]{display:flex;gap:44px}@media screen and (max-width: 640px){.author-container[data-astro-cid-scazbq23]{flex-direction:column;padding:0 32px}}@media screen and (max-width: 640px){.author-container[data-astro-cid-scazbq23]{gap:24px}}.author-image[data-astro-cid-scazbq23]{--author-image-size: 100px;width:var(--author-image-size);height:var(--author-image-size);border:solid 4px #fff;background-color:#fff;border-radius:50%;background-position:center;background-repeat:no-repeat;background-size:cover}.author-info[data-astro-cid-scazbq23]{display:flex;flex-direction:column;gap:14px;margin-top:12px}.author-name[data-astro-cid-scazbq23]{align-self:flex-start;color:var(--sbb-light-foreground-h1);font-size:20px;font-weight:500;text-decoration:none;text-underline-offset:3px;transition:.1s ease;transition-property:color}.guest-author[data-astro-cid-scazbq23]{font-size:13px;font-weight:500;background:var(--sbb-light-foreground-lighter-border);padding:6px 8px;align-self:flex-start;color:var(--sbb-light-foreground-paragraph-alt);border-radius:6px}a[data-astro-cid-scazbq23].author-name:hover{color:var(--sbb-light-foreground);text-decoration:underline}.author-bio[data-astro-cid-scazbq23]{max-width:424px;color:var(--sbb-light-foreground-paragraph-alt);font-size:16px;font-weight:500;line-height:1.6}.author-social[data-astro-cid-scazbq23]{display:flex;gap:26px;margin-top:18px}.author-social-link[data-astro-cid-scazbq23]{--author-social-link-icon-color: var(--sbb-dark-background-alt);transition:.1s ease;transition-property:background-color}.author-social-link[data-astro-cid-scazbq23]:hover{--author-social-link-icon-color: var(--sbb-light-foreground)} 8.container[data-astro-cid-w4dmpo3s]{--post-list-header-height: 48px;--post-list-gap: 32px;--post-list-columns: var(--post-columns);--post-width: calc( ( (var(--layout-content-width) - (var(--layout-content-padding) * 2)) - (var(--post-list-gap) * (var(--post-list-columns) - 1)) ) / var(--post-list-columns) );--post-image-height: calc(var(--post-width) / 2);--post-background-height-extension: calc((var(--post-image-height) / 2) + var(--post-list-header-height));position:relative;margin-bottom:72px}.container[data-astro-cid-w4dmpo3s].extend-bg:before{content:"";position:absolute;top:0;left:0;width:100%;height:var(--post-background-height-extension);background-image:url(/bg/sbb-light-background-alt-img.png);background-attachment:fixed;background-size:cover;z-index:-1}.container__content[data-astro-cid-w4dmpo3s].ignore-padding{padding-left:0;padding-right:0}.container[data-astro-cid-w4dmpo3s].extend-bg:before{content:"";position:absolute;top:0;left:0;width:100%;height:var(--post-background-height-extension);background-color:var(--sbb-light-background-alt);z-index:-1}.related-posts[data-astro-cid-w4dmpo3s]{container-type:inline-size;display:flex;flex-direction:column;width:100%}.related-posts__header[data-astro-cid-w4dmpo3s]{display:flex;align-items:baseline;gap:24px;height:var(--post-list-header-height)}.related-posts__header[data-astro-cid-w4dmpo3s] a[data-astro-cid-w4dmpo3s]{color:var(--sbb-light-foreground-link);font-size:14px;font-weight:500;text-underline-offset:3px;transition:.1s ease;transition-property:color}.related-posts__header[data-astro-cid-w4dmpo3s] a[data-astro-cid-w4dmpo3s]:hover{color:var(--sbb-light-foreground)}.related-posts__header[data-astro-cid-w4dmpo3s] h5[data-astro-cid-w4dmpo3s]{color:var(--sbb-dark-background-alt);font-size:15px;font-weight:600} 9</style> 10<link rel="stylesheet" href="/_astro/index.Cz8eRbEz.css">
10<script type="module">const l="top-nav",s="scrolling";window.onscroll=()=>{window.scrollY>=20||window.pageYOffset>=20?document.getElementById(l)?.classList.add(s):document.getElementById(l)?.classList.remove(s)}; 11</script>
11<style>p[data-astro-cid-qxdxler5]{position:relative;max-width:100%}a[data-astro-cid-qxdxler5]{margin-top:36px}img[data-astro-cid-qxdxler5]{transform-origin:top left}@media screen and (min-width: 1024px){img[data-astro-cid-qxdxler5].wide{max-width:calc(100% + 168px)!important;margin-left:-84px;border-radius:20px!important}}figcaption[data-astro-cid-qxdxler5]{color:var(--sbb-light-foreground-lighter);font-size:12px;font-weight:500} 12</style><style>.quote-container[data-astro-cid-vmcicv4o]{position:relative;display:flex;align-items:flex-start;justify-content:center;gap:64px;width:100%;margin-top:64px;padding:48px 0 72px;border:solid 2px var(--sbb-light-background-alt-darker);border-left:none;border-right:none}@media screen and (max-width: 640px){.quote-container[data-astro-cid-vmcicv4o]{flex-direction:column;gap:0}}.quote-author__img[data-astro-cid-vmcicv4o]{--quote-author-profile-height: 100px;position:relative;display:flex;flex-direction:column;min-width:var(--quote-author-profile-height)}.quote-author__img[data-astro-cid-vmcicv4o] img[data-astro-cid-vmcicv4o].profile{width:var(--quote-author-profile-height);height:100%;border-radius:calc(var(--quote-author-profile-height) / 2);overflow:hidden}.quote-author__img__logo[data-astro-cid-vmcicv4o]{--quote-author-logo-height: 24px;--quote-author-logo-padding: 24px;position:absolute;display:flex;align-items:center;justify-content:center;bottom:-6px;right:-16px;width:calc(var(--quote-author-logo-height) + var(--quote-author-logo-padding));height:calc(var(--quote-author-logo-height) + var(--quote-author-logo-padding));border-radius:50%;background-color:#fff}.quote-author__img__logo[data-astro-cid-vmcicv4o] img[data-astro-cid-vmcicv4o]{width:var(--quote-author-logo-height);height:auto;transform:translateY(1px)}.quote-content[data-astro-cid-vmcicv4o]{display:flex;flex-direction:column;gap:18px}.quote[data-astro-cid-vmcicv4o]{max-width:624px;padding:0;border:none;color:var(--sbb-light-foreground-paragraph);font-size:18px;font-weight:500;line-height:1.6}.quote p:first-child{margin-top:32px}.quote p:first-child:before{content:'"';position:absolute;margin-left:-8px}.quote p:last-child:after{content:'"';position:absolute;margin-right:-8px}.quote p+p:not(:first-child){margin-top:16px}.quote-author[data-astro-cid-vmcicv4o]{display:flex;align-items:baseline;gap:20px}.quote-author__name[data-astro-cid-vmcicv4o]{color:var(--sbb-light-foreground-paragraph-alt);font-size:13px;font-weight:700}@media screen and (max-width: 500px){.quote-author__name[data-astro-cid-vmcicv4o]{font-size:15px}}.quote-author__name[data-astro-cid-vmcicv4o]:is(a){color:var(--color-theme-dark-00)}.quote-author__subtitle[data-astro-cid-vmcicv4o]{color:var(--sbb-light-foreground-paragraph-lighter);font-size:13px;font-weight:600;text-decoration:none}@media screen and (max-width: 600px){.quote-author__subtitle[data-astro-cid-vmcicv4o]{font-size:16px}}@media screen and (max-width: 500px){.quote-author__subtitle[data-astro-cid-vmcicv4o]{font-size:14px}}.quote-author__subtitle[data-astro-cid-vmcicv4o]:is(a):hover{text-decoration:underline} 13</style></head> <body> <header class="container" id="top-nav" data-astro-cid-2w66rqv5> <div class="container__content" data-astro-cid-2w66rqv5> <nav class="nav-top" data-astro-cid-2w66rqv5> <div class="nav-top__title" data-astro-cid-2w66rqv5> <a class="nav-top__title__logo" href="https://stackblitz.com" data-astro-cid-2w66rqv5></a> <a class="nav-top__title__link" href="/" data-astro-cid-2w66rqv5>Blog</a> </div> <div class="nav-top__category-links" data-astro-cid-2w66rqv5> <ul class="_navTop__categoryLinks_1uy8v_25"><li><a href="/categories/news-and-announcements">News</a></li><li><a href="/categories/engineering">Engineering</a></li><li><a href="/categories/community-updates">Community Updates</a></li><li><a href="/posts">All Posts</a></li></ul> </div> <div class="nav-top__icon-links" data-astro-cid-2w66rqv5> <div class="_navTop__utilityLinks_1uy8v_1"><a href="/rss.xml"><div class="_icon_1vecz_1 _rss_1vecz_29" style="width:16px;height:16px;background-color:var(--sbb-light-foreground)"></div></a></div> </div> <div class="nav-top__auth-links" data-astro-cid-2w66rqv5> <div class="_navAuth_1vw7z_1"><a href="https://stackblitz.com/sign_in" class="_link_1vw7z_12 _light_1vw7z_37">Sign in</a><a href="https://stackblitz.com/register" class="_link_1vw7z_12 _accent_1vw7z_48">Get started</a></div> </div> <div class="nav-top__mobile-menu" data-astro-cid-2w66rqv5> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style>
13<script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t)},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script>
13<astro-island uid="ZMQMbB" prefix="r3" component-url="/_astro/HeaderMobile.CrT9kuid.js" component-export="HeaderMobile" renderer-url="/_astro/client.BIGLHmRd.js" props="{"data-astro-cid-2w66rqv5":[0,true]}" ssr="" client="load" opts="{"name":"HeaderMobile","value":true}" await-children=""><button class="_openMenuButton_1uy8v_59"><div class="_icon_1vecz_1 _bars_1vecz_9" style="width:18px;height:18px;background-color:var(--sbb-light-foreground)"></div></button><!--astro:end--></astro-island> </div> </nav> </div> </header> <main> <section class="container" data-astro-cid-d5f3fic4> <div class="container__content" data-astro-cid-d5f3fic4> <div class="metadata" data-astro-cid-zx3sogms> <a class="metadata__category" href="/categories/news-and-announcements" data-astro-cid-zx3sogms>News & Announcements</a> <span class="metadata__pubDate" data-astro-cid-zx3sogms><time datetime="2021-05-20T00:00:00.000Z">May 20, 2021</time></span> </div> <h1 class="title__heading" data-astro-cid-d5f3fic4>Introducing WebContainers: Run Node.js natively in your browser</h1> <div class="social-container" data-astro-cid-d5f3fic4> <a class="author" href="/authors/eric-simons" data-astro-cid-gb44knaz> <div class="author__image" style="background-image:url(/authors/eric-simons.png)" aria-hidden="true" data-astro-cid-gb44knaz></div> <div class="author__data" data-astro-cid-gb44knaz> <span class="author__name" data-astro-cid-gb44knaz>Eric Simons</span> <span class="author__title" data-astro-cid-gb44knaz>CEO</span> </div> </a> <div class="share-container" data-astro-cid-lix6xmjp> <ul data-astro-cid-lix6xmjp> <li data-astro-cid-lix6xmjp> <a href="https://twitter.com/intent/tweet?url=https://blog.stackblitz.com/posts/introducing-webcontainers" class="share-link" data-astro-cid-lix6xmjp> <div class="_icon_1vecz_1 _twitter_1vecz_65" style="width:18px;height:18px;background-color:var(--share-link-icon-color)"></div> </a> </li><li data-astro-cid-lix6xmjp> <a href="https://www.facebook.com/sharer.php?u=https://blog.stackblitz.com/posts/introducing-webcontainers" class="share-link" data-astro-cid-lix6xmjp> <div class="_icon_1vecz_1 _facebook_1vecz_53" style="width:18px;height:18px;background-color:var(--share-link-icon-color)"></div> </a> </li><li data-astro-cid-lix6xmjp> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://blog.stackblitz.com/posts/introducing-webcontainers" class="share-link" data-astro-cid-lix6xmjp> <div class="_icon_1vecz_1 _linkedin_1vecz_61" style="width:18px;height:18px;background-color:var(--share-link-icon-color)"></div> </a> </li> </ul> </div> </div> </div> <div class="hero-image" data-astro-cid-d5f3fic4> <img src="/posts/introducing-webcontainers/hero.png" aria-hidden="true" data-astro-cid-d5f3fic4> </div> </section> <section class="container" data-astro-cid-d44harhd> <div class="container__content post-body" data-astro-cid-d44harhd> <p>Update: Since the publication of this blog post in May 2021, <a href="https://blog.stackblitz.com/posts/webcontainers-out-of-beta/">WebContainers became stable</a> and <a href="https://blog.stackblitz.com/posts/webcontainers-are-now-supported-on-firefox/">available on Firefox</a>. Most importantly, <strong>we released the <a href="https://webcontainers.io">WebContainers API</a></strong> for you all to enjoy! You can even self-host the API with StackBlitz Enterprise. <a href="https://stackblitz.com/enterprise-contact">Get in touch to learn more.</a></p> 14<hr/> 15<p>A few years ago we realized that the web was heading towards a key inflection point. The advent of WebAssembly and new <a href="https://web.dev/fugu-status/">capabilities APIs</a> made it seem possible to write a WebAssembly-based operating system powerful enough to run Node.js, entirely inside your browser. We envisioned a superior development environment that was <strong>faster</strong>, <strong>more secure</strong> and <strong>consistent</strong> than local environments, to enable seamless code collaboration without ever having to set up a local environment.</p> 16<p>This sounded far-fetched. But if the web now runs full environments for <a href="https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/">graphic designers</a>, <a href="https://web.dev/clipchamp/">video editors</a>
16, and <a href="https://workspaceupdates.googleblog.com/2021/05/Google-Docs-Canvas-Based-Rendering-Update.html"> rich document editing</a>, we wondered: <strong>is it finally possible for developers to <em>use</em> the web to <em>build</em> the web?</strong></p> 17<p>We decided to give it a shot. We hoped for the best, and expected the worst. Two years later (time flies ð ), the result has shaped up to be unexpectedly phenomenal.</p> 18<h3 id="today-were-excited-to-announce-webcontainers">Today weâre excited to announce <strong>WebContainers</strong>.</h3> 19<p>WebContainers allow you to create fullstack Node.js environments that boot in milliseconds and are immediately online & link shareableâin just one click. The environment loads with VS Codeâs powerful editing experience, a full terminal, npm and more. It also runs <em>entirely inside your browser</em>, which yields some key benefits:</p> 20<ul> 21<li><strong>Faster than your local environment</strong>. Builds complete up to 20% faster and package installs complete >= 5x faster than yarn/npm.</li> 22<li><strong>Node.js debugging in-browser</strong>. Seamless integration with Chrome DevTools enables native back-end debugging, no installs or extensions required.</li> 23<li><strong>Secure by default</strong>. All code execution happens <em>inside</em> the browserâs security sandbox, not on remote VMs or local binaries.</li> 24</ul> 25<p target="_blank" rel="nofollow" data-astro-cid-qxdxler5> <img class="wide" src="/posts/introducing-webcontainers/1.webp" alt="Instant fullstack Node.js environments" style="transform:scale(1)" data-astro-cid-qxdxler5> </p> 26<blockquote> 27<p>âThatâs right: the Node.js runtime itself is running natively, inside the browser, for the first time ever.â</p> 28</blockquote> 29<p><strong>Again, these environments are not running on remote servers</strong>. Instead, each environment is completely contained within your web browser. Thatâs right: the Node.js runtime itself is running natively, inside the browser, for the first time ever.</p> 30<p>You can try it out for yourself over at StackBlitz.com or by clicking one of the starter projects below.</p> 31<div class="emphasis text-center oblique"><p>Boot a Node.js project in your browser in milliseconds (donât blink!):</p></div> 32<ul class="sb-blog-buttons"><li><a href="https://stackblitz.com/fork/nextjs" target="_blank" class="nextjs">Next.js</a></li><li><a href="https://stackblitz.com/fork/graphql" target="_blank" class="graphql">GraphQL</a></li><li><a href="https://stackblitz.com/fork/http-server" target="_blank" class="node">HTTP Server</a></li><li><a href="https://stackblitz.com/fork/node" target="_blank" class="node">Node.js Starter</a></li></ul> 33<p>As of todayâs launch, WebContainers are now in <strong>public beta</strong>. Current support includes Next.js, GraphQL, and Vanilla Node.js and weâre working with additional open source projects to expand support. (If you want to work with us check out <a href="https://github.com/stackblitz/webcontainer-core/blob/main/Supported_frameworks.md">our repo</a>).</p> 34<h2 id="why">Why?</h2> 35<p>Setting up local environments is a huge buzzkillâespecially if you want to rapidly prototype a cool idea, try out a new open source library, create a bug reproduction or collaborate with a coworker (âhey, can you check out this branch locally really quick?â ð). This problem is more common than ever as web development moves towards fullstack SSR and SSG toolchains like Next.js.</p> 36<p>Running user-submitted code for bug reproductions is also becoming a <a href="https://www.kb.cert.org/vuls/id/319816">major security risk</a> for open source maintainers and <a href="https://stackblitz.com/enterprise">Fortune 100 companies</a> alike, and these types of supply chain attacks are <a href="https://www.zdnet.com/article/supply-chain-hacking-attacks-government-eyes-new-rules-to-tighten-security/">on the rise</a>.</p> 37<p>StackBlitz solves these problems by leveraging the decades of speed and security innovations built into your browser. All computation in StackBlitz happens instantly within the browser security sandbox and cannot break out to your local machine. This model also unlocks some key development & debugging benefits (more on these in a sec).</p> 38<h4 id="what-about-code-spacessandboxrepls">
38What about Code Spaces/Sandbox/Repls/â¦?</h4> 39<p>Legacy online IDEs run your entire dev environment on a remote server and stream the results back across the internet to your browser. The problem with this approach is that it yields few security benefits and provides a worse experience than your local machine in nearly every way: it takes minutes to spin up containers, is prone to network latency, cannot work offline, often results in network timeouts, debugging frozen/broken containers is nearly impossible, and hitting refresh just reconnects you to the broken container again.</p> 40<div class="quote-container" data-astro-cid-vmcicv4o> <div class="quote-author__img" data-astro-cid-vmcicv4o> <img src="/quotes/profile/tom_preston_werner.png" class="profile" data-astro-cid-vmcicv4o> <div class="quote-author__img__logo" data-astro-cid-vmcicv4o> <img src="/quotes/logos/github.svg" data-astro-cid-vmcicv4o> </div> </div> <div class="quote-content" data-astro-cid-vmcicv4o> <div class="quote" data-astro-cid-vmcicv4o> <p>StackBlitz is the first online IDE whose compute model makes sense to me.</p> </div> <div class="quote-author" data-astro-cid-vmcicv4o> <span class="quote-author__name" data-astro-cid-vmcicv4o>Tom Preston-Werner</span> <span class="quote-author__subtitle" data-astro-cid-vmcicv4o>founder of GitHub & investor in StackBlitz</span> </div> </div> </div> 41<h2 id="unleashing-the-power-of-your-browser">Unleashing the power of your browser.</h2> 42<h3 id="seamless-nodejs-debugging-with-chrome-devtools">Seamless Node.js debugging with Chrome DevTools.</h3> 43<p>It turns out, browsers are really good at debugging Javascript. Shocking, I know ;) By executing Node.js inside the browser, the integration with Chrome DevTools âjust worksâ out of the box. No installs, no extensions, just <strong>native back-end debugging</strong> right in the browser:</p> 44<p><img src="/posts/introducing-webcontainers/4.webp" alt="Debug Node.js code with Chrome DevTools"/></p> 45<div class="quote-container" data-astro-cid-vmcicv4o> <div class="quote-author__img" data-astro-cid-vmcicv4o> <img src="/quotes/profile/guillermo_rauch.jpg" class="profile" data-astro-cid-vmcicv4o> <div class="quote-author__img__logo" data-astro-cid-vmcicv4o> <img src="/quotes/logos/vercel.svg" data-astro-cid-vmcicv4o> </div> </div> <div class="quote-content" data-astro-cid-vmcicv4o> <div class="quote" data-astro-cid-vmcicv4o> <p>Being able to leverage your browserâs built in capabilities to develop and debug Next.js applications is a game changer.</p><p>Weâre excited to partner with the StackBlitz team to make Next.js and Vercel more accessible to developers.</p> </div> <div class="quote-author" data-astro-cid-vmcicv4o> <span class="quote-author__name" data-astro-cid-vmcicv4o>Guillermo Rauch</span> <span class="quote-author__subtitle" data-astro-cid-vmcicv4o>founder of Vercel & creator of Next.js</span> </div> </div> </div> 46<h3 id="run-servers-in-your-browser">Run servers. In your browser.</h3> 47<p>Yes, actually. WebContainers include a virtualized TCP network stack thatâs mapped to your browserâs ServiceWorker API, enabling you to instantly create live Node.js servers on-demand that continue to work even when you go offline. Because it runs entirely within the browser security sandbox, server responses have <em>less latency than localhost</em> (!) and protects your web servers from localhost scraping attacks:</p> 48<p><img src="/posts/introducing-webcontainers/3.webp" alt="Run API servers in your browsers"/></p> 49<h3 id="zero-footprint-boots-in-milliseconds">Zero footprint. Boots in milliseconds.</h3> 50<p>Browsers are incredibly fast at executing Javascript and WebAssembly. We leverage this to create an instant development OS that uses no server resources, and doesnât create a <code>node_modules</code> black hole on your computer.</p> 51<h4 id="a-fresh-environment-on-every-page-load">A fresh environment on every page load.</h4> 52<p>Goodbye, <code>rm -rf node_modules</code>! WebContainerâs built in npm client is so fast that it runs a fresh install on every page load ensuring you get a clean environment every single time. If something <em>does</em> goes wrong with your environment, you can get back to a clean state the same way you do any other web app: hit the refresh button.</p> 53<p><img src="/posts/introducing-webcontainers/2.webp" alt="Fresh environments on page load"/></p> 54<h3 id="zero-latency-works-offline">Zero latency. Works offline.</h3> 55<p>If the work-from-home pivot has taught us anything, itâs that network blips happenâoften. ISPs go downâa lot. With StackBlitz you can keep working, without an internet connection, regardless of whether youâre on a train, in a plane, or backseat uber-ing in the rain:</p> 56<p><img src="/posts/introducing-webcontainers/5.webp" alt="Works offline"/></p> 57<h3 id="secure-by-default">Secure by default.</h3> 58<p>With StackBlitzâs novel compute model, 100% of code execution occurs in the browser security sandbox. This results in a much faster and <em>less</em> restrictive development environment than local while at the same time delivering far <em>more</em> security, a very rare combination.</p> 59<p>In fact, the default security posture is so solid, that our embedded package manager is the <a href="https://twitter.com/samccone/status/1395421621528064003">first publicly available tool</a> that solves the long unaddressed npm vulnerability Sam Saccone discovered <a href="https://www.kb.cert.org/vuls/id/319816">over five years ago</a>.</p> 60<h2 id="lets-pause-for-a-sec">Letâs pause for a sec.</h2> 61<h2 id="because-this-is-where-the-story-gets-really-mind-bending">Because this is where the story gets really mind bending.</h2>
62<div class="quote-container" data-astro-cid-vmcicv4o> <div class="quote-author__img" data-astro-cid-vmcicv4o> <img src="/quotes/profile/dion_almaer.jpg" class="profile" data-astro-cid-vmcicv4o> <div class="quote-author__img__logo" data-astro-cid-vmcicv4o> <img src="/quotes/logos/google.svg" data-astro-cid-vmcicv4o> </div> </div> <div class="quote-content" data-astro-cid-vmcicv4o> <div class="quote" data-astro-cid-vmcicv4o> <p>At Google I/O, we were excited to show how StackBlitz is using the latest web capabilities to deliver an experience that blurs web apps and desktop apps.</p> </div> <div class="quote-author" data-astro-cid-vmcicv4o> <span class="quote-author__name" data-astro-cid-vmcicv4o>Dion Almaer</span> <span class="quote-author__subtitle" data-astro-cid-vmcicv4o>Director of Engineering on Google Chrome</span> </div> </div> </div> 63<p>Whatâs the difference between a âwebâ app and a ânativeâ app? The Chrome team has been shipping new capabilities APIs to close this gap and the delta is rapidly approaching zero.</p> 64<h3 id="desktop-grade-editing-instant-desktop-app-install">Desktop grade editing. Instant desktop app install.</h3> 65<p>Thanks to Chromeâs PWA functionality, installing StackBlitz is as simple as a single click. Milliseconds later you have a desktop IDE you can launch from your dock. The keybindings you rely on for daily productivity like CMD + W and CMD + T âjust workâ. Additionally, just like on local, you have the ability to open & debug your dev servers in a completely separate window.</p> 66<p><img src="/posts/introducing-webcontainers/6.webp" alt="Desktop PWA"/></p> 67<h3 id="read-and-write-from-your-local-filesystem">Read and write from your local filesystem.</h3> 68<p>The Chrome team recently shipped the <a href="https://web.dev/file-system-access/">File System Access API</a>. This gives PWAâs the ability to request persistent read and write access to portions of your local file system. Paired with StackBlitz WebContainers, this hints at a potential future without the need for node, npm, git, VS Code or anything else installed on your hard drive. You just need a web browser:</p> 69<p target="_blank" rel="nofollow" data-astro-cid-qxdxler5> <img class="wide" src="/posts/introducing-webcontainers/7.webp" alt="Native file system access" style="transform:scale(1)" data-astro-cid-qxdxler5> </p> 70<p><em>Trick question: which one of these is StackBlitz, and which one is actually VS Code?</em> ð</p> 71<h2 id="whats-next">Whatâs next?</h2> 72<p>Weâre spending the next quarter or two in beta as we <a href="https://github.com/stackblitz/webcontainer-core/blob/main/Supported_frameworks.md">work with open source maintainers</a> to bring full compatibility to their userbases and stabilize the core WebContainer technology. Whatâs coming after that is a fully-featured StackBlitz v2.</p> 73<p>Wouldnât it be great if you could:</p> 74<ul> 75<li>Open environments (editor + live preview!) on every PR. You can browse, play, test, and thus perform a really solid code review, without closing other projects youâre working on.</li> 76<li>Check out multiple branches at the same time to compare them side by side. (Would you ever consider that for a local environment? In StackBlitz it means just opening a new tab).</li> 77<li>Update your Docusaurus documentation or Gatsby blog right from the browser.</li> 78<li>Learn literally any JavaScript front-end or back-end framework without installing a single thing!</li> 79</ul> 80<h4 id="develop-preview-ship-ï¸">Develop. Preview. Ship. <strong>â¾ï¸</strong></h4> 81<p>Weâve also barely started scratching the surface of our partnership with Vercel and Next.js. Get ready for a seamless development experience like youâve never seen (get early access <a href="https://stackblitz.com/codeflow">here</a>).</p> 82<h2 id="the-future-of-software-development-is-bright">The future of software development is bright.</h2> 83<p>Much remains to be done, but we can now confidently say that a future free from local instances of node, npm, git, and VS Code is a tangible possibility, and even enable the worldâs software to run in places it couldnât before.</p> 84<p>Imagine a future where you can run WebContainers at the edge on platforms like <a href="https://workers.cloudflare.com/">Cloudflare Workers</a>, or entire development environments natively on an iPad. How about running your favorite VS Code extensions, or running non-web native languages like Python, Java, or R in the browser via <a href="https://wasi.dev/">WASI</a>? There are many unknowns still to be uncovered and resolved, but we believe the future opportunities for this technology are enormous.</p> 85<p>These things might seem a little crazy. And there are many unknown unknowns. But we think this new future deserves a shot. Because, who knows? It could end up being <strong>unexpectedly phenomenal</strong>.</p> 86<hr/> 87<p>Thanks for reading! Follow us on <a href="https://twitter.com/stackblitz">Twitter</a> to stay in the loop on all the exciting updates. Our core team is doing live Q&A on Twitter Spaces today and tommorrow (5/20 & 5/21).</p> 88<p>If youâre curious to learn more about WebContainer and how to get involved, check out the <a href="https://github.com/stackblitz/webcontainer-core/blob/main/Supported_frameworks.md">core WebContainer WG repo</a>. You can also learn more about the origin story and deeper technical details on this <a href="https://www.youtube.com/watch?v=5F9qH-ea5Qk">recent podcast episode</a>.</p> 89<p>Thank you to our partners at Vercel & Google, our <a href="https://stackblitz.com/enterprise">customers</a>, and the millions of developers who use StackBlitz every month.</p> 90<p>Like what you see and want to help us progress this vision for the future of web development? Go to <a href="https://stackblitz.com">stackblitz.com</a> and help us refine the Next.js beta and <a href="https://github.com/stackblitz/webcontainer-core">provide feedback</a>. Partner with us to <a href="https://github.com/stackblitz/webcontainer-core">bring compatibility to your favorite open source library</a>. Get involved in helping <a href="https://github.com/stackblitz/webcontainer-core">convert the worldâs native binaries to WebAssembly</a>. Come join the <a href="https://stackblitz.com/careers">StackBlitz team</a>. Or, just tell your friends about the fastest, most secure & consistent web development environment that runs natively in the browser!</p> 91<p>Finally, all my thanks and gratitude goes to the amazing team at StackBlitz who are working tirelessly to make this project a reality ⤠Letâs go!</p> </div> </section> <section class="container" data-astro-cid-vvhf3lao><div class="container__content" data-astro-cid-vvhf3lao><div class="tag_container" data-astro-cid-vvhf3lao><span data-astro-cid-vvhf3lao>Tags:</span><ul data-astro-cid-vvhf3lao><li data-astro-cid-vvhf3lao><a href="/tags/javascript ecosystem" data-astro-cid-vvhf3lao>Javascript Ecosystem</a></li><li data-astro-cid-vvhf3lao><a href="/tags/next.js" data-astro-cid-vvhf3lao>Next.js</a></li><li data-astro-cid-vvhf3lao><a href="/tags/stackblitz" data-astro-cid-vvhf3lao>StackBlitz</a></li><li data-astro-cid-vvhf3lao><a href="/tags/webcontainers" data-astro-cid-vvhf3lao>WebContainers</a></li></ul></div></div></section> <section class="container" data-astro-cid-scazbq23> <div class="container__content default" data-astro-cid-scazbq23> <div class="author-container" data-astro-cid-scazbq23> <div class="author-image" style="background-image:url(/authors/eric-simons.png)" aria-hidden="true" data-astro-cid-scazbq23></div> <div class="author-info" data-astro-cid-scazbq23> <a class="author-name" href="/authors/eric-simons" data-astro-cid-scazbq23>Eric Simons</a> <div class="author-bio" data-astro-cid-scazbq23> CEO at StackBlitz making web development fast & secure. Viva la Web! </div> <div class="author-social" data-astro-cid-scazbq23> <a class="author-social-link" href="https://twitter.com/ericsimons40" target="_blank" rel="nofollow" data-astro-cid-scazbq23> <div class="_icon_1vecz_1 _twitter_1vecz_65" style="width:24px;height:24px;background-color:var(--author-social-link-icon-color)"></div> </a> </div> </div> </div> </div> </section> <div class="related-posts-container" data-astro-cid-wgtzg7qq> <section class="container extend-bg" style="--post-columns:3" data-astro-cid-w4dmpo3s> <div class="container__content " data-astro-cid-w4dmpo3s> <div class="related-posts" data-astro-cid-w4dmpo3s> <div class="related-posts__header" data-astro-cid-w4dmpo3s> <h5 data-astro-cid-w4dmpo3s>More posts by Eric</h5> <a href="/authors/eric-simons" data-astro-cid-w4dmpo3s>View all</a> </div> <div class="post-list show__meta" data-astro-cid-csj4u5ke> <div class="post-list__post" data-astro-cid-csj4u5ke> <a class="post__image" href="/posts/unbundling-the-js-ecosystem/" aria-hidden="true" data-astro-cid-csj4u5ke> <img src="/_astro/hero.B3pZchEe_ZNdfcS.jpg" alt="" style="aspect-ratio:2" data-astro-cid-csj4u5ke width="800" height="400" loading="lazy" decoding="async"> </a> <div class="post__content" data-astro-cid-csj4u5ke> <div class="post__meta" data-astro-cid-csj4u5ke> <a href="/categories/news-and-announcements" class="post__meta__category titleShort" data-astro-cid-csj4u5ke> <span class="titleShort" data-astro-cid-csj4u5ke>News</span> <span class="title" data-astro-cid-csj4u5ke>News & Announcements</span> </a> </div> <a class="post__title" href="/posts/unbundling-the-js-ecosystem/" data-astro-cid-csj4u5ke>Unbundling the JavaScript ecosystem</a> <p class="post__description" data-astro-cid-csj4u5ke>Weâre excited to welcome VoidZero. Their work in Rolldown, Oxc, and Vite will have a profou
91nd effect on the Web ecosystem.</p> </div> </div><div class="post-list__post" data-astro-cid-csj4u5ke> <a class="post__image" href="/posts/viteconf-2024/" aria-hidden="true" data-astro-cid-csj4u5ke> <img src="/_astro/hero.D7P-OZIY_ZyFDUl.jpg" alt="" style="aspect-ratio:2" data-astro-cid-csj4u5ke width="800" height="400" loading="lazy" decoding="async"> </a> <div class="post__content" data-astro-cid-csj4u5ke> <div class="post__meta" data-astro-cid-csj4u5ke> <a href="/categories/news-and-announcements" class="post__meta__category titleShort" data-astro-cid-csj4u5ke> <span class="titleShort" data-astro-cid-csj4u5ke>News</span> <span class="title" data-astro-cid-csj4u5ke>News & Announcements</span> </a> </div> <a class="post__title" href="/posts/viteconf-2024/" data-astro-cid-csj4u5ke>Get ready for ViteConf 2024</a> <p class="post__description" data-astro-cid-csj4u5ke>Join us for ViteConfâs third edition!</p> </div> </div><div class="post-list__post" data-astro-cid-csj4u5ke> <a class="post__image" href="/posts/what-is-vite-introduction/" aria-hidden="true" data-astro-cid-csj4u5ke> <img src="/_astro/hero.B3pZchEe_ZNdfcS.jpg" alt="" style="aspect-ratio:2" data-astro-cid-csj4u5ke width="800" height="400" loading="lazy" decoding="async"> </a> <div class="post__content" data-astro-cid-csj4u5ke> <div class="post__meta" data-astro-cid-csj4u5ke> <a href="/categories/tools-and-services" class="post__meta__category" data-astro-cid-csj4u5ke> <span class="title" data-astro-cid-csj4u5ke>Tools & Services</span> </a> </div> <a class="post__title" href="/posts/what-is-vite-introduction/" data-astro-cid-csj4u5ke>What is Vite (and why is it so popular)?</a> <p class="post__description" data-astro-cid-csj4u5ke>At StackBlitz, we're not shy about how much we love Vite. Here's what you need to know about the next-generation Javascript build tool.</p> </div> </div> </div> </div> </div> </section> <section class="container " style="--post-columns:4" data-astro-cid-w4dmpo3s> <div class="container__content " data-astro-cid-w4dmpo3s> <div class="related-posts" data-astro-cid-w4dmpo3s> <div class="related-posts__header" data-astro-cid-w4dmpo3s> <h5 data-astro-cid-w4dmpo3s>Related Posts</h5> <a href="/categories/news-and-announcements" data-astro-cid-w4dmpo3s>View all from <strong>News</strong></a> </div> <div class="post-list" data-astro-cid-csj4u5ke> <div class="post-list__post" data-astro-cid-csj4u5ke> <a class="post__image" href="/posts/cloudflare-backing-pkg-pr-new-data-infrastructure/" aria-hidden="true" data-astro-cid-csj4u5ke> <img src="/_astro/hero.DlzE8cR7_2miF15.jpg" alt="" style="aspect-ratio:2" data-astro-cid-csj4u5ke width="800" height="400" loading="lazy" decoding="async"> </a> <div class="post__content" data-astro-cid-csj4u5ke> <a class="post__title" href="/posts/cloudflare-backing-pkg-pr-new-data-infrastructure/" data-astro-cid-csj4u5ke>Cloudflare is now backing pkg.pr.newâs data infrastructure!</a> <p class="post__description" data-astro-cid-csj4u5ke>We are thrilled to announce that Cloudflare is backing pkg.pr.newâs data infrastructure, enabling us to sustainably scale preview package releases for the open source community and onboard even more projects.</p> <a href="/authors/amirsakhravi" class="post__author" data-astro-cid-csj4u5ke> <div class="post__author__container" data-astro-cid-csj4u5ke> <span class="post__author__name" data-astro-cid-csj4u5ke>Amir Hossein Sakhravi</span> </div> </a> </div> </div><div class="post-list__post" data-astro-cid-csj4u5ke> <a class="post__image" href="/posts/bolt-100k-oss-fund/" aria-hidden="true" data-astro-cid-csj4u5ke> <img src="/_astro/hero.Cn1TnLmU_1hEmBN.jpg" alt="" style="aspect-ratio:2" data-astro-cid-csj4u5ke width="800" height="400" loading="lazy" decoding="async"> </a> <div class="post__content" data-astro-cid-csj4u5ke> <a class="post__title" href="/posts/bolt-100k-oss-fund/" data-astro-cid-csj4u5ke>Bolt 100K Open Source Fund</a> <p class="post__description" data-astro-cid-csj4u5ke>We're doubling down on our support to Open Source in 2025 with a 100K fund targeted at web infrastru
91cture and Bolt dependencies.</p> <a href="/authors/patak" class="post__author" data-astro-cid-csj4u5ke> <div class="post__author__container" data-astro-cid-csj4u5ke> <span class="post__author__name" data-astro-cid-csj4u5ke>Matias Capeletto</span> </div> </a> </div> </div><div class="post-list__post" data-astro-cid-csj4u5ke> <a class="post__image" href="/posts/viteconf-2024-recap/" aria-hidden="true" data-astro-cid-csj4u5ke> <img src="/_astro/hero.WoxfdrKF_Z1kuxUA.jpg" alt="" style="aspect-ratio:2" data-astro-cid-csj4u5ke width="800" height="400" loading="lazy" decoding="async"> </a> <div class="post__content" data-astro-cid-csj4u5ke> <a class="post__title" href="/posts/viteconf-2024-recap/" data-astro-cid-csj4u5ke>ViteConf 2024 was a blast</a> <p class="post__description" data-astro-cid-csj4u5ke>The third edition of ViteConf was another incredible community party. ViteConf 24 showed how much the Vite Ecosystem keeps growing and evolving.</p> <a href="/authors/patak" class="post__author" data-astro-cid-csj4u5ke> <div class="post__author__container" data-astro-cid-csj4u5ke> <span class="post__author__name" data-astro-cid-csj4u5ke>Matias Capeletto</span> </div> </a> </div> </div><div class="post-list__post" data-astro-cid-csj4u5ke> <a class="post__image" href="/posts/stackblitz-joins-osspledge/" aria-hidden="true" data-astro-cid-csj4u5ke> <img src="/_astro/hero.B9WDnqpV_ZLJYR4.jpg" alt="" style="aspect-ratio:2" data-astro-cid-csj4u5ke width="800" height="400" loading="lazy" decoding="async"> </a> <div class="post__content" data-astro-cid-csj4u5ke> <a class="post__title" href="/posts/stackblitz-joins-osspledge/" data-astro-cid-csj4u5ke>StackBlitz is joining the Open Source Pledge</a> <p class="post__description" data-astro-cid-csj4u5ke>We're excited to announce that StackBlitz is joining the Open Source Pledge, a commitment to support Open Source projects and the developers who maintain them.</p> <a href="/authors/patak" class="post__author" data-astro-cid-csj4u5ke> <div class="post__author__container" data-astro-cid-csj4u5ke> <span class="post__author__name" data-astro-cid-csj4u5ke>Matias Capeletto</span> </div> </a> </div> </div> </div> </div> </div> </section> </div> </main> <section class="container" data-astro-cid-xhq7nhw4> <div class="container__content" data-astro-cid-xhq7nhw4> <div class="section-title" data-astro-cid-xhq7nhw4> <img src="/logo/bolt-color.svg" data-astro-cid-xhq7nhw4> <h5 data-astro-cid-xhq7nhw4>Explore more from StackBlitz</h5> </div> <div class="explore-links" data-astro-cid-xhq7nhw4> <div class="explore-link" data-astro-cid-xhq7nhw4> <div class="_icon_1vecz_1 _users_1vecz_41" style="width:20px;height:20px;background-color:#CA8CFA"></div> <span class="explore-link__title" data-astro-cid-xhq7nhw4>Join the Community</span> <span class="explore-link__description" data-astro-cid-xhq7nhw4>Get a hand, lend a hand, share your projects and be part of our growing community of developers.</span> <a href="https://discord.gg/stackblitz" target="_blank" rel="nofollow" data-astro-cid-xhq7nhw4>Join the Discord</a> </div><div class="explore-link" data-astro-cid-xhq7nhw4> <div class="_icon_1vecz_1 _shield_1vecz_33" style="width:20px;height:20px;background-color:#BBE24A"></div> <span class="explore-link__title" data-astro-cid-xhq7nhw4>Enterprise Server</span> <span class="explore-link__description" data-astro-cid-xhq7nhw4>The power of StackBlitz behind your firewall.</span> <a href="https://stackblitz.com/enterprise" target="_blank" rel="nofollow" data-astro-cid-xhq7nhw4>Contact Sales</a> </div><div class="explore-link" data-astro-cid-xhq7nhw4> <div class="_icon_1vecz_1 _books_1vecz_13" style="width:20px;height:20px;background-color:#FF8D69"></div> <span class="explore-link__title" data-astro-cid-xhq7nhw4>Documentation</span> <span class="explore-link__description" data-astro-cid-xhq7nhw4>Learn StackBlitz in-depth, integrate into your workflows, and build your own apps on top of WebContainer.</span> <a href="https://developers.stackblitz.com" target="_blank" rel="nofollow" data-astro-cid-xhq7nhw4>Browse the docs</a> </div><div class="explore-link" data-astro-cid-xhq7nhw4> <div class="_icon_1vecz_1 _rocket_1vecz_25" style="width:20px;height:20px;background-color:#8ED6FF"></div> <span class="explore-link__title" data-astro-cid-xhq7nhw4>Work with us!</span> <span class="explore-link__description" data-astro-cid-xhq7nhw4>Help make the world's software faster and more secure.</span> <a href="https://stackblitz.com/careers" target="_blank" rel="nofollow" data-astro-cid-xhq7nhw4>Check out open positions</a> </div> </div> </div> </section> <section class="container" id="stackblitz-updates" data-astro-cid-62cl7j3s> <div class="container__content" data-astro-cid-62cl7j3s> <img src="/logo/bolt-comment.svg" data-astro-cid-62cl7j3s> <h2 data-astro-cid-62cl7j3s>Subscribe to StackBlitz Updates</h2> <p data-astro-cid-62cl7j3s>A newsletter from StackBlitz covering engineering achievements, product features, and updates from the community.</p> <astro-island uid="20QcG2" prefix="r12" component-url="/_astro/MailingListSignupForm.CrzRO5HJ.js" component-export="MailingListSignupForm" renderer-url="/_astro/client.BIGLHmRd.js" props="{"campaignId":[0,3],"data-astro-cid-62cl7j3s":[0,true]}" ssr="" client="load" opts="{"name":"MailingListSignupForm","value":true}" await-children=""><form novalidate="" class="_form_3 _form _inline-form _inline-style _dark _signupForm_fvfkp_1" id="_form_3_"><input type="hidden" name="u" value="3"/><input type="hidden" name="f" value="3"/><input type="hidden" name="s"/>
91<input type="hidden" name="c" value="0"/><input type="hidden" name="m" value="0"/><input type="hidden" name="act" value="sub"/><input type="hidden" name="v" value="2"/><label class="_signupForm__label_fvfkp_20"><input type="text" id="email" name="email" placeholder="Your email" class="_signupForm__input_fvfkp_44"/><button type="submit" id="_form_3_submit" class="_signupForm__button_fvfkp_77 _untouched_fvfkp_100" disabled="">Subscribe</button></label></form><!--astro:end--></astro-island> </div> </section> 92 <section class="container" data-astro-cid-au4xujw5> <div class="container__content" data-astro-cid-au4xujw5> <div class="p-content" data-astro-cid-au4xujw5> <h2 data-astro-cid-au4xujw5>Using StackBlitz at work?</h2> <p data-astro-cid-au4xujw5>Create in-browser preview apps for every issue or pull request, share private templates with your org, manage your design system with zero overhead, and more.</p> <a href="https://stackblitz.com/pricing" data-astro-cid-au4xujw5> <div class="_icon_1vecz_1 _users_1vecz_41" style="width:20px;height:20px;background-color:var(--link-icon-color)"></div> Try StackBlitz Teams </a> </div> </div> </section> <footer class="container" data-astro-cid-ak3upacl> <div class="container__content" data-astro-cid-ak3upacl> <div class="footer-container" data-astro-cid-ak3upacl> <img class="footer__logo" src="/logo/stackblitz-logo-color.svg" data-astro-cid-ak3upacl> <div class="footer__link-groups" data-astro-cid-ak3upacl> <div class="footer__link-group" data-astro-cid-ak3upacl> <span class="link-group__heading" data-astro-cid-ak3upacl>Products</span> <ul class="link-group__links" data-astro-cid-ak3upacl> <li data-astro-cid-ak3upacl> <a class="link-group__link" href="https://stackblitz.com/codeflow" data-astro-cid-ak3upacl>Codeflow</a> </li><li data-astro-cid-ak3upacl> <a class="link-group__link" href="https://stackblitz.com/enterprise" data-astro-cid-ak3upacl>Enterprise Server</a> </li><li data-astro-cid-ak3upacl> <a class="link-group__link" href="https://webcontainers.io" data-astro-cid-ak3upacl>WebContainer API</a> </li><li data-astro-cid-ak3upacl> <a class="link-group__link" href="https://developer.stackblitz.com/codeflow/integrating-web-publisher" data-astro-cid-ak3upacl>Web Publisher</a> </li> </ul> </div><div class="footer__link-group" data-astro-cid-ak3upacl> <span class="link-group__heading" data-astro-cid-ak3upacl>Platform</span> <ul class="link-group__links" data-astro-cid-ak3upacl> <li data-astro-cid-ak3upacl> <a class="link-group__link" href="https://stackblitz.com/membership" data-astro-cid-ak3upacl>Pricing</a> </li> </ul> </div><div class="footer__link-group" data-astro-cid-ak3upacl> <span class="link-group__heading" data-astro-cid-ak3upacl>Support</span> <ul class="link-group__links" data-astro-cid-ak3upacl> <li data-astro-cid-ak3upacl> <a class="link-group__link" href="https://discord.gg/stackblitz" data-astro-cid-ak3upacl>Community</a> </li><li data-astro-cid-ak3upacl> <a class="link-group__link" href="https://developer.stackblitz.com" data-astro-cid-ak3upacl>Docs</a> </li> </ul> </div><div class="footer__link-group" data-astro-cid-ak3upacl> <span class="link-group__heading" data-astro-cid-ak3upacl>Company</span> <ul class="link-group__links" data-astro-cid-ak3upacl> <li data-astro-cid-ak3upacl> <a class="link-group__link" href="/" data-astro-cid-ak3upacl>Blog</a> </li><li data-astro-cid-ak3upacl> <a class="link-group__link" href="https://stackblitz.com/careers" data-astro-cid-ak3upacl>Careers</a> </li><li data-astro-cid-ak3upacl> <a class="link-group__link" href="#stackblitz-updates" data-astro-cid-ak3upacl>Newsletter</a> </li> </ul> </div> </div> </div> </div> <div class="container footer__general-links" data-astro-cid-ak3upacl> <div class="container__content" data-astro-cid-ak3upacl> <div class="copyright-links" data-astro-cid-ak3upacl> <li data-astro-cid-ak3upacl>© 2025 StackBlitz Inc.</li> <li data-astro-cid-ak3upacl><a href="https://stackblitz.com/terms-of-service" data-astro-cid-ak3upacl>Terms of Service</a></li> <li data-astro-cid-ak3upacl><a href="https://stackblitz.com/privacy-policy" data-astro-cid-ak3upacl>Privacy Policy</a></li> </div> <div class="social-links" data-astro-cid-ak3upacl> <a href="https://twitter.com/stackblitz" target="_blank" rel="nofollow" data-astro-cid-ak3upacl> <div class="_icon_1vecz_1 _twitter_1vecz_65" style="width:24px;height:24px;background-color:var(--sbb-dark-foreground)"></div> </a><a href="https://github.com/stackblitz" target="_blank" rel="nofollow" data-astro-cid-ak3upacl> <div class="_icon_1vecz_1 _github_1vecz_57" style="width:24px;height:24px;background-color:var(--sbb-dark-foreground)"></div> </a><a href="https://discord.gg/stackblitz" target="_blank" rel="nofollow" data-astro-cid-ak3upacl> <div class="_icon_1vecz_1 _discord_1vecz_49" style="width:24px;height:24px;background-color:var(--sbb-dark-foreground)"></div> </a> </div> </div> </div> <div class="container footer__disclaimers" data-astro-cid-ak3upacl> <div class="container__content" data-astro-cid-ak3upacl> <span class="footer__disclaimer" data-astro-cid-ak3upacl>StackBlitz Codeflow and the Infinite Pull Request logo are trademarks of StackBlitz Inc. </span></div> </div> </footer> </body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.