Building a Browser Based Code Editor

on YouTube ↗33m

" summary

Builds a browser code editor that runs user code in a sandbox via Dino sub hosting, returning a URL that the app loads into an iframe. Uses React and TypeScript for the UI, a server-side Oak HTTP API that creates or updates a files map (main.ts) and polls for deployment status, and demonstrates importing packages with jsr inside the serverless function. Adds syntax highlighting using PrismJS + transparent textarea hack and shows one-click deployment with Dino Deploy.

AI-written summary · about

" chapters (12)

1. 0:00🚀 Introduction to Building a Code Editor in the Browser
2. 2:00Why Build a Browser-Based Code Editor? Use Cases and Challenges
3. 5:00Overview of Dino and Setting Up the Project
4. 8:00Using Dino to Host Serverless Functions
5. 12:00Setting Up the Frontend: Building the UI with React and TypeScript
6. 15:00Creating the Backend API to Run User Code
7. 18:00Running Code in the Sandbox: The Role of Serverless Functions
8. 22:00Displaying Outputs in an iFrame
9. 26:00Adding Syntax Highlighting with PrismJS
10. 28:00Deploying the Editor with Dino Deploy
11. 30:00Final Demo: The Working Code Editor in Action
12. 31:00Conclusion: Why Dino is Perfect for Building a Code Editor

" related talks

• 21mBuilding an in-browser code editor (that can run your code too!)Jo Franchetti · CityJS London 2025
• 35mBuilding a Browser Based Code EditorJo Franchetti · NDC London 2025
• 34mBuilding a Browser Based Code EditorJo Franchetti · CPH DevFest 2024
• 29mBuilding an in-browser editorJo Franchetti · Future Frontend 2024
• 28mCodeSandboxIves van Hoorne · JSHeroes 2018
• 01h 29mTooling for the JavaScript EraMartin Lippert, Andy Clement, Andrew Eisenberg · SpringOne2GX 2012
• 05mBuilding Editors in the BrowserJason Chen · JSConf.ar 2014
• 37mWhy don’t the browser’s Dev Tools understand Your Code?Steven Schkolne · XtremeJS 2023