Online code editor Build full UI design (professional)

  • Home
  • Blog
  • Online code editor Build full UI design (professional)
Featured

Online code editor Build full UI design (professional)

March 27, 2026 in Projects Explanation

Your professional online code editor is ready in the canvas.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Code Editor | SOA Technology</title>

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">

<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
body{background:#0f172a;color:#fff}
header{padding:15px 20px;background:#020617;display:flex;justify-content:space-between;align-items:center}
header h1{font-size:20px}

.container{display:grid;grid-template-columns:1fr 1fr;height:90vh}

.editor-section{display:flex;flex-direction:column;padding:10px;gap:10px}
textarea{flex:1;background:#020617;color:#fff;border:1px solid #1e293b;padding:10px;border-radius:10px;resize:none}

.controls{display:flex;gap:10px}
button{padding:10px 15px;border:none;border-radius:8px;cursor:pointer;font-weight:600}
.run{background:#22c55e;color:#000}
.clear{background:#ef4444;color:#fff}

iframe{width:100%;height:100%;border:none;background:#fff}

.preview-section{position:relative}

/* Ad Placeholder */
.ad-box{position:absolute;bottom:10px;right:10px;background:#fff;color:#000;padding:10px;border-radius:10px;font-size:12px}

@media(max-width:900px){
.container{grid-template-columns:1fr}
}
</style>
</head>

<body>

<header>
<h1>💻 Online Code Editor</h1>
<div class="controls">
<button class="run" onclick="runCode()">Run ▶</button>
<button class="clear" onclick="clearCode()">Clear</button>
</div>
</header>

<div class="container">

<div class="editor-section">
<textarea id="htmlCode" placeholder="Write HTML here..."></textarea>
<textarea id="cssCode" placeholder="Write CSS here..."></textarea>
<textarea id="jsCode" placeholder="Write JavaScript here..."></textarea>
</div>

<div class="preview-section">
<iframe id="output"></iframe>

<!-- AdSense Placeholder -->
<div class="ad-box">Ad Space</div>

</div>

</div>

<script>
function runCode(){
let html=document.getElementById('htmlCode').value;
let css=document.getElementById('cssCode').value;
let js=document.getElementById('jsCode').value;

let output=document.getElementById('output');

output.srcdoc=`
<html>
<style>${css}</style>
<body>
${html}
<script>${js}<\/script>
</body>
</html>`;

// Save code
localStorage.setItem('html',html);
localStorage.setItem('css',css);
localStorage.setItem('js',js);
}

function clearCode(){
document.getElementById('htmlCode').value='';
document.getElementById('cssCode').value='';
document.getElementById('jsCode').value='';
runCode();
}

// Load saved code
window.onload=function(){
document.getElementById('htmlCode').value=localStorage.getItem('html')||'';
document.getElementById('cssCode').value=localStorage.getItem('css')||'';
document.getElementById('jsCode').value=localStorage.getItem('js')||'';
runCode();
}

// Live preview

document.querySelectorAll('textarea').forEach(el=>{
el.addEventListener('input',runCode);
});
</script>

</body>
</html>
🇮🇳 Amazon India 🌍 Amazon Global

aditya singh