Служба поддержки

Отвечаем по вопросам инструментов и оплат

🖥️

Код-песочница

HTML/CSS/JS песочница с live-превью

Code Playground — песочница HTML/CSS/JS в браузере

Онлайн-песочница для кода с разделением на три панели: HTML, CSS и JavaScript. Живое превью в четвёртой панели обновляется моментально после каждого нажатия клавиши. Это простая и быстрая альтернатива CodePen, JSFiddle и CodeSandbox для случаев, когда нужно быстро проверить кусок вёрстки, селектор CSS или идею на JS.

Инструмент удобен frontend-разработчикам для прототипов, преподавателям веб-разработки для демо на уроках, студентам для выполнения домашних заданий, блогерам для проверки примеров из статьи. Подсветка синтаксиса, автоотступы, автосохранение в localStorage — ничего не потеряется, если случайно закрыть вкладку.

Код выполняется в песочнице iframe прямо в вашем браузере — на наш сервер ничего не отправляется. Бесплатно, без регистрации, без лимитов на размер проекта.

✓Три панели + превью — HTML, CSS, JS и live preview — всё на одном экране, без переключений.
✓Живое обновление — Превью перерисовывается сразу при изменении кода — как в CodePen.
✓Подсветка синтаксиса — HTML, CSS, JavaScript и ES2020+ с подсветкой ключевых слов и ошибок.
✓Автосохранение — Проект хранится в localStorage — вернётесь, как только откроете вкладку.
✓Изолированная песочница — Код выполняется в sandboxed iframe — не ломает основную страницу.

Шаблоны:

Предпросмотр

в HTML — CDN-скрипт загрузится в песочнице."}},{"@type":"Question","name":"Сохраняется ли проект между сессиями?","acceptedAnswer":{"@type":"Answer","text":"Да, HTML/CSS/JS автоматически пишутся в localStorage каждые несколько секунд. Рекомендуем также скачивать готовый HTML-файл для долговременного хранения."}},{"@type":"Question","name":"Безопасно ли запускать чужой код?","acceptedAnswer":{"@type":"Answer","text":"Код выполняется в sandboxed iframe с ограниченными правами — он не имеет доступа к вашим cookies, localStorage основного сайта и другим вкладкам."}},{"@type":"Question","name":"Есть ли экспорт в один .html-файл?","acceptedAnswer":{"@type":"Answer","text":"Да, кнопка «Экспорт» собирает HTML, CSS и JS в один самодостаточный .html — можете открыть его локально или залить на хостинг."}}]}

📋

Как пользоваться

1
Напишите разметку в панели HTML.
2
Добавьте стили в панель CSS.
3

Встройте на свой сайт

Бесплатный виджет с бэклинком на ваш сайт

⭐Рейтинг и отзывы

Загрузка…

Напишите логику в панели JavaScript.

Смотрите результат в live preview — обновляется автоматически.

✨

Возможности

🚀

Три панели + превью

HTML, CSS, JS и live preview — всё на одном экране, без переключений.

🔒

Живое обновление

Превью перерисовывается сразу при изменении кода — как в CodePen.

⚡

Подсветка синтаксиса

HTML, CSS, JavaScript и ES2020+ с подсветкой ключевых слов и ошибок.

🎯

Автосохранение

Проект хранится в localStorage — вернётесь, как только откроете вкладку.

💎

Изолированная песочница

Код выполняется в sandboxed iframe — не ломает основную страницу.

🎯

Когда пригодится

▸Проверить CSS-селектор или flexbox-раскладку за 30 секунд
▸Прототип UI-компонента до интеграции в проект
▸Показать пример студентам во время онлайн-урока
▸Воспроизвести баг вёрстки для Stack Overflow
▸Подготовить демо к статье или докладу
▸Поэкспериментировать с анимацией CSS keyframes
▸Проверить фрагмент JS перед вставкой в production

📦

Что поддерживается

HTML5, CSS3, JavaScript ES2020+
Экспорт в один HTML-файл
Автосохранение в localStorage
Sandboxed iframe

💡

Полезные советы

💡

Для лучших результатов используйте современный браузер (Chrome, Firefox, Edge)

🎯

Все файлы обрабатываются локально в вашем браузере для максимальной безопасности

⚡

Сохраняйте результат сразу после обработки

🔑

Попробуйте разные настройки для оптимального результата

❓

Часто задаваемые вопросы

Работает без регистрации, полностью локально в браузере, на русском интерфейсе. Для быстрых проверок этого достаточно; для больших проектов с npm-зависимостями лучше использовать CodeSandbox.

Да, добавьте тег <script src="https://cdn.jsdelivr.net/..."></script> в HTML — CDN-скрипт загрузится в песочнице.

Да, HTML/CSS/JS автоматически пишутся в localStorage каждые несколько секунд. Рекомендуем также скачивать готовый HTML-файл для долговременного хранения.

Код выполняется в sandboxed iframe с ограниченными правами — он не имеет доступа к вашим cookies, localStorage основного сайта и другим вкладкам.

Да, кнопка «Экспорт» собирает HTML, CSS и JS в один самодостаточный .html — можете открыть его локально или залить на хостинг.

🔎