How I built a live code editor

Adenola Adefemi — Fri, 04 Sep 2026 16:12:06 +0000

Editor From Scratch (With Raw JS) 🚀Tags: #webdev #javascript #beginners #showdevThe Motivation 💡Hey DEV Community! I wanted to share my latest personal project. As I’ve been working on my skills and building my web footprint (including a personal project tracking my love for birds!), I realized I wanted a fast, lightweight sandbox to test code snippets directly in my browser.Instead of jumping into a massive framework, I challenged myself to build a live web-based code editor using nothing but raw, vanilla HTML, CSS, and JavaScript.Here is how I built it and the full source code so you can build your own!🛠️ How It WorksThe architecture is simple but powerful. It splits the screen into two main sections:The Input Pane: A where you type your code.The Output Pane: An <iframe> that acts as an isolated sandbox environment.The magic happens in the JavaScript. I added an input event listener to the textarea. Every single time a key is pressed, JavaScript grabs the string value and uses .write() to dynamically inject it straight into the iframe's document layout.📄 The Source Code1. index.htmlhtml<!DOCTYPE html><br> <html lang="en"><br> <head><br> <meta charset="UTF-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Live Code Editor</title><br> <link rel="stylesheet" href="style.css"><br> </head><br> <body><br> <header class="editor-header"><br> <h1>🐦 Adenola Tech Editor</h1><br> <p>Type your HTML/CSS code below to see it live</p><br> </header><br> <div class="editor-container"><br> <div class="pane input-pane"><br> <div class="pane-title">Source Code Input</div><br> <textarea id="code-input" placeholder="Type HTML here..." spellcheck="false"><h1>Hello World!</h1><br> <p>Welcome to my live editor project.</p>

Live Preview Window

Use code with caution.2. style.csscss* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background: #1e1e1e; color: #fff; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.editor-header { background: #2d2d2d; padding: 10px 20px; border-bottom: 2px solid #3c3c3c; }
.editor-header h1 { font-size: 1.2rem; color: #4caf50; }
.editor-container { display: flex; flex: 1; height: calc(100vh - 60px); }
.pane { flex: 1; display: flex; flex-direction: column; }
.input-pane { border-right: 2px solid #3c3c3c; }
.pane-title { background: #252526; padding: 8px 15px; font-size: 0.85rem; font-weight: bold; color: #00bcd4; }

code-input { flex: 1; background: #1e1e1e; color: #d4d4d4; font-family: monospace; font-size: 1rem; padding: 15px; border: none; resize: none; outline: none; }

live-preview { flex: 1; background: #fff; border: none; }

Use code with caution.3. script.jsjavascriptconst codeInput = document.getElementById('code-input');
const livePreview = document.getElementById('live-preview');

function updatePreview() {
const code = codeInput.value;
const previewDocument = livePreview.contentDocument || livePreview.contentWindow.document;
previewDocument.open();
previewDocument.write(code);
previewDocument.close();
}

codeInput.addEventListener('input', updatePreview);
window.addEventListener('DOMContentLoaded', updatePreview);
Use code with caution.📈 What's Next?This is just the baseline version! Moving forward, I want to add:Separate workspace tabs for HTML, CSS, and JS files.A download feature to export files directly to your local computer.I'd love your feedback! How would you handle syntax highlighting without relying on massive external libraries? Let me know in the comments below! 👇💡

DEV Community: Adenola Adefemi

How I built a live code editor

code-input { flex: 1; background: #1e1e1e; color: #d4d4d4; font-family: monospace; font-size: 1rem; padding: 15px; border: none; resize: none; outline: none; }

live-preview { flex: 1; background: #fff; border: none; }