HTML/CSS/JS Playground

<main class="demo-card">
  <p class="eyebrow">Live preview</p>
  <h1>Соберите мини-интерфейс</h1>
  <p>Редактируйте HTML, CSS и JavaScript, а затем экспортируйте один HTML-файл.</p>
  <button id="demoButton">Сменить акцент</button>
</main>

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #101010;
  color: #f5f5f5;
  font-family: Inter, system-ui, sans-serif;
}

.demo-card {
  width: min(420px, calc(100% - 32px));
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.055);
  padding: 28px;
}

.eyebrow {
  margin: 0 0 10px;
  color: #FA551E;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .14em;
}

h1 {
  margin: 0 0 12px;
  font-size: clamp(30px, 8vw, 52px);
  line-height: .95;
}

p {
  color: rgba(255,255,255,.7);
  line-height: 1.55;
}

button {
  border: 0;
  background: #FA551E;
  color: #080808;
  padding: 12px 16px;
  font-weight: 900;
  cursor: pointer;
}

const button = document.getElementById('demoButton');
const colors = ['#FA551E', '#22D3EE', '#D9F99D'];
let index = 0;

button.addEventListener('click', () => {
  index = (index + 1) % colors.length;
  button.style.background = colors[index];
  console.log('Акцент изменён на', colors[index]);
});

console.log('HTML/CSS/JS preview готов');

Preview

Console output

Вывод console появится здесь.

Отказ от ответственности Запускайте только front-end код, который понимаете. Preview выполняется в вашем браузере внутри sandboxed iframe, может расходовать ресурсы устройства и не предназначен для недоверенных скриптов, приватных секретов или критичных production-решений. Результаты предоставляются как есть, без гарантий.

HTML, CSS и JavaScript онлайн-редактор с live preview

HTML/CSS/JS Playground работает как компактный браузерный редактор для быстрых front-end экспериментов. Редактируйте разметку, стили и скрипты, смотрите результат в sandboxed preview, проверяйте console output и экспортируйте один готовый HTML-файл.

Быстрые front-end наброски

Используйте playground для маленьких UI-идей, проверки layout, CSS-экспериментов, DOM-событий и snippets, которым нужен быстрый визуальный результат без создания локального проекта.

Live preview и console

Preview обновляется автоматически после правок, а также вручную по кнопке Run. Console output показывает logs, warnings, errors, runtime exceptions и unhandled promise rejections.

Экспорт в один файл

Когда snippet готов, экспортируйте текущие HTML, CSS и JavaScript в один standalone HTML-файл, чтобы сохранить, отправить или продолжить работу вне browser playground.