</> ConvertAtlas Developer Tools
Bootstrap 5 · Advanced

Mini Code Runner

A tiny JS playground that runs the snippet and shows the result.

Requires Bootstrap 5. Add the CDN tags below to your page (styles in <head>, scripts before </body>). The downloaded file already includes them.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="card border-0 shadow" style="width:400px;max-width:100%"><div class="card-body p-0">
  <div class="d-flex justify-content-between align-items-center px-3 py-2" style="background:#161b22"><span class="small" style="color:#8b949e">live.js</span><button class="btn btn-sm py-0" id="ceRun" style="color:#8b949e;border:1px solid #30363d">Run ▸</button></div>
  <textarea id="ceIn" class="form-control border-0 rounded-0 font-monospace small" rows="3" style="background:#0d1117;color:#c9d1d9">return [1,2,3,4].reduce((a,b)=>a+b, 0);</textarea>
  <div class="px-3 py-2 small font-monospace" id="ceOut" style="background:#161b22;color:#16a34a">→ </div>
</div></div>
document.getElementById('ceRun').onclick=function(){var out=document.getElementById('ceOut');try{var r=Function(document.getElementById('ceIn').value)();out.style.color='#16a34a';out.textContent='→ '+JSON.stringify(r)}catch(e){out.style.color='#f85149';out.textContent='→ '+e.message}};
Free to use.This component uses Bootstrap 5 (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.