Building a Browser Based Code Editor
summary
A working browser code editor that accepts TypeScript, packages it into a one-file project, and deploys each edit as a fresh serverless URL is shown using Deno Subhosting, Deno Deploy, React and Vite. The backend uses Oak and fetches the subhosting API to create deployments, each running in separate V8 isolates with a virtual filesystem and two VPCs for network isolation. The demo runs edits in an iframe and returns console/output; the pipeline successfully serves live demos.
AI-written summary · about
chapters (11)
- 0:00Introduction and motivation
- 0:56Challenges and requirements
- 4:33Overview of Deno platform
- 8:59Setting up the project
- 13:07Configuring the development environment
- 14:41Designing the application UI
- 15:23Building the backend API
- 25:34Understanding Deno subhosting
- 27:14Deep dive into subhosting security
- 28:44Deployment and demonstration
- 32:52Closing and resources
related talks
35mBuilding a Browser Based Code Editor
29mBuilding an in-browser editor
33mBuilding a Browser Based Code Editor
21mBuilding an in-browser code editor (that can run your code too!)
01h 29mTooling for the JavaScript Era
05mBuilding Editors in the Browser
31mDeno: The JavaScript Runtime for the Serverless Era
06mMake amazing docs, faster with StackBlitz and Next.js