In dit artikel
Wat is HTML Live Preview?
HTML Live Preview is een code-editor in de browser die uw HTML, CSS en JavaScript in realtime rendert. Terwijl u typt, wordt het uitvoerpaneel direct bijgewerkt, wat u onmiddellijke visuele feedback geeft zonder te schakelen tussen een editor en een browsertabblad.
De preview draait in een sandbox-iframe met strikte beveiligingsbeperkingen. Dit betekent dat uw code in een geïsoleerde omgeving draait — deze heeft geen toegang tot de bovenliggende pagina, cookies of lokale opslag. U krijgt een veilige speeltuin voor experimenten zonder risico voor de hostapplicatie.
Hoe live preview werkt
De editor combineert uw HTML, CSS en JavaScript tot één document en injecteert dit in een sandbox-iframe. Updates worden gedebounced om de preview responsief te houden zonder de browser te overbelasten.
- Sandbox-iframe — de preview draait alleen met sandbox="allow-scripts", waardoor toegang tot de bovenliggende pagina, cookies, formulieren en navigatie wordt geblokkeerd voor volledige isolatie
- Aparte codetabs — schrijf HTML, CSS en JavaScript in speciale panelen, elk met syntaxis-specifieke bewerking, automatisch gecombineerd bij het renderen
- Gedebouncede updates — wijzigingen worden toegepast na een korte pauze in het typen, waardoor de preview soepel blijft en constante re-renders bij elke toetsaanslag worden vermeden
Probeer gratis — geen aanmelding vereist
Probeer HTML Live Preview →Wanneer HTML Live Preview gebruiken
Live preview is ideaal wanneer u snel visuele feedback nodig heeft over HTML en CSS zonder een volledige ontwikkelomgeving.
- Snel prototypen — test layout-ideeën, kleurenschema's en componentontwerpen direct zonder een buildtool of devserver op te zetten
- HTML en CSS leren — beginners kunnen het effect van elke tag en eigenschap direct zien, wat de leercyclus veel korter maakt
- E-mailtemplate testen — bekijk HTML e-maillayouts met inline stijlen om de weergave te controleren voordat u ze verstuurt, aangezien e-mailclients beperkte CSS-ondersteuning hebben
Veelgestelde vragen
Is de preview veilig? Kan mijn code de bovenliggende pagina benaderen?
De preview is volledig gesandboxed. De iframe gebruikt sandbox="allow-scripts" zonder allow-same-origin, wat betekent dat uw code JavaScript kan uitvoeren maar geen toegang heeft tot de DOM van de bovenliggende pagina, cookies, localStorage of sessiegegevens. Dit is hetzelfde beveiligingsmodel dat platforms zoals CodePen en JSFiddle gebruiken.
Waarom is allow-same-origin niet opgenomen in de sandbox?
Het opnemen van allow-same-origin met allow-scripts zou de voorbeeldcode in staat stellen de sandbox volledig te omzeilen — het zou toegang krijgen tot de cookies van de bovenliggende pagina, de DOM kunnen wijzigen of gevoelige gegevens lezen. Het weglaten garandeert volledige isolatie. De afweging is dat localStorage en sessionStorage niet beschikbaar zijn in de preview, maar dit is een bewuste beveiligingskeuze.
Kan ik externe CSS- of JavaScript-bibliotheken laden in de preview?
Ja. U kunt link- en scripttags toevoegen die verwijzen naar CDN-URL's (bijv. Bootstrap, Tailwind, jQuery) in uw HTML-paneel. De sandbox-iframe staat netwerkverzoeken toe om externe bronnen te laden. Houd er wel rekening mee dat externe scripts ook onder de sandboxbeperkingen draaien — ze kunnen evenmin de bovenliggende pagina benaderen.