Не только превью: подсветка синтаксиса и связка кода с макетом
Вставьте разметку и стили — справа сразу появится результат. В редакторе HTML, CSS и JavaScript подсвечиваются по-разному (как в полноценной IDE), а клик по элементу на превью подсвечивает нужный фрагмент в коде, и наоборот. Рядом можно открыть короткие пояснения к тегам и свойствам — без длинных «продающих» текстов, только то, что помогает разобраться.
Работает без аккаунта
Всё в вашем браузере
Для учёбы и работы
Инструмент под просмотр кода и учёбу
Часто хочется не просто «отрендерить HTML», а понять, какая строка за что отвечает. Мы собрали просмотр, подсветку и подсказки в одном окне, чтобы не прыгать между вкладками и DevTools, если вы на этапе учёбы или разбора чужого примера.
Двусторонняя подсветка: не абстракция, а конкретная механика
Клик по блоку на превью прокручивает редактор и подсвечивает диапазон в исходнике; клик по строке в коде выделяет соответствующую область на странице. Это не маркетинговый ярлык — так реально устроена связь панелей. Отдельно включена классическая подсветка синтаксиса для HTML, CSS и JS: комментарии, теги, строки и ключевые слова читаются быстрее, чем в однотонном текстовом поле.
Если нужно отдать или сохранить «как выглядит исходник», можно открыть просмотр исходного кода в новой вкладке: разметка показывается с тёмной темой и раздельной раскраской тегов, атрибутов, значений и комментариев — удобно для проверки html-кода глазами, без выполнения скриптов на нашей стороне.
Попробовать в песочницеТри языка — три режима подсветки
HTML, CSS и JavaScript обрабатываются отдельно: подсветка соответствует грамматике каждого языка, а не одному общему «цветному» шаблону.
Пояснения по ходу
К выбранным тегам и свойствам можно открыть краткие объяснения — чтобы не гуглить базовые вещи в другой вкладке.
Сложение и правки на месте
Импорт файла, вставка из буфера или старт с примера; превью обновляется по мере ввода. Подходит и для проверки html-кода онлайн перед отправкой макета, и для экспериментов в учебных целях.
Что здесь есть по делу
Главное — двусторонняя подсветка: клик по строке в коде показывает соответствующий элемент в превью, а клик по элементу в превью переносит к соответствующей строке в исходнике.
Двусторонняя подсветка (код ↔ превью)
Наша подсветка показывает соответствие «код ↔ превью»: кликните строку в коде — в превью подсветится нужный элемент; кликните элемент в превью — редактор перейдёт к соответствующей строке в коде и подсветит её тоже. Примечание: для очень длинных файлов после клика в превью переход может оказаться чуть выше максимально точного выделения; в этом случае прокрутите немного вниз, чтобы увидеть точную подсвеченную строку.
- Живое превью рядом с кодом
- Двусторонняя подсветка: превью ↔ редактор
- Краткие пояснения к тегам и CSS
- Без аккаунта, в браузере
Playground: важные кнопки
Режим правки и двусторонняя подсветка
По умолчанию код и превью связаны: клик в превью подсвечивает соответствующий код, клик в коде подсвечивает область в превью. Если нужно долго печатать или вставить большой фрагмент, нажмите «Редактировать»: в режиме правки отключаются синхронная подсветка и переходы по строкам, чтобы не мешали вводу.
Форматировать
«Форматировать» приводит активную вкладку (HTML, CSS или JavaScript) к ровным отступам и переносам строк — код проще читать и проверять.
Развернуть всё / Свернуть всё
В длинных файлах редактор может сворачивать блоки. «Развернуть всё» открывает все свёртки сразу; «Свернуть всё» закрывает их, чтобы увидеть структуру целиком или сфокусироваться на фрагменте.
Что пишут пользователи
Несколько отзывов о том, как люди используют песочницу в учёбе и работе.
Мне важно было видеть не только превью, но и точное соответствие «элемент — кусок кода». Подсветка в обе стороны сэкономила кучу времени на курсах по вёрстке.
Ирина К.
Студентка, веб-дизайн
"Отдельное окно с раскрашенным исходником удобно, когда нужно показать код коллеге — не скриншот из IDE, а читаемый текст."
Дмитрий В.
Верстальщик / Пользуюсь около 3 месяцев
"Подсветка по языкам нормальная, не как в примитивных «просмотрщиках». В связке с превью реально разбираю чужие сниппеты."
Алёна М.
Junior front-end / Около 2 месяцев
"Короткие пояснения к тегам не раздражают — как раз чтобы не открывать десять вкладок документации."
Сергей П.
Преподаватель курса HTML / Рекомендую группе
Вопросы и ответы
Откройте песочницу
Посмотреть HTML-код онлайн, увидеть превью и воспользоваться подсветкой — прямо сейчас, без формы входа.
HTML Viewer
- HTML, CSS и JS с подсветкой синтаксиса
- Связка клика в превью и фрагмента в коде
- Просмотр исходника в новой вкладке с раскраской
- Без регистрации, в браузере
