Building an in-browser editor
summary
Builds a working in‑browser code editor using the Deno stack: React + Vite for the UI, Oak for server APIs, and Deno Deploy + Deno Sub Hosting for per‑user sandboxes. Each edit creates per-edit deployments with its own URL shown in an iframe, deployments run in separate V8 isolates with virtualized filesystems, and cold starts measure in milliseconds. Demo shows code execution, package installs via jsr, and APIs to create, update and poll deployments.
AI-written summary · about
chapters (16)
- 0:00In-browser code editors intro
- 2:06Security risks of third-party code
- 3:30Server-side sandboxing challenges
- 5:18What is Dino and its advantages
- 7:23Introducing Dino Sub Hosting
- 8:06Setting up Dino project
- 9:52Configuring React and Vite
- 11:21Building editor UI
- 13:07Creating React API client
- 14:09Hosting with Dino Deploy
- 16:56Implementing sample code API
- 17:17Deploying via Sub Hosting
- 19:45How Sub Hosting works
- 22:58Deploying to production
- 23:45Live editor demo
- 27:43Closing and open-source
related talks
34mBuilding a Browser Based Code Editor
35mBuilding a Browser Based Code Editor
21mBuilding an in-browser code editor (that can run your code too!)
33mBuilding a Browser Based Code Editor
05mDeno + Vite
57mDaily Deno Development
37mGetting up to Speed with Deno
13mVite for Education, Using Vite in Vite to teach Vite and beyond