HTML CSS JS Playground

Пишите, запускайте и делитесь фрагментами кода - без установки.

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

Консоль

Вывод консоли появится здесь.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Gradient Preview</title>
        <style>
            body { margin: 0; min-height: 100vh; display: grid; place-items: center;
                font-family: system-ui, sans-serif; }
            .card {
                width: 280px;
                height: 280px;
                border-radius: 24px;
                background: linear-gradient(135deg, #6c8cff 0%, #b18cff 60%, #ff8ab0 100%);
                box-shadow: 0 20px 40px rgba(108, 140, 255, 0.35);
                display: grid; place-items: center;
                color: white; font-size: 18px; font-weight: 600;
            }
        </style>
    </head>
    <body><div class="card">Linear gradient</div></body>
</html>

Создавайте HTML, CSS и JavaScript с живым превью

Бесплатная онлайн-песочница HTML, CSS и JavaScript с настоящим браузерным превью. Редактируйте три файла - index.html, styles.css и script.js - и iframe перерисовывается на каждое изменение. Без локального сервера, без расширения Live Server, без сборки.

Редактор работает на том же движке, что и VS Code, поэтому автодополнение для HTML-тегов, CSS-свойств и JS работает как надо. Live-превью рендерит страницу в изолированном iframe прямо в браузере. Удобно для набросков лендинга, экспериментов с CSS grid или написания DOM-скриптов на чистом JS.

Почему эта песочница HTML, CSS и JavaScript полезна

Мгновенный live preview - меняете HTML, CSS или JS, и iframe перерисовывается на каждое изменение. Без сборки, без перезагрузки.
Подсветка синтаксиса и автодополнение для HTML, CSS и JavaScript. Сокращения в стиле Emmet и мгновенная обратная связь - всё на том же движке редактора, что и VS Code.
Без установки: ни Node, ни Live Server, ни локального HTTP-сервера. Превью HTML, CSS и JS в любом браузере.
Живое превью для всех трёх файлов - HTML, CSS и JavaScript редактируются вместе и перерисовываются в iframe при каждом изменении, без сборки.

Что можно создать в песочнице HTML, CSS и JavaScript

Лендинг: структурированный HTML, современный CSS (grid, flex, custom properties) и немного JavaScript - всё с живой перезагрузкой в iframe-превью.
Эксперименты с CSS: раскладки grid, выравнивание flex, анимации и адаптивные media queries - с мгновенной визуальной обратной связью на каждое изменение.
Скриптинг DOM на чистом JavaScript: querySelector, обработчики событий, fetch-запросы, localStorage - и живое превью в браузере для мгновенной обратной связи.

Часто задаваемые вопросы про песочницу HTML, CSS и JavaScript

Онлайн-песочница HTML, CSS и JavaScript бесплатная?

Да, песочница HTML, CSS и JavaScript бесплатная. Без регистрации, без локального сервера, без расширения Live Server для VS Code - просто пишите и смотрите превью.

Нужен ли локальный сервер или Live Server из VS Code?

Установка не нужна. Не требуются ни Live Server из VS Code, ни локальный HTTP-сервер, ни Node. Браузер показывает ваши файлы HTML, CSS и JS прямо в iframe.

Работает ли песочница HTML, CSS и JavaScript на мобильном?

Да. Песочница HTML, CSS и JavaScript работает в браузерах на десктопе, планшете и мобильном. Редактор, iframe-превью и вкладки файлов адаптируются под маленькие экраны.

Безопасно ли открывать превью HTML и JavaScript здесь?

??. ??? HTML, CSS ? JavaScript ?????????? ? ????????????? iframe ????????????? ? ????????, ???????? ?? ?????????? ???????? Coddy.

Как продолжить учить HTML, CSS и JavaScript после песочницы?

Правьте пример HTML, CSS и JS, нажимайте «Запустить» и смотрите, как обновляется превью. А когда захочется чего-то более структурированного, интерактивные курсы HTML, CSS и JavaScript на Coddy проведут вас от селекторов до полноценных страниц.

Полезные инструменты для Web

Бесплатные браузерные инструменты, которые отлично работают с Playground Web - всё это часть Coddy.

Посмотреть все инструменты Шпаргалка по Web