Building a Browser Based Code Editor
summary
Builds a browser editor that accepts TypeScript, syntax highlights live and executes user code by sending it to Deno Subhosting functions which return a URL shown in an iframe; uses React + Vite + TypeScript on the client, Oak on the server, and Prism.js with an overlay trick (transparent textarea over a highlighted code block) for editing. Claims sandboxed execution in milliseconds, avoids provisioning clusters or heavy ops by delegating to subhosting, and the demo successfully runs live imports and HTTP examples.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 1:13Building in-browser editor
- 2:38Security risks of third-party code
- 4:25Tools for the editor
- 5:25Dino and its features
- 8:35Setting up with Dino
- 12:49Project structure and UI
- 17:05React UI logic
- 19:14Server-side API
- 22:07Deploying user code
- 25:46Syntax highlighting
- 28:16Deploying with Dino Deploy
- 29:44Live demo
- 33:18Benefits and use cases
- 34:04Q&A
related talks
34mBuilding 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
32mWhy don’t browser dev tools understand your code?
04h 48mBuilding Our Own Text Editor
24mFull Stack Documentation