Schrijf HTML, CSS en JavaScript en bekijk een live voorbeeld in een sandbox terwijl u typt. Responsieve apparaatbreedtes, accentuering van de Monaco-syntaxis, mooiere opmaak, lokaal automatisch opslaan en HTML-, print- of PDF-export. Gratis, geen aanmelding.
Deze online HTML-editor met live preview geeft uw HTML, CSS en JavaScript naast de code weer ongeveer 300 ms nadat u bent gestopt met typen. Controleer de lay-out op de breedte van desktop, tablet (768px) en mobiel (375px), ruim de opmaak op met Prettier en exporteer naar .html of PDF. Uw code wordt alleen in deze browser automatisch opgeslagen en wordt nooit geüpload.
Deze live HTML-editor geeft uw markeringen naast de code weer terwijl u typt, zodat u prototypen van lay-outs kunt maken, fragmenten kunt testen en kunt leren door te experimenteren zonder een project op te zetten. Het maakt gebruik van Monaco (de editor-engine achter VS Code) voor syntaxisaccentuering en automatische aanvulling, en het draait volledig in uw browser zonder aanmelding.
Functies
Realtime preview in een sandbox met de modi Splitsen, Coderen en Previewen
Wordt automatisch opgeslagen in de lokale opslag van deze browser, nooit geüpload
Exporteren als .html, afdrukken/opslaan als PDF of snelle PDF van meerdere pagina's
Hoe Live HTML-editor te gebruiken
1
Plak of schrijf uw HTML
Typ een volledig document of een fragment. Plaats CSS in een <style>-tag en JavaScript in een <script>-tag, of laad ze vanaf een CDN via https.
2
Bekijk de live-preview
Het voorbeeldvenster wordt ongeveer 300 ms opnieuw weergegeven nadat u bent gestopt met typen. Gebruik de gesplitste, codeer- of voorbeeldweergave om de werkruimte in te delen.
3
Controleer responsieve breedtes
Schakel tussen desktop (volledige breedte), tablet (768px) en mobiel (375px) om te zien hoe de lay-out opnieuw verloopt.
4
Maak de opmaak mooier
Klik op Prettify om het document opnieuw te laten inspringen met Prettier (inspringen met 2 spaties, regels van 100 tekens).
5
Exporteer uw werk
Download de exacte code als .html, gebruik Afdrukken → Opslaan als PDF voor selecteerbare tekst van meerdere pagina's, of klik op PDF voor een snelle beeldopname.
Veelvoorkomende gebruiksscenario's
Een beginner typt een HTML-tag en ziet meteen wat deze doet.
Een ontwikkelaar isoleert een kapot fragment en debugt het zonder een project op te starten.
Een marketeer bekijkt een voorbeeld van een HTML-e-mail of landingspaginablok op 375px voordat hij deze ter beoordeling verzendt.
Een docent toont code en de uitvoer naast elkaar in de klas.
Een freelancer maakt een mock-up van een onderdeel en stuurt de klant een .html-bestand of pdf.
Gedetailleerde gids
HTML-code online testen
Plak uw code in de editor en het voorbeeld wordt automatisch bijgewerkt, zonder dat u op de knop Uitvoeren hoeft te drukken. Je kunt een compleet document plakken met <!DOCTYPE html>, <head> en <body>, of alleen een fragment zoals een <div> met een paar stijlen, en de browser vult de ontbrekende structuur in. Schakel over naar de voorbeeldweergave om het resultaat op volledige grootte te zien, of naar de codeweergave als u ruimte wilt om te schrijven. Als iets er niet goed uitziet, klikt u eerst op Mooier maken: door een schone inspringing is een niet-gesloten tag of een misplaatste </div> veel gemakkelijker te herkennen.
Schrijf HTML, CSS en JavaScript samen
De editor werkt op één HTML-document, dus CSS en JavaScript gaan erin. Voeg stijlen toe in een <style> blok in de <head> of als inline stijlattributen, en voeg gedrag toe in een <script> blok aan het einde van de <body> of als gebeurtenisattributen zoals onclick. U kunt ook een bibliotheek of raamwerk laden vanuit een CDN, zoals een Google Font, Tailwind's Play CDN of een grafiekbibliotheek, met een normale <link>- of <script src>-tag die naar een https-URL verwijst. De preview voert uw scripts uit in een echte browser-engine, zodat DOM-gebeurtenissen, timers, canvas en ophaalaanroepen naar API's met CORS zich allemaal gedragen zoals ze zouden doen op een livepagina.
Test responsieve lay-outs op telefoon- en tabletbreedte
Gebruik de apparaatknoppen boven het voorbeeld om de breedte ervan te beperken. Neem <meta name="viewport" content="width=device-width, initial-scale=1"> op in uw <head>, zodat mediaquery's op dezelfde manier op de voorbeeldbreedte reageren als op een telefoon.
Voorinstelling
Breedte voorbeeld
Wat te controleren
Bureaublad
Volledige ruitbreedte
Containers met maximale breedte, rasters met meerdere kolommen, hover-statussen
Tablet
768px
Het gebruikelijke MD-breekpunt: inklapbare navigatie, lay-outs met 2 kolommen
Het voorbeeld is een sandboxframe dat vanuit uw code is geladen. Voor de veiligheid heeft het een ondoorzichtige oorsprong: uw scripts kunnen de cookies of opslag van deze site niet lezen, en deze site kan uw pagina niet lezen. Dat ontwerp leidt tot een paar voorspelbare limieten, die hieronder worden vermeld, zodat u geen tijd verliest met het debuggen van de editor in plaats van uw code.
Werken
Werkt niet (en waarom)
Inline <stijl>, stijlattributen en <script>
Relatieve paden zoals src="img/logo.png": er is geen map op een server waartegen ze kunnen worden omgezet. Gebruik volledige https-URL's of gegevens-URI's
CSS en JS van een CDN via https
localStorage, sessionStorage en cookies in uw script: de sandbox blokkeert ze (ze genereren een SecurityError)
alert(), confirm(), formulieren en links openen in een nieuw tabblad
fetch() naar API's die geen CORS-headers verzenden: de browser blokkeert het antwoord, net zoals op een echte site
Afbeeldingen en lettertypen van openbare URL's
Meerdere bestanden, NPM-importen of bouwstappen: het is een editor voor één document, geen project-IDE
Prettify voert de HTML-formatter van Prettier uit in uw browser. Het identificeert geneste tags opnieuw met twee spaties, omhult lange regels met een lengte van 100 tekens en plaatst attributen op hun eigen regels wanneer een tag te breed wordt. Het is afgestemd op de HTML-structuur, dus de inhoud van <style>- en <script>-blokken blijft grotendeels zoals u ze heeft geschreven. Het verandert niets aan wat uw pagina weergeeft. Als de opmaak een syntaxisfout bevat die Prettier niet kan parseren, ziet u een bericht en blijft uw code precies zoals deze was.
Exporteren naar HTML of PDF
Er zijn drie exportopties, elk geschikt voor een andere taak. De .html-download is byte-voor-byte de code in de editor, klaar om in een browser te openen of in een project te plaatsen. Afdrukken stuurt het gerenderde voorbeeld naar het afdrukdialoogvenster van uw browser: kies Opslaan als PDF om selecteerbare tekst, werkonderbrekingen van meerdere pagina's en alles wat uw JavaScript heeft getekend te krijgen. De PDF-knop is een snelkoppeling met één klik die de statische HTML en CSS als afbeelding vastlegt, deze over A4-pagina's verdeelt en downloadt. Omdat het een afbeelding is, kan de tekst ervan niet worden geselecteerd en wordt door JavaScript gemaakte inhoud niet weergegeven. Als de snelle PDF mislukt, is de gebruikelijke oorzaak een externe afbeelding zonder CORS-headers; gebruik in plaats daarvan Afdrukken.
Bekijk een voorbeeld van HTML-e-mailsjablonen
E-mailclients ondersteunen veel minder HTML en CSS dan browsers, dus e-mailsjablonen volgen oudere conventies: een op tabellen gebaseerde lay-out, een inhoudskolom van ongeveer 600 pixels breed, inline stijlkenmerken in plaats van <style>-blokken, en afbeeldingen met kenmerken met een vaste breedte. Bouw dat hier zo en schakel over naar de 375px-voorinstelling om te controleren hoe de e-mail op een telefoon wordt gestapeld. Het voorbeeld laat zien hoe een moderne browser uw e-mail weergeeft, wat een goede eerste controle is. Sommige clients, vooral Outlook op Windows, zullen het anders weergeven, dus stuur altijd een test naar echte inboxen voordat een campagne wordt verzonden.
Startfragmenten om in te plakken
Korte patronen die je kunt intypen en aanpassen. Elk ervan heeft slechts een paar regels nodig en toont het resultaat onmiddellijk in het voorbeeld.
Niets wat u typt, wordt naar een server verzonden. Om uw werk tussen bezoeken door te bewaren, slaat de editor uw code automatisch op in de lokale opslag van deze browser op dit apparaat, zodat deze na een vernieuwing nog steeds aanwezig is, maar niet wordt gesynchroniseerd met andere apparaten of andere browsers. Als u op Reset klikt, wordt uw code vervangen door het voorbeelddocument. Als u de gegevens van deze site in uw browserinstellingen wist, wordt de opgeslagen kopie verwijderd. Op een gedeelde computer drukt u op Reset voordat u weggaat.
Wanneer moet je in plaats daarvan een speeltuin met volledige code gebruiken?
Deze editor is gebouwd voor snel, privé werken met één bestand: een fragment testen, HTML leren, een lay-out op telefoonbreedte controleren of een voorbeeld van een e-mailblok bekijken, zonder dat een account nodig is. Als je meerdere bestanden, npm-pakketten, een raamwerkbouwstap, een deelbare link of realtime samenwerking nodig hebt, is een volledige speeltuin zoals CodePen, JSFiddle of PlayCode beter geschikt. Veel ontwikkelaars gebruiken beide: een snel kladblok voor dit soort cheques, en een volledige speeltuin voor projecten die ze willen delen.
Typ of plak uw HTML in de editor. Het voorbeeld wordt ongeveer 300 ms nadat u bent gestopt met typen opnieuw weergegeven en laat zien hoe een echte browser uw code weergeeft. Er is geen knop Uitvoeren, geen installatie en geen aanmelding.
Kan ik CSS en JavaScript opnemen in de HTML-editor?
Ja. Plaats CSS in een <style> blok of stijlattributen en JavaScript in een <script> blok of gebeurtenisattributen zoals onclick. Je kunt ook bibliotheken en lettertypen laden vanaf een CDN met een https-URL. Het is een editor voor één document, dus afzonderlijke .css- en .js-bestanden worden niet ondersteund.
Hoe verfraai ik HTML-code online?
Plak uw rommelige of verkleinde HTML en klik op Prettify. Prettier springt geneste tags opnieuw in met twee spaties en laat lange regels van 100 tekens omlopen zonder de weergave van de pagina te wijzigen. Als de HTML een syntaxisfout bevat die Prettier niet kan parseren, blijft uw code onaangeroerd en ziet u een bericht.
Kan ik mijn HTML-code exporteren als PDF?
Ja, op twee manieren. Afdrukken → Opslaan als PDF maakt gebruik van de afdrukengine van uw browser, die selecteerbare tekst, uitvoer van meerdere pagina's en alles wat uw JavaScript weergeeft, biedt. De PDF-knop is een snelle afbeeldingsopname met één klik van de statische HTML en CSS, verdeeld over A4-pagina's; de tekst ervan is niet selecteerbaar en JavaScript-uitvoer is niet inbegrepen.
Wordt mijn HTML-code ergens opgeslagen?
Alleen in uw eigen browser. De editor slaat automatisch op in de lokale opslag van deze browser, zodat uw werk een vernieuwing overleeft, maar er wordt niets naar een server geüpload en het wordt niet met andere apparaten gesynchroniseerd. Klik op Reset of wis de gegevens van deze site om deze te verwijderen.
Waarom wordt mijn afbeelding of extern CSS-bestand niet geladen in het voorbeeld?
Relatieve paden zoals img/logo.png of style.css hebben geen map waartegen ze kunnen worden omgezet, omdat het voorbeeld is opgebouwd uit uw code in plaats van uit bestanden op een server. Gebruik een volledige https-URL, plak de CSS in een <style>-blok of verander een kleine afbeelding in een gegevens-URI.
Waarom genereert localStorage een fout in mijn script?
Het voorbeeld wordt uitgevoerd in een sandboxframe met een ondoorzichtige oorsprong, zodat de gegevens van deze site niet kunnen worden aangetast. Als gevolg hiervan zijn localStorage, sessionStorage en cookies daar niet beschikbaar voor uw code en genereren ze een SecurityError. Test opslaglogica in een lokaal bestand of een volledige speeltuin.
Kan ik deze HTML-editor gebruiken om als beginner HTML te leren?
Ja. Typ een tag en bekijk direct het resultaat. Begin met de basisstructuur (<h1>, <p>, <a>, <img>), voeg vervolgens een <style>-blok toe en experimenteer met kleuren en lay-out. Die onmiddellijke feedback is veel sneller dan het bewerken van een bestand en het vernieuwen van een browsertabblad.
Werkt het als een responsieve preview?
Ja. Schakel het voorbeeld tussen desktop (volledige breedte), tablet (768px) en mobiel (375px). Voeg een viewport-metatag toe aan uw <head>, zodat uw mediavragen reageren zoals ze zouden reageren op een echte telefoon.
