Podgląd HTML online (HTML Viewer)
Bezpiecznie sprawdź nieznany HTML. Sanitizacja (no-script, no-handlers), blokada zasobów zewnętrznych i podgląd bez klikania w linki. Szybko i prywatnie. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Podgląd HTML online
Otwórz i przeglądaj pliki HTML w 100% lokalnie, bez wysyłania na serwer.
Otwórz plik HTML
Przeciągnij i upuść HTML
albo wybierz plik z dysku. Obsługiwane: .html, .htm, .xhtml.
Bezpieczeństwo i prywatność
Wskazówki
Edytor / źródło
Podgląd (sandbox)
render w iframe sandbox + sanitizacja. Zasoby i linki mogą być zablokowane dla prywatności.
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćPodgląd HTML online - bezpieczne renderowanie, analiza źródła i podgląd w iframe (local-first)
Masz plik HTML, fragment kodu ze strony, szablon newslettera albo landing i chcesz go szybko podejrzeć bez wrzucania gdziekolwiek? Ten podgląd HTML online działa lokalnie w Twojej przeglądarce: wczytujesz plik lub wklejasz kod, a narzędzie pokazuje podgląd w iframe, pozwala przeszukiwać źródło, liczy statystyki i, co najważniejsze, ma opcje bezpieczeństwa: usuwa skrypty, wycina event handlery, blokuje requesty i potrafi wyłączyć linki. Krótko mówiąc: oglądasz HTML bez tego uczucia, że za chwilę coś „odpali” i narobi bałaganu.
Zero uploadu. Plik jest czytany w przeglądarce, a podgląd generowany przez srcdoc w iframe. Dla użytkownika to czysty komfort i prywatność.
Opcje sanitizacji: usuwanie script, usuwanie on* handlerów, blokada atrybutów sieciowych oraz dezaktywacja linków.
Podświetlanie wyników w źródle, nawigacja poprzedni i następny, tryb case-insensitive oraz licznik dopasowań.
Po co w ogóle podgląd HTML online, skoro jest przeglądarka i „Wyświetl źródło”?
Teoretycznie możesz otworzyć plik HTML w przeglądarce i już. Praktycznie bywa tak, że HTML ma skrypty, trackery, zewnętrzne zasoby, osadzone formularze, przekierowania, eventy onclick i całą resztę niespodzianek. A jeśli to jest fragment kodu od klienta, z mailingu albo z nieznanego szablonu, to ostatnia rzecz, jakiej chcesz, to pełne wykonanie wszystkiego „na żywca”.
Tu wchodzi narzędzie typu Podgląd HTML online, ale z twistem: zamiast robić tylko preview, daje Ci kontrolę nad ryzykiem i zachowaniem strony. To jest różnica między „otworzyłem HTML” a „bezpiecznie go obejrzałem, wyszukałem to, co potrzebuję, skopiowałem, pobrałem i sprawdziłem statystyki”.
Co dokładnie robi to narzędzie w Twoim kodzie
1) Wczytanie pliku i metadane
Narzędzie obsługuje pliki .html, .htm i .xhtml oraz typy MIME typu text/html i application/xhtml+xml. Plik możesz wskazać przyciskiem lub przeciągnąć do strefy drop. Po wczytaniu dostajesz metadane: nazwa, rozmiar, typ oraz data modyfikacji.
- wczytywanie pliku po stronie przeglądarki (FileReader)
- kontrola typu pliku, żeby nie wczytać przypadkowych formatów
- czytelny panel metadanych po wczytaniu
Ten krok jest banalny, ale mega ważny: gdy masz kilka wersji landing page’a, łatwo pomylić plik. Metadane minimalizują takie wpadki.
2) Edytor źródła i natychmiastowe odświeżanie
Po wczytaniu HTML trafia do textarea, gdzie możesz go edytować ręcznie. Każda zmiana jest debounced i po chwili aktualizuje podgląd. Możesz też kliknąć przycisk odświeżania, gdy wolisz pracę „na żądanie”.
- tryb pracy: wklejam, poprawiam, od razu widzę efekt
- przycisk „Refresh” do kontrolowanego renderu
- czytelna sekcja „empty state”, gdy nie ma treści
To świetne do małych poprawek: usunąć jeden div, sprawdzić CSS, zobaczyć układ, zorientować się, gdzie w HTML jest problem.
Bezpieczny podgląd HTML: cztery przełączniki, które robią różnicę
Główny sens tego narzędzia jest w tym, że nie musisz ufać HTML-owi. Masz cztery opcje, które działają jak prosta, praktyczna „tarcza”: nie obiecują laboratoriów bezpieczeństwa, ale świetnie domykają większość codziennych ryzyk.
Opcja usuwa tagi <script>. To jest pierwsza linia obrony, bo skrypty są najczęstszym źródłem „niespodzianek”.
Wycinane są atrybuty zaczynające się od on (onclick, onload itd.). Dzięki temu HTML nie odpali akcji po kliknięciu lub załadowaniu.
Narzędzie usuwa atrybuty typu src, srcset, poster, action, data, codebase oraz href w linkach. Efekt: minimalizujesz pobieranie zewnętrznych zasobów.
Linki tracą href, więc nic Cię nie wyśle w nieznane miejsce. Przydatne, gdy analizujesz strony z wieloma odnośnikami.
Dodatkowo narzędzie usuwa tag <base>, żeby HTML nie przepisywał Ci adresów względnych na inne domeny. I dorzuca drobny styl „czytelności” do head, jeśli w dokumencie go nie ma, żeby preview wyglądało jak dokument, a nie surowy dump.
Trzy panele: Podgląd, Źródło, Info
Twoje UI ma przejrzysty podział, który dobrze odpowiada realnym potrzebom: raz chcesz zobaczyć stronę, raz chcesz znaleźć fragment w kodzie, a raz chcesz tylko szybkie liczby i tryb bezpieczeństwa.
Panel Podgląd
To serce narzędzia: z jednej strony edytor HTML, z drugiej iframe z wynikiem. Masz przyciski: wyczyść, kopiuj źródło, pobierz HTML oraz odśwież podgląd. Dodatkowo w iframe pojawia się banner ostrzegawczy, że to podgląd w trybie ograniczonym.
- szybkie testy layoutu i struktury
- wklejanie fragmentów HTML z różnych źródeł
- bezpieczne oglądanie szablonów landingów i maili
Panel Źródło
W tym widoku HTML jest pokazany jako tekst z opcją wyszukiwania i podświetlania wyników. Wpisujesz frazę, zaznaczenia pojawiają się jako mark, a Ty przeskakujesz poprzedni i następny. Jest też przełącznik case-insensitive, więc nie musisz pamiętać, czy było „Header” czy „header”.
- szukanie klas, id, sekcji, meta tagów i konkretnych fragmentów
- podświetlenia wyników bez ręcznego ctrl+f w przeglądarce
- licznik dopasowań i długości tekstu
Panel Info
Ten panel jest jak „szybki pulpit”: liczba linii, liczba znaków, rozmiar w bajtach oraz informacja o trybie sanitizacji. Dla wielu zastosowań to właśnie ten widok daje odpowiedź w 5 sekund: czy wklejony kod jest ogromny, czy drobny, oraz jakie zabezpieczenia są aktualnie włączone.
Jest też przypomnienie o trybie local-first i prywatności. W praktyce to buduje zaufanie użytkownika i tłumaczy, dlaczego narzędzie jest wygodne do plików, których nie chcesz wysyłać.
Najczęstsze zastosowania podglądu HTML online (real-life)
Sprawdzasz HTML z kreatora, poprawiasz drobne błędy w strukturze, upewniasz się, że sekcje układają się logicznie.
Podglądasz HTML maila. Wyłączasz linki i requesty, żeby nic nie pobierało zasobów w tle, a Ty widzisz layout.
Dostałeś fragment kodu od kogoś z zespołu. Wklejasz, oglądasz, wyszukujesz klasy i kopiujesz poprawioną wersję.
Polujesz na zduplikowane id, brakujący closing tag albo sekcję, która psuje layout. Źródło i search robią robotę.
Sprawdzasz czy HTML nie ma podejrzanych scriptów, eventów onclick i zewnętrznych requestów. Zanim cokolwiek odpalisz.
Jak bezpiecznie sprawdzać nieznany HTML: krótka procedura
Jeśli masz HTML z niepewnego źródła, polecam prostą sekwencję, która pasuje do Twojego UI. Działa szybko, a jednocześnie rozsądnie ogranicza ryzyko.
- Wczytaj plik albo wklej kod do edytora.
- Zostaw włączone: usuń skrypty, usuń handlery, blokuj requesty, wyłącz linki.
- Przejdź do panelu Źródło i wyszukaj frazy typu script, iframe, onload, onclick, fetch, analytics.
- Jeśli wszystko wygląda ok, możesz stopniowo wyłączać zabezpieczenia, ale tylko jeśli masz powód i wiesz, co robisz.
- Gdy chcesz pokazać komuś wynik, użyj „Otwórz zsanityzowane w nowej karcie”, zamiast wysyłać surowy plik.
Dlaczego blokowanie requestów jest takie ważne w podglądzie HTML
Wiele plików HTML od razu próbuje pobrać zasoby: obrazki, fonty, CSS z CDN, skrypty analityczne. To może spowolnić podgląd, zaśmiecić sieć, a czasem nawet „zadzwonić” do zewnętrznego systemu. Dlatego opcja blokowania requestów ma sens nawet wtedy, gdy plik jest „zaufany”.
W Twoim rozwiązaniu blokada requestów działa bardzo praktycznie: wycina atrybuty, które uruchamiają pobieranie, a także usuwa href w tagach link. Dzięki temu w większości przypadków preview pokazuje strukturę i układ, ale nie ściąga zewnętrznych zasobów.
Wyszukiwanie w źródle HTML: jak z niego wycisnąć maksimum
Panel Źródło jest świetny, gdy masz konkretne cele. Kilka przykładów fraz, które najczęściej oszczędzają czas:
- class= i nazwa klasy - szybko namierzysz styling i sekcje
- id= - łapiesz anchor, duplikaty i powiązania
- <meta - sprawdzasz meta viewport, opis, robots
- <img - weryfikujesz źródła, alt i strukturę obrazów
- href= - sprawdzasz linkowanie, zanim linki zostaną wyłączone
A jeśli szukasz czegoś „wielkościowego”, panel Info da Ci szybki sygnał: ile jest linii i znaków. To pomaga ocenić, czy wklejony kod jest małą sekcją, czy całym dokumentem.
FAQ - podgląd HTML online
Czy plik HTML jest wysyłany na serwer?
Nie. Narzędzie działa local-first: plik czytany jest w przeglądarce, a podgląd generowany lokalnie. To dobre rozwiązanie do prywatnych lub firmowych plików.
Dlaczego w podglądzie nie działają skrypty i linki?
Bo domyślnie włączone są opcje bezpieczeństwa: usuwanie script i handlerów, blokada requestów i wyłączenie linków. Możesz je przełączać, ale sens narzędzia jest taki, żeby HTML oglądać bez ryzyka.
Co oznacza „Otwórz zsanityzowane w nowej karcie”?
Narzędzie generuje bezpieczną wersję HTML, zapisuje ją jako blob i otwiera w nowej karcie. To wygodne, gdy chcesz większy podgląd niż w iframe.
Czy mogę wkleić kod HTML bez pliku?
Tak. Wystarczy wkleić HTML do edytora i zobaczyć podgląd. Plik jest tylko jedną z opcji wejścia.
Do czego przydaje się panel Info?
Do szybkiej oceny: ile jest linii, znaków, jaki jest rozmiar oraz jaki tryb sanitizacji jest aktywny. To przyspiesza pracę, gdy analizujesz wiele plików.
Gotowe: sprawdź HTML bezpiecznie, wyszukaj fragmenty i pobierz wynik
Ten podgląd HTML online jest po prostu praktyczny: wczytujesz lub wklejasz kod, ustawiasz zabezpieczenia, oglądasz wynik w iframe, przeszukujesz źródło i masz pełną kontrolę nad tym, co się dzieje. Jeśli często pracujesz z szablonami, snippetami lub plikami od klientów, to jest narzędzie, które realnie skraca czas.
Wczytaj plik HTML i zobacz podgląd