Как использовать HTML-песочницу

Шаги

1. Начните с стартового шаблона или загрузите пример проекта.
2. Редактируйте структуру HTML, стили CSS и поведение JavaScript.
3. Нажмите «Запуск» (Ctrl/Cmd + Enter), чтобы обновить sandbox-предпросмотр.
4. Откройте панель console для просмотра log, warn и error.
5. Используйте адаптивные элементы управления для проверки вёрстки на типичных ширинах.
6. Форматируйте, копируйте или скачивайте работу как index.html.

Пример

Пример — Запуск

HTML

<button id="counter">0</button>

CSS

#counter { font-size: 2rem; padding: 16px; }

JavaScript

let count = 0;
document.getElementById("counter").addEventListener("click", (event) => {
  event.currentTarget.textContent = ++count;
});

Каждое нажатие увеличивает счётчик. Повторный запуск сбрасывает его; локальное хранилище сохраняет код, а не значение счётчика.

Совет

Базовое выполнение HTML, CSS и JavaScript для предпросмотра происходит локально в вашем браузере.

Связанные инструменты