Naar de inhoud
Numio

Online HTML-editor met live voorbeeld — Numio

Schrijf HTML, CSS en JavaScript en zie het voorbeeld live meebewegen terwijl je typt. Consoleberichten staan eronder. Gratis, in je browser.

Werkt in je browser · Geen registratie

Code (HTML)

Ctrl/⌘ + Enter om uit te voeren

Voorbeeld

Console

Nog geen uitvoer. Klik op Uitvoeren om hier het resultaat te zien.

Code draait lokaal in je browser en wordt niet geüpload.

Hoe werkt het

  1. Schrijf HTML, met CSS in <style> en JavaScript in <script>.
  2. Het voorbeeld wordt automatisch bijgewerkt terwijl je typt.
  3. Bekijk de consoleberichten onder het voorbeeld.

Voorbeeld

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; padding: 16px; }
  button { padding: 8px 16px; }
</style>
</head>
<body>
  <h1>Hallo!</h1>
  <button id="btn">Klik hier</button>
  <p id="out"></p>
  <script>
    let n = 0;
    document.getElementById("btn").onclick = () => {
      n++;
      document.getElementById("out").textContent = "Klikken: " + n;
      console.log("click", n);
    };
  </script>
</body>
</html>

Details en beperkingen

Het voorbeeld draait in een afgeschermd frame (sandbox). De scripts daarin hebben geen toegang tot deze pagina of de cookies ervan.

Liever zelf vernieuwen? Zet automatisch bijwerken uit en klik op Uitvoeren.

FAQ

Kan ik CSS en JavaScript gebruiken?

Ja. Zet CSS in een <style>-tag en JavaScript in een <script>-tag in hetzelfde document.

Waar komt de uitvoer van console.log terecht?

Consoleberichten uit het voorbeeld worden eronder weergegeven.

Wordt mijn code geüpload?

Nee. Het voorbeeld wordt in je browser gemaakt en er wordt niets naar een server gestuurd.

Referenties

Pagina bijgewerkt: