Building an in-browser code editor (that can run your code too!)
summary
Builds a React + TypeScript editor that actually executes user code by sending the typed source to Dino subhosting serverless functions and returning a unique URL shown in an iframe output. Uses the Dino runtime and Dino Deploy, Prisma—sorry PrismJS—for syntax highlighting, and a layered transparent textarea over a highlighted code block to simulate an editor. The server forks deployments via the subhosting API, each function gets its own URL, and the demo deploys and runs successfully.
AI-written summary · about
chapters (7)
- 0:00Introduction and Dino overview
- 3:08Building the in-browser editor
- 9:29UI and code execution flow
- 14:07Server-side setup and deployment
- 17:15Syntax highlighting and styling
- 19:01Deploying the editor
- 20:50Demo and closing remarks
related talks
33mBuilding a Browser Based Code Editor
35mBuilding a Browser Based Code Editor
34mBuilding a Browser Based Code Editor
29mBuilding an in-browser editor
37mWhy don’t the browser’s Dev Tools understand Your Code?
06mMake amazing docs, faster with StackBlitz and Next.js
32mWhy don’t browser dev tools understand your code?
24mFull Stack Documentation