Softonic

Weergegeven-HTML-viewer

Stap 1 / 2
Volgende

Plak willekeurige HTML (een e-mailtemplate, een gescrapet paginafragment, een voorbeeld uit de documentatie) en klik op Renderen om het in een geïsoleerde iframe getekend te zien. Het frame draait met de strengste sandbox van de browser: scripts worden niet uitgevoerd, formulieren kunnen niets versturen en de markup kan niet navigeren of de omringende pagina raken. Het is de snelste manier om de vraag “hoe ziet deze markup er eigenlijk uit” te beantwoorden zonder een stagingserver op te zetten.

HTML bekijken

  1. 1

    Plak je HTML

    Zet een volledig document of een los fragment in het bronvak. Wat je plakt, is precies wat wordt gerenderd, zoals het geschreven staat.

  2. 2

    Klik op Renderen

    De viewer schrijft je HTML in een geïsoleerde iframe en toont het resultaat direct op de pagina.

  3. 3

    Lees het voorbeeld

    Het frame tekent je markup zoals een browser dat zou doen: koppen, tabellen, lijsten, inline stijlen en SVG verschijnen allemaal.

  4. 4

    Pas aan en render opnieuw

    Bewerk de bron en render zo vaak je wilt om te vergelijken hoe elke versie eruitziet.

Waarom het frame geïsoleerd is

Geplakte HTML kan van alles bevatten: <script>-tags, een <img onerror="...">-truc, een formulier dat data ergens naartoe stuurt, of een <iframe> die een andere site laadt. Om te voorkomen dat iets daarvan de pagina raakt, wordt het voorbeeld geschreven in een <iframe sandbox> met een leeg sandbox-attribuut, de strengste instelling die er is. In die modus blokkeert de browser tegelijk het uitvoeren van scripts, het versturen van formulieren, pop-ups, navigatie op topniveau en toegang tot dezelfde oorsprong. Je ziet het visuele resultaat zonder de markup enige macht te geven.

Omdat scripts nooit draaien, toont alles wat van JavaScript afhangt (een webcomponent die bij het laden hydrateert, een grafiek die zichzelf tekent, een framework dat in een lege <div> mount) alleen zijn statische markup, niet zijn resultaat met scripts. Dat is een bewuste afweging: een veilig, voorspelbaar voorbeeld boven een interactief.

Wat de viewer goed rendert

Inhoudstype Opmerkingen
E-mail-HTML Op tabellen gebaseerde lay-outs en inline stijlen verschijnen zoals de meeste clients ze tekenen
Tekst van een blogbericht Koppen, lijsten, citaten en afbeeldingen verschijnen geheel zonder scripting
Gescrapet fragment Laat zien of de markup die je hebt opgehaald compleet genoeg is om op zichzelf te staan
Inline SVG Tekent op elk formaat, handig om een icoon te controleren
Statische componentmarkup De markup wordt gerenderd; het gedrag in JavaScript niet

Goede toepassingen voor dit hulpmiddel

  • QA van e-mailtemplates. Plak de export uit je e-maileditor en bekijk de lay-out zonder jezelf een testbericht te sturen.
  • Snelle controle van gescrapete data. Je hebt wat innerHTML van een pagina gehaald: rendert het terug tot iets zinnigs? Zo niet, dan is het fragment waarschijnlijk onvolledig.
  • Beoordeling van Markdown naar HTML. Haal tekst door een converter (het hulpmiddel HTML naar Markdown doet de heen-en-terugweg) en bekijk de resulterende HTML hier.
  • Leren en lesgeven. Plak een voorbeeld uit de documentatie en zie precies hoe een browser het ordent.

Waar je op moet letten

  • Relatieve URL’s. Afbeeldingen en stylesheets waarnaar met een relatief pad als /assets/logo.png wordt verwezen, hebben geen server om zich tegen te herleiden en laden dus niet. Gebruik een absolute https://-URL of een data:-URI als je wilt dat een afbeelding verschijnt.
  • Externe bronnen. Lettertypen, stylesheets en afbeeldingen die van andere sites worden geladen, hangen ervan af of die sites het toestaan; sommige sturen headers die het laden binnen een frame blokkeren.
  • Geen scripting. Als je markup pas tot leven komt met JavaScript, toont het voorbeeld de staat vóór de scripts. Dat is de bedoeling, geen fout.

Veelgestelde vragen

Ja. Het voorbeeld draait in een volledig geïsoleerde iframe zonder enige toestemming, dus scripts kunnen niet worden uitgevoerd en de markup kan de omringende pagina niet bereiken. Zelfs kwaadaardige HTML kan alleen zichzelf tekenen binnen het frame.

Nee. De sandbox blokkeert het uitvoeren van scripts volledig, dus <script>-tags en inline event-handlers worden genegeerd. Je ziet de statische markup, en dat is precies wat het voorbeeld veilig maakt.

Een relatief pad heeft niets om zich tegen te herleiden, en sommige hosts sturen headers die verhinderen dat hun afbeeldingen binnen een frame laden. Gebruik een absolute https://-URL, of sluit de afbeelding in als een data:-URI.

Ja. Plak het hele document (doctype, <head>, <body> en al) en het wordt gerenderd zoals het geschreven staat. Een los fragment werkt ook; de rest vult de browser aan.

Dit hulpmiddel rendert de HTML die je als tekst plakt; het haalt nooit een URL op. Je bepaalt precies wat er wordt gerenderd, wat handig is voor e-mailtemplates, gescrapete fragmenten en snel debuggen.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

E-mailvalidator

Valideer een e-mailadres: RFC 5322-syntaxcontrole, live MX-record-zoekopdracht, plus details over lokaal deel, domein en lengte. Er wordt geen e-mail verstuurd.

EditorConfig-generator

Bouw een .editorconfig met je regels voor inspringen, regeleinde en tekenset, en voeg voor elke taal in je repository de juiste sectie toe: Python, Go, YAML, Makefile en meer.

Decimaal naar octaal omrekenaar

Zet hele decimale getallen om naar hun octale vorm (basis 8). Typ een getal en lees direct de octale cijfers. De methode van delen door 8 wordt hieronder uitgelegd.

Tool beschikbaar in andere talen