Frictionless tutorials with the WebContainer API

on YouTube ↗25m

" summary

Shows a working way to run Node environments entirely in the browser using the WebContainer API, with support for npm/yarn/pnpm and experimental Python, reusing the browser cache for near-instant loads. Demonstrates a shipped starter: npm create tutorial that scaffolds a tutorial using Astro + React templates, lesson .md front matter, previews and terminal panels, and template folders for required packages. Runtime is framework-agnostic, components are in alpha, and the sandbox uses iframes/web workers so tokens stay outside the container.

AI-written summary · about

" chapters (8)

1. 0:00Introduction
2. 0:36What are tutorials
3. 2:38Different types of tutorials
4. 3:36WebContainer API
5. 6:49Learnings
6. 7:28Tutorial Kit
7. 12:00Demo
8. 16:45Questions

" related talks

• 13mBuild your own Node js app in the browser with WebContainer APISylwia Vargas · BeJS Conf 2023
• 46mUsing Node.js in the Browser with WebContainersOleksandr Zinevych · JavaScript fwdays’23
• 24mFull Stack DocumentationRich Harris · JSNation Conference 2022
• 30mInside Bolt.new: WebContainer API Meets AIJòan Varvenne · Frontend Nation 2025
• 07mBuilding a Node js runtime for the browserJasper De Moor · BeJS Conf 2023
• 13mVite for Education, Using Vite in Vite to teach Vite and beyondDan Jutan · ViteConf 2022
• 26mEvery Process, Everywhere, All at OnceLuis Montes · SeattleJS Conf 2023
• 02h 32mBuild next gen web apps using web componentsSumit Chaudhari · JSConf.Asia 2019