Sinoby HTML Sandbox — локальный редактор HTML, CSS и JavaScript с живым предпросмотром,
форматированием, минификацией, очисткой, импортом и экспортом.
Обнаружены внешние ресурсы
HTML
CSS
JavaScript
Предпросмотр(визуальное редактирование включено)
Очистка HTML-кода
О редакторе HTML Sandbox
HTML Sandbox — это безопасный онлайн-редактор HTML, CSS и JavaScript с функцией
живого предпросмотра. Всё выполняется локально в вашем браузере — данные не передаются
на сервер и хранятся только в LocalStorage вашего браузера.
Возможности
Редакторы HTML, CSS и JavaScript с подсветкой синтаксиса (CodeMirror 6)
Живой предпросмотр с обновлением в реальном времени
Визуальное редактирование прямо в предпросмотре
Форматирование кода (Красиво) через Prettier
Сжатие HTML-кода (Сжать)
Очистка HTML с 14 опциями (удаление стилей, классов, комментариев и др.)
Импорт HTML-файлов с автоматическим разбором на HTML/CSS/JS
Экспорт проекта в единый HTML-файл
Безопасность и
приватность
Код пользователя выполняется внутри изолированного iframe (sandbox="allow-scripts", без
allow-same-origin)
Основное приложение не использует eval (CSP запрещает unsafe-eval)
Песочница по умолчанию блокирует внешнюю сеть через CSP в srcdoc
Данные сохраняются только в LocalStorage (локально в вашем браузере)
Проект не отправляет содержимое вашего кода на сервер
Лицензии и сторонние
компоненты
Библиотека
Версия
Лицензия
Tailwind CSS
3.4.1
MIT
CodeMirror 6
6.22.3
MIT
Prettier
3.2.4
MIT
Все библиотеки используются согласно их лицензиям.
Внимание:
Выполнение JavaScript-кода может быть потенциально опасным.
Используйте только доверенный код. Редактор не несёт ответственности
за содержимое пользовательского кода.
Контакты:
sergey@sinoby.ru (ошибки и доработки)
Частые вопросы (FAQ)
Просто вставьте код в вкладку HTML — предпросмотр справа обновится сразу.
Да: стили — во вкладке CSS, скрипты — во вкладке JavaScript, всё применяется в
предпросмотре.
Чтобы верстать и тестировать без лишних панелей: код слева, результат справа — максимум
места под работу.
Она форматирует код, чтобы его было проще читать и править.
Это минификация: убираются лишние пробелы/переносы (а “ВСЕ” — для HTML/CSS/JS сразу), чтобы
код стал короче.
Кнопка «Очистка» помогает быстро убрать лишнее/привести разметку в порядок (в зависимости от
выбранных опций).
Нажмите «Импорт» — файл загрузится, а содержимое разложится по вкладкам.
Нажмите «Экспорт» — скачаете готовый HTML одним файлом.
Да, кнопка «Пример» подставляет демонстрационный шаблон, чтобы можно было стартовать за
секунду.
Да — удобно проверить разметку, стили и поведение скриптов “здесь и сейчас”.