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

Вводите или вставляйте HTML и мгновенно видьте результат рендеринга в браузере.

Макет:Скрипты изолированы и не могут выполняться.

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>

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

Об этом инструменте

HTML-просмотрщик позволяет вводить или вставлять HTML-код и сразу видеть результат рендеринга в браузере. Предпросмотр отображается в изолированном iframe с отключёнными скриптами — HTML из ненадёжных источников можно просматривать безопасно.

Поддерживаются полные HTML-документы (с head, инлайн CSS и блоками style) и HTML-фрагменты. Все обработка происходит локально в браузере.

Как использовать

Введите или вставьте HTML в редактор кода слева.
Нажмите «Рендер» для обновления предпросмотра.
Переключитесь в режим «Стопкой» для большей области предпросмотра.
Используйте Tab для отступов в редакторе.

Случаи использования

Фронтенд-разработчики тестируют HTML-фрагменты. Email-разработчики просматривают HTML-шаблоны писем. Студенты экспериментируют с тегами и видят результаты мгновенно. Ревьюеры проверяют рендеринг визуально.

Частые вопросы

Почему скрипты отключены? — Iframe предпросмотра использует sandbox="allow-same-origin" для блокировки JavaScript — HTML из неизвестных источников можно просматривать безопасно.
Можно ли просматривать CSS? — Да. Включите теги style в HTML или используйте инлайн-стили. Внешние таблицы стилей из других источников могут блокироваться CSP.
Поддерживаются ли полные HTML-документы? — Да. Можно вставить полный HTML-документ, включая DOCTYPE, head и body.