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

Четыре шага: вставить, запустить, проверить, скопировать. Всё в браузере.

Вставьте данные

Добавьте CSS, HTML, JSON или другой текст. Ничего не загружается на сервер.

Запустите инструмент

Нажмите «Конвертировать» или «Запустить». Результат появится сразу.

Проверьте результат

Просмотрите код и заметки перед использованием.

Скопируйте и вставьте

Скопируйте вывод и вставьте его в проект.

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

Инструмент показывает фрагмент 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)

Совет

Если результат выглядит пустовато, фрагменту не хватает внешней таблицы стилей, которую рамка не загружает.