Tip: Kids start with HTML (text), then CSS (colors), then JS (buttons).

Kido & Babo • Tabs IDE (HTML / CSS / JS)

Pick a starter project → it loads into the right tabs automatically → press Run.

Editor Tabs Ready

Shortcut: Ctrl + Enter = Run Saved

Preview Load a starter project

How to create + Starter Projects ▼

1) Click a starter project below.
2) Press Run to preview.
3) Edit tabs: HTML = text, CSS = style, JS = buttons.

Algorithm idea: “steps that solve a problem”. Tip: Start with HTML tab.

RoboWorkshop 3D cover

🦾 RoboWorkshop

RoboWorkshop 3D

Robotics building.

Robot Missions 3D cover

🤖 Robot Missions

Robot Missions 3D

RoboBuild Walk cover

🧩 RoboBuild Walk

Engineering steps.

Space Sheep cover

🐑🚀 Space Sheep

FactorySim cover

🏭 FactorySim

Automation logic.

Traffic School cover

Loops + safety.

Glossary cover

Computer Glossary

Next upgrade: file tree + multi-file projects + cloud save.

`; } function saveNow(){ try{ localStorage.setItem(KEY, JSON.stringify({ html: htmlEditor.getValue(), css: cssEditor.getValue(), js: jsEditor.getValue() })); setSave("Saved"); }catch(_){ setSave("Save blocked"); } } function run(){ saveNow(); preview.srcdoc = packToHtml(); setStatus("Preview updated"); setTip("Edit HTML, CSS or JS then Run."); speak("Preview updated."); } function reset(){ loadStarter("base"); run(); speak("Reset to starter."); } function openInNewTab(){ const code = packToHtml(); const w = window.open(); if(!w){ setStatus("Popup blocked"); return; } w.document.open(); w.document.write(code); w.document.close(); setStatus("Opened in new tab"); } function downloadProject(){ const code = packToHtml(); const blob = new Blob([code], { type:"text/html;charset=utf-8" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "kido-babo-project.html"; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); setStatus("Downloaded"); } function readAll(){ const txt = ("HTML. " + htmlEditor.getValue() + " CSS. " + cssEditor.getValue() + " JavaScript. " + jsEditor.getValue()).slice(0, 900); speak("Reading. " + txt); } // Autosave typing let t=null; function onType(){ setSave("Saving…"); clearTimeout(t); t=setTimeout(()=>{ saveNow(); setStatus("Saved"); }, 300); } htmlEditor.on("change", onType); cssEditor.on("change", onType); jsEditor.on("change", onType); // Ctrl+Enter [htmlEditor, cssEditor, jsEditor].forEach(ed=>{ ed.on("keydown", (cm, e)=>{ if((e.ctrlKey || e.metaKey) && e.key === "Enter"){ e.preventDefault(); run(); } }); }); // Tabs function selectTab(name){ document.querySelectorAll(".tabBtn").forEach(b=>{ b.setAttribute("aria-selected", b.dataset.tab === name ? "true" : "false"); }); document.querySelectorAll(".tabPanel").forEach(p=>{ p.classList.toggle("active", p.dataset.panel === name); }); setTimeout(refreshEditors, 0); } document.querySelectorAll(".tabBtn").forEach(btn=>{ btn.addEventListener("click", ()=> selectTab(btn.dataset.tab)); }); // Starters (auto-load into right tabs) const STARTERS = { base: { html: `

Hello 👋

Edit HTML, CSS, then press Run.

`, css: `body{ background:#fff7e2; } button{ padding:10px 12px; border-radius:12px; border:2px solid #111; font-weight:800; cursor:pointer; }`, js: `function sayHi(){ document.getElementById("out").textContent = "Nice! Your JS works 🎉"; }` }, robot: { html: `

ROBO-BUDDY 🤖

`, css: `body{ margin:0; display:grid; place-items:center; height:100vh; background:#0b1020; font-family:system-ui; color:#fff; } .robot{ width:260px; text-align:center; } .head{ background: linear-gradient(90deg,#ff5fd7,#5de7ff,#ff5fd7); border:4px solid #0a0a10; border-radius:24px; padding:18px; position:relative; box-shadow:0 18px 40px rgba(0,0,0,.45); } .antenna{ position:absolute; top:-36px; left:50%; transform:translateX(-50%); width:10px; height:34px; background:#fff; border-radius:10px; } .antenna::after{ content:""; position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:18px; height:18px; background:#7cff6b; border:3px solid #0a0a10; border-radius:50%; } .eyes{ display:flex; gap:18px; justify-content:center; margin-top:10px; } .eye{ width:56px; height:56px; border-radius:50%; background:#0b1020; border:4px solid #0a0a10; display:grid; place-items:center; } .pupil{ width:18px; height:18px; border-radius:50%; background:#5de7ff; transition:transform .2s ease; } .mouth{ margin:16px auto 0; width:150px; height:18px; border-radius:999px; background:#0b1020; border:4px solid #0a0a10; } .label{ margin-top:12px; font-weight:900; } .btn{ margin-top:10px; padding:10px 12px; border-radius:12px; border:2px solid #fff; background:transparent; color:#fff; font-weight:900; cursor:pointer; }`, js: `function blink(){ const a=document.getElementById("p1"); const b=document.getElementById("p2"); a.style.transform="scaleY(0.2)"; b.style.transform="scaleY(0.2)"; setTimeout(()=>{ a.style.transform="scaleY(1)"; b.style.transform="scaleY(1)"; }, 220); }` }, car: { html: `

NEON CAR 🚗

`, css: `body{ margin:0; display:grid; place-items:center; height:100vh; background:#0b1020; font-family:system-ui; color:#fff; } .scene{ width:320px; } .road{ height:30px; background:#1c2238; border-radius:16px; margin-top:18px; position:relative; overflow:hidden; border:2px solid rgba(255,255,255,.15); } .road::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.35) 22px 34px); opacity:.25; animation:move 1.2s linear infinite; } @keyframes move{ from{ transform:translateX(0);} to{ transform:translateX(-34px);} } .car{ width:320px; position:relative; } .body{ height:90px; border-radius:22px; background: linear-gradient(90deg,#ff5fd7,#5de7ff,#ff5fd7); border:4px solid #0a0a10; box-shadow:0 16px 38px rgba(0,0,0,.45); } .top{ width:180px; height:60px; border-radius:18px 18px 10px 10px; background:rgba(255,255,255,.12); border:4px solid #0a0a10; position:absolute; top:-34px; left:70px; } .wheel{ width:66px; height:66px; border-radius:50%; background:#0b1020; border:4px solid #0a0a10; position:absolute; bottom:-26px; display:grid; place-items:center; } .wheel::after{ content:""; width:26px; height:26px; border-radius:50%; background:#5de7ff; } .w1{ left:34px; } .w2{ right:34px; } .label{ margin-top:12px; font-weight:900; text-align:center; }`, js: `// Try: change the car colors in CSS!` }, book: { html: `

Kido & Babo Presents

MY FIRST ROBOT

A kids coding story

NEW!

`, css: `body{ margin:0; display:grid; place-items:center; height:100vh; background:#0b1020; font-family:system-ui; color:#fff; } .cover{ width:320px; height:460px; border-radius:22px; background: radial-gradient(600px 300px at 20% 10%, rgba(93,231,255,.35), transparent 50%), radial-gradient(520px 260px at 90% 20%, rgba(255,95,215,.30), transparent 55%), linear-gradient(180deg,#0f1b4d,#070a14); border:3px solid rgba(255,255,255,.18); box-shadow:0 20px 50px rgba(0,0,0,.55); padding:18px; position:relative; overflow:hidden; } .tag{ display:inline-block; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.25); font-weight:900; } h1{ margin:14px 0 6px; font-size:28px; letter-spacing:.3px; } .sub{ opacity:.9; font-weight:800; } .sticker{ position:absolute; right:16px; bottom:16px; width:120px; height:120px; border-radius:24px; background: linear-gradient(90deg,#ff5fd7,#5de7ff,#ff5fd7); transform: rotate(10deg); display:grid; place-items:center; font-weight:1000; color:#0b1020; box-shadow:0 18px 40px rgba(0,0,0,.45); } .line{ height:10px; width:100%; background:rgba(255,255,255,.12); border-radius:999px; margin-top:16px; }`, js: `// Try: change the title text in HTML` }, toy: { html: `

🧸

Super Toy

Click the button to “buy” (just for fun).

`, css: `body{ margin:0; display:grid; place-items:center; height:100vh; background:#0b1020; font-family:system-ui; color:#fff; } .card{ width:340px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:22px; padding:16px; box-shadow:0 20px 50px rgba(0,0,0,.55); } .toy{ height:180px; border-radius:18px; background:linear-gradient(90deg,#ff5fd7,#5de7ff,#ff5fd7); display:grid; place-items:center; font-size:58px; border:3px solid rgba(0,0,0,.35); } h2{ margin:12px 0 6px; } .p{ opacity:.9; font-weight:800; } button{ margin-top:12px; width:100%; padding:12px; border-radius:14px; border:2px solid rgba(255,255,255,.7); background:transparent; color:#fff; font-weight:1000; cursor:pointer; } #msg{ margin-top:10px; font-weight:900; opacity:.95; }`, js: `function buy(){ document.getElementById("msg").textContent = "Added to cart ✅ (Great job!)"; }` }, paint: { html: `

🎨 Paint Dots — click or drag to draw

`, css: `body{ margin:0; background:#0b1020; color:#fff; font-family:system-ui; } header{ padding:14px 16px; background:rgba(0,0,0,.25); border-bottom:1px solid rgba(255,255,255,.12); font-weight:1000; } .wrap{ padding:16px; display:grid; gap:12px; max-width:900px; margin:0 auto; } .bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } button{ padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.22); color:#fff; font-weight:1000; cursor:pointer; } #c{ width:100%; height:420px; background:#ffffff; border-radius:16px; border:3px solid rgba(0,0,0,.55); touch-action:none; }`, js: `const c = document.getElementById("c"); const ctx = c.getContext("2d"); let color = "#ff5fd7"; let down = false; function setColor(x){ color = x; } function clearCanvas(){ ctx.clearRect(0,0,c.width,c.height); } function dot(x,y){ ctx.beginPath(); ctx.fillStyle = color; ctx.arc(x,y,10,0,Math.PI*2); ctx.fill(); } function pos(e){ const r = c.getBoundingClientRect(); const clientX = e.touches ? e.touches[0].clientX : e.clientX; const clientY = e.touches ? e.touches[0].clientY : e.clientY; const x = (clientX - r.left) * (c.width / r.width); const y = (clientY - r.top) * (c.height / r.height); return {x,y}; } c.addEventListener("mousedown", e=>{ down=true; const p=pos(e); dot(p.x,p.y); }); window.addEventListener("mouseup", ()=> down=false); c.addEventListener("mousemove", e=>{ if(!down) return; const p=pos(e); dot(p.x,p.y); }); c.addEventListener("touchstart", e=>{ down=true; const p=pos(e); dot(p.x,p.y); }, {passive:true}); c.addEventListener("touchend", ()=> down=false, {passive:true}); c.addEventListener("touchmove", e=>{ if(!down) return; const p=pos(e); dot(p.x,p.y); }, {passive:true});` } }; function loadStarter(name){ const s = STARTERS[name] || STARTERS.base; htmlEditor.setValue(s.html); cssEditor.setValue(s.css); jsEditor.setValue(s.js); saveNow(); setTip("Starter loaded ✅"); setStatus("Starter loaded"); selectTab("html"); setTimeout(refreshEditors, 0); } // Starter buttons document.querySelectorAll("[data-starter]").forEach(btn=>{ btn.addEventListener("click", ()=>{ loadStarter(btn.getAttribute("data-starter")); run(); const box = document.getElementById("kidsBox"); if(box) box.open = false; speak("Starter loaded. Press run to see it."); }); }); runBtn && runBtn.addEventListener("click", run); resetBtn && resetBtn.addEventListener("click", reset); openBtn && openBtn.addEventListener("click", openInNewTab); saveBtn && saveBtn.addEventListener("click", downloadProject); readBtn && readBtn.addEventListener("click", readAll); stopBtn && stopBtn.addEventListener("click", stopSpeak); function loadSaved(){ try{ const raw = localStorage.getItem(KEY); if(!raw){ loadStarter("base"); return; } const s = JSON.parse(raw); htmlEditor.setValue(s.html || ""); cssEditor.setValue(s.css || ""); jsEditor.setValue(s.js || ""); setStatus("Loaded saved project"); }catch(_){ loadStarter("base"); } } loadSaved(); run(); setTimeout(refreshEditors, 0); })(); (function init(){ applyEC(readEC()); loadVoice(); })();