Przeglądarka HTML

Napisz lub wklej HTML i natychmiast zobaczyć wyrenderowany wynik w przeglądarce.

Układ:Skrypty są w sandboxie i nie mogą działać.

Kod HTML

<!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>

Podgląd

O tym narzędziu

Przeglądarka HTML pozwala pisać lub wklejać kod HTML i natychmiast widzieć, jak jest wyrenderowany w przeglądarce. Podgląd wyświetlany jest w izolowanym iframe ze skryptami wyłączonymi — HTML z niezaufanych źródeł można bezpiecznie oglądać.

Narzędzie obsługuje pełne dokumenty HTML (z head, CSS inline i blokami style) oraz fragmenty HTML. Całe przetwarzanie odbywa się lokalnie w przeglądarce.

Jak używać

Wpisz lub wklej HTML do edytora kodu po lewej.
Kliknij Renderuj, aby zaktualizować podgląd.
Przełącz na układ Ułożone dla wyższego obszaru podglądu.
Używaj Tab do wcięcia wierszy w edytorze.

Przypadki użycia

Deweloperzy frontend szybko testują fragmenty HTML. Deweloperzy emaili przeglądają szablony HTML. Uczący się HTML eksperymentują z tagami i natychmiast widzą wyniki. Recenzenci kodu wizualnie weryfikują wyrenderowany wynik.

Często zadawane pytania

Dlaczego skrypty są wyłączone? — Iframe podglądu używa sandbox="allow-same-origin" aby zablokować wykonanie JavaScript — HTML z nieznanych źródeł można bezpiecznie oglądać.
Czy mogę przeglądać CSS? — Tak. Dołącz tagi style do HTML lub użyj stylów inline. Zewnętrzne arkusze stylów z innych źródeł mogą być blokowane przez CSP.
Czy obsługuje pełne dokumenty HTML? — Tak. Możesz wkleić kompletny dokument HTML włącznie z DOCTYPE, head i body.