Vad är HTML-visaren?

Vill du se hur din HTML ser ut utan att starta en server? Det är precis vad det här verktyget gör. HTML-visaren tar din HTML (HyperText Markup Language) och renderar den live i en förhandsgranskning bredvid koden.

Oavsett om du prototypar en landningssida, felsöker en e-postmall eller helt enkelt kontrollerar att din kod är korrekt ger det här verktyget omedelbar visuell återkoppling. Ingen anledning att spara filer eller starta en lokal server.

Allt körs i din webbläsare. Din HTML skickas aldrig till våra servrar. Det är snabbt, gratis och privat.

Hur man använder HTML-visaren

Följ dessa steg för att visa och arbeta med HTML.

Klistra in HTML eller läs in ett exempel

Klistra in HTML i den vänstra redigeraren. Det kan vara en komplett sida med <html>-, <head>- och <body>-taggar, eller bara ett fragment. Klicka på Exempel för att läsa in exempel-HTML.

<div style="font-family: Arial, sans-serif; padding: 20px;">
  <h1 style="color: #333;">Hej Världen</h1>
  <p>Det här är en <strong>HTML-exempelsida</strong>.</p>
  <ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
  </ul>
</div>

Förhandsgranskningen uppdateras automatiskt medan du skriver.

Se live-förhandsgranskning

Den högra panelen renderar din HTML direkt. Du ser precis hur webbläsaren tolkar din kod — stilar, layout, bilder och allt annat. Förhandsgranskningen är isolerad i en iframe.

Justera och iterera

Redigera HTML i den vänstra panelen och se hur förhandsgranskningen uppdateras i realtid. Dra avdelare för att justera panelstorlekar.

Dela ditt arbete

Klicka på Dela för att generera en delbar länk till din HTML.

När du använder detta

Prototypa UI-fragment

Vill du snabbt testa en knappstil, kortlayout eller navigeringsfält? Klistra in HTML här och se direkt hur det renderas.

Felsöka e-postmallar

E-post-HTML är särskilt problematisk — inline-stilar, tabelllayouter, konstigt renderingsbeteende. Klistra in din mall här för att se hur den ser ut innan du skickar.

Lära sig HTML

Om du lär dig HTML är det här verktyget perfekt för att experimentera. Skriv taggar, se vad de gör. Testa olika attribut och kontrollera resultatet direkt.

Granska kodfragment

Fick du ett HTML-fragment via Slack eller i en PR-kommentar? Klistra in det här för att se hur det faktiskt ser ut.

Vanliga frågor

Lagras min HTML någonstans?

Nej. Allt körs helt i din webbläsare med JavaScript. Din HTML lämnar aldrig din dator om du inte uttryckligen klickar på "Dela".

Stöder den CSS och JavaScript?

Ja. Inline-stilar och <style>-taggar renderas korrekt. JavaScript i <script>-taggar körs i den isolerade iframe-förhandsgranskningen.

Är förhandsgranskningen säker?

Förhandsgranskningen renderas i en isolerad iframe som separerar den från huvudsidan.

Kan jag använda kompletta HTML-dokument?

Självklart. Du kan klistra in ett komplett HTML-dokument med <!DOCTYPE html>, <html>, <head> och <body>, eller bara ett fragment som en <div>.

Hur fungerar live-förhandsgranskningen?

Medan du skriver i redigeraren uppdaterar verktyget förhandsgransknin-iframe:n med HTML-innehållet efter en kort 300 ms-fördröjning.

Kan jag ändra storlek på redigerarens och förhandsgranskningspanelerna?

Ja. Dra separatorfältet mellan de två panelerna för att justera deras storlekar. På mobila enheter staplas panelerna vertikalt.

Andra HTML- och uppmärkningsverktyg

Den här visaren är utmärkt för att förhandsgranska HTML, men ibland behöver du andra saker: