Как пользоваться: HTML-редактор онлайн
- Пишите разметку в HTML, стили в CSS, а скрипты в JavaScript.
- Предпросмотр обновляется по мере ввода (для тяжелых скриптов отключите Авто-запуск и нажмите Run или Ctrl+Enter).
- Смотрите вывод
console.logи ошибки под предпросмотром. - Нажмите Скачать .html, чтобы сохранить всё в один файл.
Быстрая песочница для HTML
Иногда нужно просто проверить фрагмент: посмотреть, как ведет себя CSS-свойство, отладить верстку, прототипировать компонент или запустить код из учебника. Этот редактор даёт три привычные панели и живой предпросмотр без аккаунтов, проектов и сборки. Ваша работа сохраняется в браузере (local storage), поэтому она останется на месте, когда вы вернётесь.
Как изолирован предпросмотр
Результат выполняется в <iframe sandbox> без разрешения allow-same-origin. Страница получает собственный уникальный origin: скрипты могут работать, использовать alert и формы, но не могут читать cookies или хранилище этого сайта. Тот же подход используют CodePen и JSFiddle.
Советы
- Tab вставляет два пробела вместо перехода к другому элементу интерфейса.
- Подключайте библиотеки из CDN обычным тегом во вкладке HTML, например
<script src="https://cdn.jsdelivr.net/npm/…"></script>. - Ошибки выполнения и отклоненные промисы появляются в панели консоли с номером строки.
- Скачанный файл содержит HTML, CSS и JS в одном документе — его можно открыть локально или загрузить на сервер.
Не только песочница
Приведите код в порядок с помощью форматера HTML, форматера CSS и форматера JavaScript, либо уменьшите его для продакшена с помощью минификатора HTML и минификатора JavaScript.
Также ищут как: css предпросмотр онлайн, песочница html css js, html css js редактор, jsfiddle альтернатива, html viewer.
Инструменты, которые хорошо сочетаются с HTML-редактор онлайн
- Markdown в HTML — Введите или вставьте Markdown и мгновенно получите чистый HTML: с безопасным живым предпросмотром, таблицами GFM, списками задач и блоками кода с ограждениями.
- Минификатор CSS — Вставьте таблицу стилей, чтобы мгновенно уменьшить её размер.
- SQL-форматтер — Вставьте запрос или целую миграцию и получите читаемый SQL: по одному предложению в строке, выровненные JOIN и единый регистр ключевых слов с учётом синтаксиса вашей базы данных.
- Тестер регулярных выражений — Введите шаблон и смотрите, как совпадения подсвечиваются прямо в тестовом тексте.
Часто задаваемые вопросы
Сохраняется ли мой код?
Можно ли использовать внешние библиотеки?
<script> или <link> с адресом CDN во вкладку HTML.