Просмотр HTML онлайн и редактор кода

Вставьте HTML, откройте файл или поправьте пример. Превью обновляется по мере ввода и работает в песочнице, так что код не может повлиять на эту страницу.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Билет на митап</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f4f4f8; margin: 0; padding: 32px; }
    .ticket { max-width: 340px; margin: 0 auto; background: #fff; border-radius: 16px;
              padding: 24px; box-shadow: 0 8px 24px rgba(20, 20, 60, .08); }
    .tag { color: #6d4aff; font-weight: 600; letter-spacing: .06em; font-size: 12px; }
    h1 { font-size: 26px; margin: 6px 0 4px; color: #16142b; }
    p { color: #55546a; margin: 0 0 16px; }
    .row { display: flex; justify-content: space-between; border-top: 1px dashed #d7d6e3;
           padding-top: 14px; font-size: 14px; color: #3c3b4f; }
    button { margin-top: 18px; width: 100%; border: 0; border-radius: 10px; padding: 12px;
             background: #6d4aff; color: #fff; font-size: 15px; cursor: pointer; }
    @media (min-width: 700px) { .ticket { max-width: 520px; } h1 { font-size: 32px; } }
  </style>
</head>
<body>
  <div class="ticket">
    <div class="tag">ФРОНТЕНД-МИТАП</div>
    <h1>CSS Grid на практике</h1>
    <p>Четверг, 19:00, зал 2. Возьмите ноутбук.</p>
    <div class="row"><span>Место</span><strong>B-14</strong></div>
    <button onclick="this.textContent = 'Добавлено в календарь'">Добавить в календарь</button>
  </div>
</body>
</html>

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

Вставьте код в редактор или нажмите Открыть файл, чтобы загрузить .html-файл с устройства.
Смотрите превью справа. Переключайтесь между Телефон (390px), Планшет (768px) и Десктоп, чтобы проверить вёрстку на каждой ширине.
Правьте, пока всё не встанет на место, и нажмите Скачать .html, чтобы сохранить результат.

Выключите Обновлять при вводе, если работаете с большой страницей или со скриптами, которые должны выполниться один раз: тогда превью обновится только по кнопке «Запустить».

Для чего его используют

Проверить сниппет перед вставкой в проект. Код из чат-бота, ответа на форуме или от коллеги сначала отрисуется здесь, не трогая ваш репозиторий.
Открыть HTML-вложение на телефоне. Почтовые клиенты часто показывают .html-файлы как сырой текст. Откройте файл здесь, и он отобразится как страница.
Проверить адаптивную вёрстку. Кнопки «Телефон» и «Планшет» меняют ширину превью на реальную ширину устройств, так что media queries и брейкпоинты Tailwind срабатывают так же, как на устройстве.

Что разрешено в песочнице

Превью открывается в iframe, у которого задан только sandbox="allow-scripts". Ваши HTML, CSS и JavaScript выполняются, внешние ресурсы вроде Google Fonts или скрипта Tailwind CDN загружаются как обычно. Фрейм получает непрозрачный origin, поэтому не может читать cookie и хранилище img2html.com, отправлять формы, открывать всплывающие окна и уводить эту вкладку на другой адрес. Вывод console.log уходит в инструменты разработчика вашего браузера.

Вопросы о просмотре HTML

Мой HTML куда-то загружается?

Нет. Код остаётся в этой вкладке браузера. Превью собирается из локальной строки (srcdoc у iframe), поэтому ничего не отправляется ни в IMG2HTML, ни кому-либо ещё.

JavaScript в превью выполняется?

Да, внутри изолированного iframe с уникальным непрозрачным origin. Скрипты могут менять превью, но не могут читать эту страницу, её cookie и хранилище. Формы, всплывающие окна и переходы во вкладке заблокированы.

Почему не подгружаются мои картинки или CSS-файлы?

Относительным путям вроде images/logo.png или style.css не от чего отсчитываться, когда вы вставляете код или открываете один файл. Используйте абсолютные URL (https://...) или перенесите CSS внутрь тега <style>.

Можно открыть .html-файл с компьютера или телефона?

Да. Нажмите «Открыть файл», выберите файл .html или .htm, и он загрузится в редактор и превью. Это ещё и самый быстрый способ прочитать HTML-вложение из письма на телефоне.

Как сохранить изменения?

Кнопка «Скачать .html» сохраняет текущий код в файл. Между визитами ничего не хранится, так что скачайте результат до того, как закроете вкладку.