Wat is HTML Viewer?

Wil je zien hoe je HTML eruitziet zonder een server op te starten? Dat is precies wat dit hulpmiddel doet. HTML Viewer neemt je HTML (HyperText Markup Language) en rendert het live in een previewpaneel naast je code. HTML is de basis van elke webpagina — gedefinieerd door de WHATWG HTML Living Standard.

Of je nu een landingspagina prototype maakt, een e-mailtemplate debugt, of gewoon controleert of je opmaak correct is, dit hulpmiddel geeft je directe visuele feedback. Geen bestanden opslaan, geen browsertabblad openen of lokale server starten nodig.

Alles draait in je browser. Je HTML raakt onze servers nooit aan. Het is snel, gratis en privé.

Hoe gebruik je HTML Viewer

Volg deze stappen om je HTML te bekijken en mee te werken.

Plak je HTML of laad een voorbeeld

Plak je HTML in de linker editor. Het kan een volledige pagina zijn met <html>-, <head>- en <body>-tags, of alleen een fragment. Klik op Voorbeeld om voorbeeld-HTML te laden.

<div style="font-family: Arial, sans-serif; padding: 20px;">
  <h1 style="color: #333;">Hallo Wereld</h1>
  <p>Dit is een <strong>voorbeeld HTML</strong>-pagina.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

De preview wordt automatisch bijgewerkt terwijl je typt.

Bekijk de live preview

Het rechter paneel rendert je HTML direct. Je ziet precies hoe de browser je opmaak interpreteert — stijlen, indeling, afbeeldingen en alles. De preview is beveiligd via een iframe.

Aanpassen en herhalen

Bewerk je HTML in het linker paneel en bekijk hoe de preview in realtime wordt bijgewerkt. Versleep de splitter om de paneelgroottes aan te passen. Klik op Maximaliseren om de preview op volledig scherm te zien.

Deel je werk

Klik op Delen om een deelbare link voor je HTML te genereren. Ontvangers zien zowel de code als de gerenderde preview.

Wanneer je dit gebruikt

UI-fragmenten prototypen

Wil je snel een knopstijl, kaartindeling of navigatiebalk testen? Plak je HTML hier en zie het direct renderen. Veel sneller dan een nieuw bestand maken.

E-mailtemplates debuggen

E-mail-HTML is berucht lastig — inline stijlen, tabelindelingen, vreemde rendering. Plak je e-mailtemplate hier om te zien hoe het eruitziet voordat je het verstuurt.

HTML leren

Als je HTML aan het leren bent, is dit hulpmiddel perfect om mee te experimenteren. Schrijf tags, zie wat ze doen. Probeer verschillende attributen, controleer het resultaat direct.

Codefragmenten bekijken

Iemand heeft je een HTML-fragment gestuurd via Slack of in een PR-opmerking? Plak het hier om te zien hoe het er werkelijk uitziet.

Veelgestelde vragen

Wordt mijn HTML ergens opgeslagen?

Nee. Alles draait volledig in je browser via JavaScript. Je HTML verlaat je computer nooit, tenzij je expliciet op "Delen" klikt om een link te maken.

Ondersteunt het CSS en JavaScript?

Ja. Inline stijlen en <style>-tags worden correct gerenderd. JavaScript in <script>-tags wordt uitgevoerd binnen het beveiligde preview-iframe.

Is de preview veilig?

De preview wordt gerenderd in een beveiligd iframe, waardoor het geïsoleerd is van de hoofdpagina.

Kan ik volledige HTML-documenten gebruiken?

Absoluut. Je kunt een volledig HTML-document plakken met <!DOCTYPE html>, <html>, <head> en <body>-tags, of alleen een fragment zoals een <div>.

Hoe werkt de live preview?

Terwijl je in de editor typt, werkt het hulpmiddel het preview-iframe bij met je HTML-inhoud na een korte vertraging van 300 ms. Dit geeft je realtime feedback.

Kan ik de editor- en previewpanelen aanpassen?

Ja. Sleep de splitterbalk tussen de twee panelen om hun grootte aan te passen. Op mobiel stapelen de panelen verticaal.

Andere HTML- en opmaaktools

Deze viewer is geweldig voor het bekijken van HTML, maar soms heb je andere dingen nodig: