Code-speeltuin
Online HTML-, CSS- en JavaScript-speeltuin met live voorbeeld, editor met regelnummers en vastgelegde console. Test snippets direct en download het resultaat als één HTML-bestand - volledig in je browser.
Wat is een code-speeltuin?
Een code-speeltuin is een sandbox waarin je HTML, CSS en JavaScript schrijft en direct het gerenderde resultaat ziet. Deze voegt een vastgelegde console, editors met regelnummers en de mogelijkheid toe je werk als één HTML-bestand te downloaden.
Hoe werkt de live voorbeeldweergave?
Je drie codepanelen worden gecombineerd tot een compleet HTML-document en gerenderd in een sandbox-iframe. Met automatisch uitvoeren ververs de preview zo'n halve seconde nadat je stopt met typen; anders druk op Uitvoeren.
Wat toont het consolepaneel?
Alles wat de pagina schrijft via console.log, info, warn en error, plus runtimefouten en onafgehandelde promise-afwijzingen met regelnummers. Het wordt bij elke run gewist.
Blijft mijn code bewaard als ik de pagina herlaad?
Ja. Een concept van de drie panelen wordt lokaal in je browser opgeslagen en hersteld bij het volgende bezoek. Resetten zet de originele democode terug, en het wissen van sitegegevens verwijdert het concept.
Is de preview gesandboxt en veilig?
De preview draait in een sandbox-iframe zonder same-origin-toegang: geteste scripts kunnen deze pagina en zijn cookies niet lezen. Test toch alleen vertrouwde code, want hij draait in jouw browser.
Kan ik mijn experiment downloaden?
Ja. .html downloaden slaat de huidige HTML, CSS en JavaScript gecombineerd op in één zelfstandig bestand, te openen in elke browser of te delen.
Wat kan ik uitvoeren in het JavaScript-paneel?
Standaard browser-JavaScript: DOM-manipulatie, events, canvas, fetch naar publieke API's (volgens hun CORS-regels) en elke inline geplakte library. Modules en npm-pakketten worden niet opgelost.
Heeft de speeltuin internet nodig?
Alleen om de pagina zelf te laden. Bewerken, preview en console-opname draaien daarna lokaal, en je code wordt nergens naartoe gestuurd.
Hoe Code-speeltuin te gebruiken
Deze playground combineert je HTML, CSS en JavaScript in een sandbox-livevoorbeeld volledig in je browser, met een consolepaneel dat logs en fouten opvangt. Een concept wordt lokaal bewaard zodat je verdergaat waar je was gebleven.
- Bewerk de HTML-, CSS- en JavaScript-velden — elke editor heeft regelnummers en syntaxiskleuring.
- Met Automatisch uitvoeren aan ververst het voorbeeld automatisch terwijl je typt; anders klik je op Uitvoeren (of zet je Automatisch uitvoeren uit en voer je handmatig uit).
- Houd het Consolepaneel onder het voorbeeld in de gaten: console.log-uitvoer, waarschuwingen, fouten en onafgevangen uitzonderingen verschijnen daar met regelnummers.
- Klik op Resetten om terug te gaan naar de ingebouwde demo, of op .html downloaden om alles als één zelfstandig bestand op te slaan.
- Gebruik Openen in nieuw venster om het huidige document op volledige grootte in een eigen tabblad te bekijken.
De console wordt bij elke run geleegd, dus voeg gerust console.log toe tijdens het debuggen — de uitvoer verschijnt direct zonder de echte browserconsole te openen.
Gerelateerde tools
- JavaScript Verfraaier Gratis online JavaScript-verfraaier en code-formatteerder. Converteer gecomprimeerde JS direct naar schone, leesbare code met juiste inspringing en aanpasbare opties.
- JS Minifier Minificeer JavaScript-code direct. Verwijder spaties, opmerkingen en optimaliseer uw JS voor sneller laden.
- Regex-tester Test en debug reguliere expressies met real-time matching en groepsvastlegging.
- Markdown Voorbeeld Gratis online Markdown-editor met live voorbeeld. Schrijf, render en exporteer Markdown met volledige GFM-ondersteuning.
- Hash-controle MD5, SHA-1, SHA-256, SHA-512 bestand-hashes lokaal berekenen en verifiëren
- Chmod-calculator Gratis online chmod-calculator om Linux-bestandsrechten te visualiseren en berekenen met selectievakjes. Converteer direct tussen numerieke (755, 644) en symbolische notatie (rwxr-xr-x). Ondersteunt speciale rechten zoals setuid, setgid, sticky bit.
- ASCII-tabel Volledige ASCII-tekencoderingreferentie met decimale, hexadecimale, octale, binaire codes, HTML-entiteiten en karakterbeschrijvingen. Direct zoeken en filteren.
- Hex-viewer Bekijk bestandsinhoud in hex-dump formaat met zoekfunctie, offset-navigatie en virtueel scrollen