Просмотрщик HTML
Просмотр HTML в frame.
Об этом инструменте
Инструмент показывает фрагмент HTML в iframe с песочницей, чтобы оценить структуру без отдельного файла. Скрипты изолированы, поэтому это предпросмотр разметки, а не запуск полноценного приложения.
Как пользоваться
Вставьте фрагмент, включите предпросмотр и изучите рамку. Подходит для блоков письма и черновиков статичных компонентов, которые нужно проверить за несколько секунд.
Пример
В примере использованы inline-стили, чтобы сразу было что видеть.
Ввод
<article style="font-family:system-ui;padding:1rem">
<h1 style="margin:0 0 .5rem">Preview card</h1>
<p style="margin:0;color:#334155">Sandboxed HTML viewer example.</p>
</article>Вывод
(rendered in the preview frame)Совет
Если результат выглядит пустовато, фрагменту не хватает внешней таблицы стилей, которую рамка не загружает.
Полезно знать
Выполняются ли скрипты в предпросмотре?
Нет. Фрейм изолирован без разрешения на скрипты, поэтому показывает только разметку и CSS. Поведение проверяйте на настоящей странице.
Будут ли в предпросмотре работать классы Tailwind?
По умолчанию нет: у фрейма нет таблицы стилей, поэтому классы-утилиты ничего не делают, пока вы не добавите <link> на скомпилированный CSS или не вставите его в блок <style>. Скрипт Tailwind Play CDN запуститься не может, так как скрипты заблокированы.