HTML, CSS & JS playground

Wat het doet

Deze playground is een kleine online code-editor voor front-endexperimenten. Schrijf HTML, CSS en JavaScript in drie tabbladen met syntaxiskleuring en het voorbeeld wordt bijgewerkt terwijl je typt, net als CodePen of JSFiddle maar zonder account. Een ingebouwde console toont uitvoer van console.log() en fouten met het regelnummer in je JavaScript, zodat je kunt debuggen zonder de ontwikkelaarstools te openen. Dat is handig op een telefoon of een geleende computer.

Gebruik het om een CSS-layout uit te proberen, een bug na te bootsen voor een collega, een snippet van Stack Overflow te testen, een beginner les te geven of snel een prototype te schetsen.

Zo gebruik je het

1. Typ in de tabbladen HTML, CSS en JS, of klik op Voorbeeld om te beginnen met een kleine tellerdemo. Een stip op een tabblad betekent dat het code bevat.
2. Het voorbeeld wordt automatisch uitgevoerd 0,6 seconde nadat je stopt met typen. Zet Automatisch uitvoeren uit voor zware scripts en klik op Uitvoeren of druk op Ctrl+Enter als je zover bent.
3. Houd de Console in de gaten voor logs, waarschuwingen en fouten; de nieuwste regel staat altijd bovenaan. Objecten, arrays, Maps, Sets en DOM-elementen worden compact en leesbaar weergegeven.
4. Gebruik Delen om de code naar iemand te sturen. ZIP downloaden slaat index.html, style.css en script.js op als losse bestanden, klaar voor een echt project; HTML downloaden slaat alles op als één index.html-bestand dat in elke browser opent.

Je code wordt in deze browser bewaard, dus hij is er nog als je terugkomt. De Tab-toets springt in met twee spaties.

Voorbeeld

HTML:

<button id="go">Click me</button>

JavaScript:

document.querySelector('#go').addEventListener('click', () => {
  console.log('clicked at', new Date().toLocaleTimeString())
})

Elke klik voegt een regel toe aan de console. Spel je een naam verkeerd, dan toont de console een rode ReferenceError met de regel in het JS-tabblad waar het gebeurde.

Hoe het werkt

De drie panelen worden samengevoegd tot één HTML-document en in een iframe met het sandbox-attribuut geladen, zodat de code de cookies of opslag van deze site niet kan lezen. Een klein script dat aan het frame wordt toegevoegd, stuurt console-aanroepen en niet-afgevangen fouten door naar de pagina, en er verlaat niets je apparaat.