Hva er HTML-viseren?

Vil du se hvordan HTML-en din ser ut uten å starte en server? Det er nettopp det dette verktøyet gjør. HTML-viseren tar HTML-en (HyperText Markup Language) din og rendrer den live i en forhåndsvisning ved siden av koden.

Enten du prototyper en landingsside, feilsøker en e-postmal eller bare sjekker at koden din er korrekt, gir dette verktøyet umiddelbar visuell tilbakemelding. Ingen grunn til å lagre filer eller starte en lokal server.

Alt kjøres i nettleseren din. HTML-en din sendes aldri til serverne våre. Det er raskt, gratis og privat.

Slik bruker du HTML-viseren

Følg disse trinnene for å vise og jobbe med HTML.

Lim inn HTML eller les inn et eksempel

Lim inn HTML i venstre redigerer. Det kan være en komplett side med <html>-, <head>- og <body>-tagger, eller bare et fragment. Klikk på Eksempel for å laste eksempel-HTML.

<div style="font-family: Arial, sans-serif; padding: 20px;">
  <h1 style="color: #333;">Hei Verden</h1>
  <p>Dette er en <strong>HTML-eksempelside</strong>.</p>
  <ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
  </ul>
</div>

Forhåndsvisningen oppdateres automatisk mens du skriver.

Se live-forhåndsvisning

Høyre panel rendrer HTML-en din direkte. Du ser nøyaktig hvordan nettleseren tolker koden din — stiler, layout, bilder og alt annet. Forhåndsvisningen er isolert i en iframe.

Juster og iterer

Rediger HTML i venstre panel og se hvordan forhåndsvisningen oppdateres i sanntid. Dra skillelinjen for å justere panelstørrelser.

Del arbeidet ditt

Klikk på Del for å generere en delbar lenke til HTML-en din.

Når du bruker dette

Prototype UI-fragmenter

Vil du raskt teste en knappstil, kortlayout eller navigasjonslinje? Lim inn HTML her og se umiddelbart hvordan det rendres.

Feilsøke e-postmaler

E-post-HTML er spesielt problematisk — inline-stiler, tabelloppsett, merkelig renderingsoppførsel. Lim inn malen din her for å se hvordan den ser ut før du sender.

Lære HTML

Hvis du lærer HTML, er dette verktøyet perfekt for å eksperimentere. Skriv tagger, se hva de gjør. Test ulike attributter og sjekk resultatet direkte.

Gjennomgå kodefragmenter

Fikk du et HTML-fragment via Slack eller i en PR-kommentar? Lim det inn her for å se hvordan det faktisk ser ut.

Ofte stilte spørsmål

Lagres HTML-en min noe sted?

Nei. Alt kjøres helt i nettleseren din med JavaScript. HTML-en din forlater aldri datamaskinen din med mindre du eksplisitt klikker på "Del".

Støtter den CSS og JavaScript?

Ja. Inline-stiler og <style>-tagger rendres korrekt. JavaScript i <script>-tagger kjøres i den isolerte iframe-forhåndsvisningen.

Er forhåndsvisningen sikker?

Forhåndsvisningen rendres i en isolert iframe som skiller den fra hovedsiden.

Kan jeg bruke komplette HTML-dokumenter?

Selvfølgelig. Du kan lime inn et komplett HTML-dokument med <!DOCTYPE html>, <html>, <head> og <body>, eller bare et fragment som en <div>.

Hvordan fungerer live-forhåndsvisningen?

Mens du skriver i redigereren, oppdaterer verktøyet forhåndsvisnings-iframen med HTML-innholdet etter en kort 300 ms-forsinkelse.

Kan jeg endre størrelsen på redigerer- og forhåndsvisningspanelene?

Ja. Dra skillelinjen mellom de to panelene for å justere størrelsene deres. På mobile enheter stables panelene vertikalt.

Andre HTML- og markup-verktøy

Denne viseren er utmerket for å forhåndsvise HTML, men noen ganger trenger du andre ting: