Онлайн-редактор HTML с предварительным просмотром в реальном времени
Напишите HTML, CSS и JavaScript и просматривайте интерактивный предварительный просмотр в песочнице по мере ввода. Адаптивная ширина устройства, подсветка синтаксиса Monaco, форматирование Prettier, локальное автосохранение и экспорт в HTML, печать или PDF. Бесплатно, без регистрации.
Написание и предварительный просмотр HTML в режиме реального времени
Этот онлайн-редактор HTML с предварительным просмотром в реальном времени отображает HTML, CSS и JavaScript рядом с кодом примерно через 300 мс после того, как вы перестанете печатать. Проверьте макет на компьютере, планшете (768 пикселей) и мобильном устройстве (375 пикселей) по ширине, наведите порядок в разметке с помощью Prettier и экспортируйте в .html или PDF. Ваш код автоматически сохраняется только в этом браузере и никогда не загружается.
Этот живой HTML-редактор отображает вашу разметку рядом с кодом по мере его ввода, поэтому вы можете создавать прототипы макетов, тестировать фрагменты и учиться, экспериментируя, не создавая проект. Он использует Monaco (движок редактора VS Code) для подсветки синтаксиса и автодополнения и полностью запускается в вашем браузере без регистрации.
Функции
Предварительный просмотр в песочнице в реальном времени с режимами разделения, кода и предварительного просмотра.
Ширина адаптивного устройства (компьютерный компьютер, планшет 768 пикселей, мобильный телефон 375 пикселей)
Редактор Monaco с подсветкой синтаксиса
Улучшенное форматирование кода одним щелчком мыши
Автосохраняется в локальном хранилище этого браузера и никогда не загружается.
Экспорт в формате .html, печать/сохранение в формате PDF или быстрый многостраничный PDF-файл.
Как использовать Живой HTML-редактор
1
Вставьте или напишите свой HTML
Введите полный документ или его фрагмент. Поместите CSS в тег <style> и JavaScript в тег <script> или загрузите их из CDN через https.
2
Посмотрите предварительный просмотр в прямом эфире
Панель предварительного просмотра повторно отображается примерно через 300 мс после того, как вы перестанете печатать. Используйте режим разделения, кода или предварительного просмотра, чтобы организовать рабочее пространство.
3
Проверьте адаптивную ширину
Переключитесь между настольным компьютером (полная ширина), планшетом (768 пикселей) и мобильным устройством (375 пикселей), чтобы увидеть, как изменяется макет.
4
Уточнение разметки
Нажмите Prettiify, чтобы изменить отступ документа с помощью Prettier (отступ в 2 пробела, строки длиной 100 символов).
5
Экспортируйте свою работу
Загрузите точный код в формате .html, используйте «Печать» → «Сохранить как PDF», чтобы выбрать многостраничный текст, или нажмите «PDF», чтобы быстро сделать снимок.
Распространенные случаи использования
Новичок вводит HTML-тег и сразу видит, что он делает.
Разработчик изолирует сломанный фрагмент и отлаживает его, не запуская проект.
Маркетолог просматривает электронное письмо в формате HTML или блок целевой страницы размером 375 пикселей, прежде чем отправить его на проверку.
Учитель показывает код и визуализированные выходные данные рядом в классе.
Фрилансер макетирует компонент и отправляет клиенту файл .html или PDF.
Подробное руководство
Как протестировать HTML-код онлайн
Вставьте свой код в редактор, и предварительный просмотр обновится автоматически, без необходимости нажимать кнопку «Выполнить». Вы можете вставить весь документ с помощью <!DOCTYPE html>, <head> и <body> или просто его фрагмент, например <div>, с несколькими стилями, и браузер заполнит недостающую структуру. Переключитесь в режим предварительного просмотра, чтобы увидеть результат в полном размере, или в режим просмотра кода, если вам нужно место для записи. Если что-то выглядит не так, сначала нажмите «Уточнить»: благодаря чистым отступам незакрытый тег или неуместный </div> будет намного легче обнаружить.
Пишите HTML, CSS и JavaScript вместе
Редактор работает с одним HTML-документом, поэтому в него входят CSS и JavaScript. Добавьте стили в блок <style> в <head> или как встроенные атрибуты стиля, а также добавьте поведение в блок <script> в конце <body> или как атрибуты событий, например onclick. Вы также можете загрузить библиотеку или платформу из CDN, например Google Font, Play CDN Tailwind или библиотеку диаграмм, с помощью обычного тега <link> или <script src>, указывающего на URL-адрес https. Предварительная версия запускает ваши сценарии в реальном движке браузера, поэтому события DOM, таймеры, вызовы холста и выборки к API с поддержкой CORS ведут себя так же, как на живой странице.
Тестируйте адаптивные макеты на ширине телефона и планшета.
Используйте кнопки устройства над предварительным просмотром, чтобы ограничить его ширину. Включите <meta name="viewport" content="width=device-width, Initial-scale=1"> в свой <head>, чтобы медиа-запросы реагировали на ширину предварительного просмотра так же, как на телефоне.
Предустановка
Ширина предварительного просмотра
Что проверить
Рабочий стол
Полная ширина панели
Контейнеры максимальной ширины, многоколоночные сетки, состояния при наведении
Таблетка
768px
Распространенная точка останова md: свертывание навигации, макеты из двух столбцов.
мобильный
375px
Перенос текста, размер таргета, переполнение изображений, горизонтальная прокрутка
Что может и чего не может предварительный просмотр в реальном времени
Предварительный просмотр — это изолированный кадр, загружаемый из вашего кода. В целях безопасности его происхождение непрозрачно: ваши сценарии не могут читать файлы cookie или хранилище этого сайта, а этот сайт не может читать вашу страницу. Такая конструкция приводит к нескольким предсказуемым ограничениям, перечисленным ниже, поэтому вы не теряете время на отладку редактора, а не кода.
Работает
Не работает (и почему)
Встроенный <style>, атрибуты стиля и <script>
Относительные пути, такие как src="img/logo.png": на сервере нет папки, по которой можно было бы их разрешить. Используйте полные URL-адреса https или URI данных.
CSS и JS из CDN через https
localStorage, sessionStorage и файлы cookie внутри вашего скрипта: песочница блокирует их (они выдают SecurityError)
alert(), подтверждение(), открытие форм и ссылок в новой вкладке
fetch() для API, которые не отправляют заголовки CORS: браузер блокирует ответ, как и на реальном сайте.
Изображения и шрифты с общедоступных URL-адресов
Несколько файлов, импорт npm или этапы сборки: это редактор одного документа, а не IDE проекта.
Prettify запускает форматировщик HTML Prettier в вашем браузере. Он меняет отступы вложенных тегов с помощью двух пробелов, переносит длинные строки длиной 100 символов и помещает атрибуты в отдельные строки, когда тег становится слишком широким. Он настроен на структуру HTML, поэтому содержимое блоков <style> и <script> остается в основном таким, каким вы его написали. Это не меняет то, что отображает ваша страница. Если в разметке есть синтаксическая ошибка, которую Prettier не может проанализировать, вы увидите сообщение, и ваш код останется таким, каким он был.
Экспорт в HTML или PDF
Существует три варианта экспорта, каждый из которых подходит для разных задач. Загруженный файл .html представляет собой побайтовый код в редакторе, который можно открыть в браузере или добавить в проект. Печать отправляет визуализированный предварительный просмотр в диалоговое окно печати вашего браузера: выберите «Сохранить как PDF», чтобы получить выбираемый текст, рабочие многостраничные разрывы и все, что нарисовал ваш JavaScript. Кнопка PDF — это ярлык, позволяющий одним щелчком мыши фиксировать статический HTML и CSS в виде изображения, разбивать его на страницы формата A4 и скачивать. Поскольку это изображение, его текст нельзя выбрать, и содержимое, созданное с помощью JavaScript, не будет отображаться. Если быстрый PDF-файл завершается неудачей, обычной причиной является внешнее изображение без заголовков CORS; вместо этого используйте Печать.
Предварительный просмотр HTML-шаблонов электронной почты
Почтовые клиенты поддерживают гораздо меньше HTML и CSS, чем браузеры, поэтому шаблоны электронной почты следуют более старым соглашениям: макет на основе таблиц, столбец контента шириной около 600 пикселей, встроенные атрибуты стиля, а не блоки <style>, и изображения с атрибутами фиксированной ширины. Создайте это здесь и переключитесь на пресет 375 пикселей, чтобы проверить, как электронная почта отображается на телефоне. Предварительный просмотр показывает, как современный браузер отображает вашу электронную почту, что является хорошей первой проверкой. Некоторые клиенты, особенно Outlook для Windows, отображают его по-другому, поэтому всегда отправляйте тест на реальные почтовые ящики перед запуском кампании.
Начальные фрагменты кода для вставки
Короткие шаблоны, которые вы можете ввести и адаптировать. Каждому требуется всего несколько строк, и результат сразу отображается в предварительном просмотре.
Ничего из того, что вы вводите, не отправляется на сервер. Чтобы сохранить вашу работу между посещениями, редактор автоматически сохраняет ваш код в локальном хранилище этого браузера на этом устройстве, поэтому он остается там после обновления, но не синхронизируется с другими устройствами или другими браузерами. Нажатие кнопки «Сбросить» заменяет ваш код образцом документа. Очистка данных этого сайта в настройках вашего браузера приведет к удалению сохраненной копии. На общем компьютере нажмите «Сброс», прежде чем уйти.
Когда вместо этого использовать полноценную игровую площадку
Этот редактор создан для быстрой, конфиденциальной работы с одним файлом: тестирования фрагмента, изучения HTML, проверки макета на ширине телефона или предварительного просмотра блока электронной почты без необходимости учетной записи. Если вам нужно несколько файлов, пакетов npm, этап сборки платформы, общая ссылка или совместная работа в режиме реального времени, лучше подойдет полноценная игровая площадка, такая как CodePen, JSFiddle или PlayCode. Многие разработчики используют и то, и другое: быстрый блокнот для подобных проверок и полноценную площадку для проектов, которыми они хотят поделиться.
Введите или вставьте HTML-код в редактор. Предварительный просмотр повторно отображается примерно через 300 мс после того, как вы перестанете печатать, показывая, как реальный браузер отображает ваш код. Нет кнопки «Выполнить», нет установки и регистрации.
Могу ли я включить CSS и JavaScript в редактор HTML?
Да. Поместите CSS в блок <style> или атрибуты стиля, а JavaScript — в блок <script> или атрибуты событий, например onclick. Вы также можете загружать библиотеки и шрифты из CDN с помощью URL-адреса https. Это редактор одного документа, поэтому отдельные файлы .css и .js не поддерживаются.
Как мне улучшить HTML-код онлайн?
Вставьте свой беспорядочный или минимизированный HTML-код и нажмите «Уточнить». Prettier меняет отступы вложенных тегов с помощью двух пробелов и переносит длинные строки длиной 100 символов, не меняя при этом способ отображения страницы. Если в HTML есть синтаксическая ошибка, которую Prettier не может проанализировать, ваш код останется нетронутым, и вы увидите сообщение.
Могу ли я экспортировать свой HTML-код в формате PDF?
Да, два пути. Печать → Сохранить как PDF использует механизм печати вашего браузера, который предоставляет выбираемый текст, многостраничный вывод и все, что визуализируется вашим JavaScript. Кнопка PDF — это быстрый захват изображения статического HTML и CSS одним щелчком мыши, разделенного на страницы формата A4; его текст недоступен для выбора, и вывод JavaScript не включается.
Сохранен ли где-нибудь мой HTML-код?
Только в своем браузере. Редактор автоматически сохраняет в локальном хранилище этого браузера, поэтому ваша работа сохраняется после обновления, но ничего не загружается на сервер и не синхронизируется с другими устройствами. Нажмите «Сбросить» или очистите данные этого сайта, чтобы удалить его.
Почему мое изображение или внешний файл CSS не загружаются при предварительном просмотре?
Относительные пути, такие как img/logo.png илиstyles.css, не имеют папки для разрешения, поскольку предварительный просмотр создается на основе вашего кода, а не файлов на сервере. Используйте полный URL-адрес https, вставьте CSS в блок <style> или превратите небольшое изображение в URI данных.
Почему localStorage выдает ошибку в моем скрипте?
Предварительный просмотр выполняется в изолированном фрейме с непрозрачным источником, поэтому он не может затрагивать данные этого сайта. В результате localStorage, sessionStorage и файлы cookie недоступны для вашего кода и выдают ошибку SecurityError. Проверьте логику хранения в локальном файле или полноценной игровой площадке.
Могу ли я использовать этот HTML-редактор для изучения HTML, будучи новичком?
Да. Введите тег и сразу же увидите результат. Начните с базовой структуры (<h1>, <p>, <a>, <img>), затем добавьте блок <style> и поэкспериментируйте с цветами и макетом. Эта мгновенная обратная связь происходит намного быстрее, чем редактирование файла и обновление вкладки браузера.
Работает ли он как адаптивный предварительный просмотр?
Да. Переключайте предварительный просмотр между настольным компьютером (полная ширина), планшетом (768 пикселей) и мобильным устройством (375 пикселей). Добавьте метатег области просмотра в свой <head>, чтобы ваши медиа-запросы отвечали так же, как на реальном телефоне.
