Редактор HTML онлайн — пишите код и сразу смотрите результат
Пишите HTML, CSS и JavaScript и сразу видьте результат рядом с кодом — без установки программ. Внутри тот же редактор, что в Visual Studio Code: подсветка, подсказки, поиск по регулярным выражениям. Ошибки JavaScript попадают в консоль с номером строки, а файл с компьютера можно открыть, поправить и скачать обратно, даже в кодировке Windows-1251.
HTML, CSS и JavaScript с просмотром и консолью
Страница обновляется через полсекунды после того, как вы перестали печатать. Скрипты выполняются по-настоящему, а их вывод и ошибки видны прямо под просмотром.
Подключение работает так же, как на сайте
Если в HTML написано <link href="style.css"> или <script src="script.js">, а во вкладках есть файл с таким именем, редактор кода подставит его ровно в это место и в том же порядке. Если HTML не подключает ни одного файла из вкладок, CSS и JavaScript всех вкладок добавляются автоматически. Библиотеки с CDN, например Bootstrap или jQuery, загружаются по полному адресу как обычно.
console.log и ошибки — с файлом и номером строки
Вывод console.log, console.warn и console.error появляется под просмотром, объекты и массивы — развёрнуто. Ошибка приходит с точным местом, например script.js:6: щелчок открывает нужную вкладку и ставит курсор на строку.
Ширина телефона и планшета
Переключатель над просмотром сужает страницу до 375 или 768 пикселей. Меняется сама ширина окна, поэтому медиазапросы @media срабатывают по-настоящему.
Чужой код не доберётся до ваших данных
Просмотр — это iframe с атрибутом sandbox без allow-same-origin: скрипт не видит куки, хранилище и содержимое основного сайта (описание на MDN). Картинки по относительным путям вроде img/logo.png в просмотре не загрузятся — папки проекта у него нет, нужны полные адреса.
Форматирование, сжатие и кодировки
Всё выполняется в браузере. Форматирование и сжатие попадают в историю правок: Ctrl+Z возвращает исходный код.
Prettier — как в VS Code
HTML, CSS, SCSS, LESS, JavaScript, TypeScript, YAML и Markdown форматирует Prettier 3.9.8, SQL — sql-formatter 15.3.0, JSON разворачивается с отступом в два пробела. При синтаксической ошибке форматтер ничего не угадывает: он сообщает номер строки и ставит на неё курсор.
Минификация без поломок
JavaScript сжимает Terser 5.51.2: имена глобальных функций, которые вызываются из onclick, сохраняются. CSS сжимает CSSO 5.0.5. В HTML убираются комментарии и лишние пробелы, но пробел между словами в разных тегах остаётся, а pre, script и style не меняются. SCSS, LESS и TypeScript не сжимаются сознательно: сжимают результат сборки. Для больших файлов есть отдельные форматирование кода и минификатор.
Windows-1251, BOM и CRLF сохраняются
Файл старого сайта или PHP-скрипт в Windows-1251 открывается без «кракозябр» и скачивается в той же кодировке, байт в байт. BOM и окончания строк тоже остаются прежними. Сменить их можно в строке состояния под редактором: например, убрать BOM, из-за которого PHP выдаёт ошибку «headers already sent».
Работа не пропадёт при закрытии вкладки
Открытые файлы сохраняются в памяти вашего браузера и восстанавливаются при следующем визите. На сервер Neorank они не попадают. Если файлы больше примерно 5 МБ, редактор предупредит, что их пора скачать.
Горячие клавиши редактора кода
Такие же, как в VS Code. На macOS вместо Ctrl нажимайте ⌘, вместо Alt — ⌥.
| Ctrl+/ | Закомментировать строку | Ctrl+F / H | Найти / заменить, в том числе регулярным выражением |
| Alt+↑ ↓ | Переместить строку | F1 | Палитра команд редактора |
| Ctrl+Shift+K | Удалить строку | Ctrl+S | Скачать файл вкладки |
| Ctrl+D | Выделить следующее такое же слово | Ctrl+O | Открыть файлы |
| Alt + щелчок | Добавить курсор | Двойной щелчок по вкладке | Переименовать файл |
Как пользоваться онлайн редактором кода
При первом открытии в редакторе уже есть связанные файлы index.html, style.css и script.js — на них видно, как работают просмотр и консоль.
Откройте файл или начните с примера
Перетащите файлы на редактор, откройте их кнопкой или создайте новую вкладку. Двойным щелчком по вкладке задайте имя с расширением — от него зависит подсветка синтаксиса.
Правьте код и смотрите результат
Для HTML нажмите «Просмотр»: страница обновляется по мере набора, ошибки скриптов появляются в консоли под ней. «Форматировать» расставит отступы, «Сжать» подготовит код к публикации.
Скачайте готовый файл
Кнопка скачивания или Ctrl+S сохраняет файл активной вкладки с прежними кодировкой и окончаниями строк.
Частые вопросы об онлайн редакторе кода
О безопасности, запуске кода и работе с файлами.
Нет. Редактирование, форматирование, сжатие и просмотр выполняются в вашем браузере. Редактор и форматтеры загружаются с нашего сайта, код никуда не передаётся. Черновики хранятся в памяти браузера на вашем устройстве.
Нет. Выполняется только JavaScript вместе с HTML и CSS в окне просмотра, потому что его исполняет сам браузер. Python, PHP, C++ и Java нужно запускать интерпретатором или компилятором на сервере. Здесь такой код можно написать, подсветить, поправить и скачать.
27 языков: HTML, CSS, SCSS, LESS, JavaScript, TypeScript, JSON, XML, YAML, Markdown, PHP, Python, Java, C#, C, C++, Go, Rust, Kotlin, Swift, Ruby, SQL, Bash, PowerShell, BAT, Dockerfile и INI. Язык определяется по расширению файла. В CSS, SCSS, LESS, JSON, JavaScript и TypeScript ошибки подчёркиваются прямо при наборе.
Просмотр работает в песочнице, где модальные окна запрещены: иначе вставленный скрипт мог бы заблокировать страницу бесконечными всплывающими окнами. Текст из alert(), confirm() и prompt() выводится строкой в консоли.
Выберите нужную кодировку в строке состояния под редактором: UTF-8 или Windows-1251. Пока файл не правили, он перечитывается в выбранной кодировке без потерь. Если вы уже успели его изменить, закройте вкладку и откройте файл заново.
Для небольших правок — да. Но разработчики движка Monaco прямо пишут в FAQ проекта, что мобильные браузеры он не поддерживает, поэтому выделение и работа с курсором на телефоне неудобны. Для постоянной работы нужен компьютер.
От Notepad++ — тем, что ничего не нужно устанавливать и есть живой просмотр HTML с консолью. От VS Code — тем, что это отдельный редактор без проекта, терминала, Git и расширений. Для быстрых правок и проверки фрагмента этого достаточно, для большого проекта — нет.
Да, в этом же браузере на этом же устройстве: вкладки сохраняются автоматически и восстанавливаются при следующем визите. В режиме инкогнито и после очистки данных сайта черновики пропадают, поэтому важный результат скачайте файлом.