HTML CSS JS Playground

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

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

Консоль

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

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Playground</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <h1 id="greeting">Hello, world!</h1>
        <button id="btn">Click me</button>
        <script src="script.js"></script>
    </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 Встроить редактор Web Сравнить платформы для программирования