HTML-visare

Skriv eller klistra in HTML och se det renderade resultatet direkt i webbläsaren.

Layout:Skript är sandboxade och kan inte köras.

HTML-kod

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 16px; color: #1e293b; }
    h1 { color: #3b82f6; }
    button { background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
    button:hover { background: #2563eb; }
  </style>
</head>
<body>
  <h1>HTML Viewer</h1>
  <p>Edit the HTML on the left to see it rendered here.</p>
  <button>Click me</button>
</body>
</html>

Förhandsgranskning

Om det här verktyget

HTML-visaren låter dig skriva eller klistra in HTML-kod och omedelbart se hur den renderas i en webbläsare. Förhandsgranskningen visas i en sandboxad iframe med skript inaktiverade — HTML från otillförlitliga källor kan visas säkert.

Verktyget stöder fullständiga HTML-dokument (med head, inline CSS och style-block) samt HTML-fragment. All bearbetning sker lokalt i din webbläsare.

Hur man använder

Skriv eller klistra in HTML i kodredigeraren till vänster.
Klicka på Rendera för att uppdatera förhandsgranskningen.
Byt till Staplade-layout för ett högre förhandsgranskningsområde.
Använd Tab för att indentera rader i redigeraren.

Användningsfall

Frontend-utvecklare testar HTML-kodavsnitt snabbt. E-postutvecklare förhandsgranskar HTML-e-postmallar. Studenter som lär sig HTML experimenterar med taggar och ser resultaten direkt. Kodgranskare verifierar renderad utdata visuellt.

Vanliga frågor

Varför är skript inaktiverade? — Förhandsgranskningens iframe använder sandbox="allow-same-origin" för att blockera JavaScript-körning — HTML från okända källor kan visas säkert.
Kan jag förhandsgranska CSS? — Ja. Inkludera style-taggar i din HTML eller använd inline-stilar. Externa stilark från andra ursprung kan blockeras av CSP.
Stöder den fullständiga HTML-dokument? — Ja. Du kan klistra in ett komplett HTML-dokument inklusive DOCTYPE, head och body.