HTML-просмотрщик

Вставьте HTML-код и сразу увидите отрендеренную страницу рядом с редактором. Без загрузки файлов и установки: всё работает локально в браузере, бесплатно.

Чтобы открыть HTML-файл онлайн, скопируйте его исходный код и вставьте в редактор слева — панель справа мгновенно отрендерит страницу. Вы получаете живой предпросмотр, редактируемый HTML-редактор с подсветкой синтаксиса, копирование в один клик и полноэкранный режим. Всё работает внутри браузера в изолированном iframe: файл никуда не загружается.

HTML-просмотрщик

1485

Редактор

Код

Предпросмотр

Живой предпросмотр

Вам также может понадобиться

HTML в JSON

Преобразовать структуру HTML в дерево JSON.

Открыть инструмент

HTML минификатор/форматер

Минифицируйте или форматируйте HTML-текст с отступом в 2/4 пробела.

Открыть инструмент

Markdown Просмотрщик

Просматривайте и редактируйте Markdown с живой визуализацией.

Открыть инструмент

Онлайн-просмотрщик XML

Открывайте, просматривайте и форматируйте XML-файлы онлайн с древовидным просмотром и валидацией.

Открыть инструмент

Как пользоваться HTML-просмотрщиком

  1. 1

    Скопируйте исходный код

    Откройте .html-файл текстовым редактором — «Блокнот» в Windows, TextEdit в macOS или любой редактор кода — и скопируйте всё содержимое.

  2. 2

    Вставьте код в редактор

    Вставьте разметку в левую панель. Можно и нажать «Пример», чтобы загрузить готовую демо-страницу и начать с неё.

  3. 3

    Посмотрите результат справа

    Панель предпросмотра рендерит разметку примерно через полсекунды после остановки ввода — точно так же, как это сделал бы браузер.

  4. 4

    Правьте, копируйте, разворачивайте

    Меняйте код и сразу видите результат, «Копировать» забирает готовый HTML, полноэкранный режим даёт больше места (выход — Esc).

Источники

  • MDN — HTML

    Справочник и руководства по всем HTML-элементам и атрибутам, на русском языке.

  • WHATWG — HTML Standard

    Живой стандарт, определяющий синтаксис HTML и правила рендеринга в браузерах (на английском).

  • MDN — элемент iframe и атрибут sandbox

    Описание ограничений sandbox, которые применяются к панели предпросмотра (страница доступна только на английском).

Связанные инструменты

Часто задаваемые вопросы

Как открыть HTML-файл онлайн?
Откройте .html-файл в текстовом редакторе, скопируйте исходный код и вставьте его в редактор на этой странице. Предпросмотр отрендерит страницу сразу — загружать файл на сервер и устанавливать программы не нужно.
Чем открыть файл HTML?
Двойной щелчок открывает готовую страницу в браузере, а «Блокнот» или редактор кода показывает исходный код. Этот просмотрщик даёт и то и другое одновременно: код слева, отрендеренная страница справа.
Поддерживаются ли .htm и .mhtml?
Файл .htm — то же самое, что .html, его код вставляется без проблем. Формат .mhtml — это архив страницы вместе с ресурсами, его содержимое здесь не отрендерится: сначала сохраните страницу как обычный HTML.
Чем это отличается от просмотра исходного кода страницы (Ctrl+U)?
Ctrl+U показывает готовый код чужого сайта только для чтения. Здесь код можно вставить, править и сразу видеть, как меняется отрендеренная страница — то есть экспериментировать, а не только читать.
Как открыть HTML-файл на телефоне (iPhone или Android)?
Страница работает в мобильном Safari и Chrome: редактор и предпросмотр располагаются друг под другом. Чтобы добраться до файла на устройстве, откройте его в «Файлах» или файловом менеджере текстовым редактором и скопируйте код сюда.
Можно ли перевести HTML в PDF?
Напрямую нет — инструмент только рендерит и правит HTML. Когда предпросмотр выглядит как нужно, скопируйте код в локальный .html-файл, откройте его в браузере и выберите «Печать» → «Сохранить как PDF».
Загружаются ли внешние CSS, JavaScript и картинки, и насколько это безопасно?
Абсолютные https-ссылки (например, на CDN) работают, а относительные пути вида ./style.css — нет, потому что у предпросмотра нет своей папки. Кадр изолирован через sandbox: скрипты разрешены, но доступа к тому же origin нет, поэтому cookie, хранилище и диалоги alert заблокированы.
Можно ли сохранить или скачать результат?
Кнопки скачивания нет. Нажмите «Копировать», вставьте разметку в .html-файл на своём компьютере и сохраните его там — код всё равно не покидает браузер.