Building a Browser Based Code Editor | Jo Franchetti
🎟 Grab Your Tickets to the Software Development Conference You Can’t Miss 👉 https://www.buildstuff.events/conf
💡 Become an Ambassador for Build Stuff and Get Exclusive Perks 👉 https://buildstuff.events/pages/ambas...
💻 In this engaging session, Jo Franchetti walks us through building a web-based code editor that not only lets you edit code directly in the browser, but also runs it and shows the output. Whether you're offering API testing tools or enhancing a low-code platform, this editor can elevate your dev experience.
🔍 In This Video, You’ll Learn About:
✅ Why you might want a browser-based code editor
✅ How to run user-written code safely in a sandboxed environment
✅ Building a simple yet powerful web app with React and TypeScript
✅ Using Dino for hosting serverless functions securely
✅ How to integrate a live code editor with syntax highlighting
✅ Handling inputs, running code, and rendering outputs in real-time
✅ Setting up and deploying a serverless code editor application
00:00 🚀 Introduction to Building a Code Editor in the Browser
02:00 Why Build a Browser-Based Code Editor? Use Cases and Challenges
05:00 Overview of Dino and Setting Up the Project
08:00 Using Dino to Host Serverless Functions
12:00 Setting Up the Frontend: Building the UI with React and TypeScript
15:00 Creating the Backend API to Run User Code
18:00 Running Code in the Sandbox: The Role of Serverless Functions
22:00 Displaying Outputs in an iFrame
26:00 Adding Syntax Highlighting with PrismJS
28:00 Deploying the Editor with Dino Deploy
30:00 Final Demo: The Working Code Editor in Action
31:00 Conclusion: Why Dino is Perfect for Building a Code Editor
🔥 Join the Build Stuff Community!
🌍 The Software Development Conference You Can’t Miss 👉 https://www.buildstuff.events/conf
💡 Become a Build Stuff Ambassador & Get Exclusive Perks 👉 https://buildstuff.events/pages/ambas...
📢 Follow Build Stuff for Updates
🔵 Facebook: / buildstuffconf
🐦 X: / buildstuffconf
🔗 LinkedIn: / build-stuff
📺 YouTube: / buildstuff
📷 Instagram: / buildstuffconf
🎵 TikTok: / buildstuffconf
📩 Contact Us: [email protected]
📢 Join the conversation & share your thoughts using #BuildStuffConf
#BuildStuffConference #TechConference #BrowserEditor #Dino #ServerlessFunctions #WebDevelopment #ReactJS #CodingInTheBrowser #BuildStuff2025 #JavaScript #TypeScript #WebAppDevelopment #API #WebHosting #SyntaxHighlighting #PrismJS #Serverless #LowCodePlatform #DevTools #CodeEditor #CloudComputing #FrontendDevelopment #DinoDeploy #JavaScriptRuntime #WebSecurity #CodingTutorial #TechInnovation #DeveloperExperience #WebAPIs #ReactDevelopment #WebAppDev