Об этом инструменте
Песочница кода — самый быстрый способ проверить идею: не нужно заводить проект, нет шага сборки, нет сервера. Пишите HTML, CSS и JavaScript в трёх панелях, и предпросмотр перерисовывается, как только вы перестаёте печатать. Отлично подходит, чтобы протестировать сниппет со Stack Overflow, набросать компонент или показать, как ведёт себя код.
Всё выполняется локально в изолированном iframe внутри браузера — ваш код никуда не загружается. Когда результат вам понравится, скачайте его как один самодостаточный файл .html, который можно открыть где угодно или вставить в проект.
Частые вопросы
Мой HTML/CSS/JS выполняется на сервере?
Нет. Всё выполняется в вашем браузере внутри изолированного (sandbox) iframe — серверного выполнения нет, поэтому ничего из написанного никуда не отправляется.
Безопасно ли экспериментировать в iframe предпросмотра?
Да. Предпросмотр работает с sandbox="allow-scripts allow-modals", поэтому не может получить доступ к родительской странице, читать куки или переходить в окне верхнего уровня — он изолирован от остальной части сайта.
Мой код сохраняется автоматически?
Да. HTML, CSS и JS сохраняются в локальное хранилище этого браузера примерно через 300 мс после того, как вы прекращаете печатать, и автоматически восстанавливаются при следующем открытии песочницы здесь.
Могу ли я использовать внешние библиотеки с CDN?
Вы можете добавить тег <script src="https://..."> прямо в панель HTML, чтобы подключить библиотеку с CDN, но поддержки npm/бандлеров нет — доступно только то, что может загрузить обычный тег <script>.
Могу ли я сохранить песочницу как отдельный файл?
Да. Кнопка «Скачать» упаковывает текущие HTML, CSS и JS в один файл .html со встроенными тегами <style> и <script>, который корректно открывается в любом браузере без сервера.