Онлайн-редактор HTML

Это инструмент, который работает прямо в браузере и показывает исходный код рядом с готовой страницей: слева вы пишете или вставляете разметку, справа сразу видите, как её отобразит браузер. Устанавливать и настраивать ничего не нужно — редактор запускается на той же странице, которую вы открыли. Он одинаково подходит и для быстрой проверки чужого файла, и для правки собственной вёрстки.

Вставьте код в левую панель или откройте файл кнопкой «Импорт». Предпросмотр справа обновится сам, примерно через полсекунды после того, как вы перестанете печатать. Если нужно обновить вручную, нажмите Ctrl/Cmd + Enter или значок обновления над предпросмотром. Готовую страницу можно открыть в новой вкладке или развернуть во весь экран.

Нажмите «Импорт» в боковой панели и выберите файл на устройстве — поддерживаются .html, .htm и .txt. Файл читается браузером на вашей стороне и открывается в редакторе: слева исходный код с подсветкой, справа отрисованная страница. Обратно код выгружается кнопкой «Экспорт» в рабочий файл .html.

Ваш код не покидает браузер: у редактора нет серверной части, разметка нигде не публикуется и никуда не передаётся. Предпросмотр выполняется в изолированном iframe, поэтому код внутри него не имеет доступа ни к странице редактора, ни к вашим сохранённым проектам. Из сети загружаются только сами библиотеки редактора — шрифты, подсветка синтаксиса и модуль форматирования.

Да. Каждое изменение автоматически сохраняется в локальном хранилище браузера, и при следующем открытии страницы редактор вернёт последний проект. Хранилище находится на вашем устройстве: данные не синхронизируются между браузерами и не попадают к нам. Если очистить данные сайта в браузере, проекты удалятся без возможности восстановления — для переноса используйте резервную копию .json.

Да. Теги <style> и <script> внутри документа выполняются так же, как в обычном браузере, поэтому однофайловая страница отображается целиком — вместе со стилями, скриптами и анимацией. Внешние стили и скрипты по абсолютным адресам тоже подгружаются.

Регистрация не нужна, ограничений по числу открытий нет, оплата не предусмотрена. Редактор бесплатный: «Прагматика» сделала его для внутренней работы и оставила открытым для всех.

Да. На узких экранах код и предпросмотр переключаются одним касанием в верхней панели, боковое меню открывается кнопкой слева, поиск по коду — кнопкой справа. Нумерация строк, подсветка синтаксиса и автосохранение работают так же, как на десктопе.

CodePen и JSFiddle — площадки для создания и публикации демо: код хранится в аккаунте на их серверах и открывается по ссылке. Инспектор в браузере показывает уже готовую страницу, и правки в нём исчезают после перезагрузки. Этот редактор решает третью задачу: быстро открыть, посмотреть и поправить свой HTML, не заводя учётную запись и не отправляя код наружу. Черновики при этом не теряются — они остаются на вашем устройстве.

Вставьте исходник письма в редактор и переключите предпросмотр в размер телефона (390 px) или планшета (834 px) — так видно, как перестроится вёрстка на узком экране. Учитывайте, что почтовые клиенты отображают письма строже браузера: редактор показывает верхнюю границу возможного, а окончательную проверку лучше делать тестовой отправкой.

Сначала проверьте фрагмент здесь, затем добавьте на нужную страницу блок T123 («Другое» → «HTML-код») и вставьте туда код. Если во фрагменте есть <style>, стили обычно надёжнее вынести в настройки страницы, а в блоке оставить только разметку и скрипт. Эта страница собрана так же: сам редактор целиком помещается в один блок Tilda.

Чаще всего причина в одном из трёх. Относительные ссылки на файлы вида images/logo.png не сработают: у предпросмотра нет вашей папки проекта — используйте абсолютные адреса. Скрипты, которым нужны cookies или локальное хранилище, в изолированном окне предпросмотра работать не будут. И наконец, незакрытый тег способен «съесть» часть разметки — нажмите «Форматировать»: на сломанной вложенности форматирование не проходит, и это само по себе подсказка, где искать ошибку.

Подсветка синтаксиса HTML, CSS и JavaScript в одном документе, нумерация строк и сворачивание блоков. Поиск и замена по коду: Ctrl/Cmd + F ищет внутри кода, а не по странице. Форматирование в один клик. Несколько проектов с переименованием и дублированием, история из десяти последних снимков кода, экспорт в .html и резервная копия всех проектов в .json. Плюс светлая и тёмная тема и подвижная граница между кодом и предпросмотром.

Студия «Прагматика». Мы проектируем и собираем сайты на Tilda и сами постоянно проверяем здесь фрагменты кода перед тем, как поставить их на страницу клиента. Инструмент бесплатный и останется таким. Если нужен сайт или доработка существующего — условия и состав работ описаны на главной страницы.