Лучшие онлайн-редакторы кода

Выбор онлайн-редактора кода зависит от задачи. Их три: песочница для фронтенда (CodePen, JSFiddle), где можно показать отрендеренное демо; браузерная среда разработки (StackBlitz, CodeSandbox, Replit) для проектов, которым нужен настоящий процесс Node; и AI-конструктор (Bolt), который превращает промпт в работающий проект.

Представьте, что мейнтейнер просит у вас минимальный пример для воспроизведения бага. Вы отправляете ссылку на CodePen и только потом понимаете, что баг проявляется лишь после npm install и сборки через Vite. В итоге небольшой баг-репорт отнимает у вас полдня.

В этой статье инструменты разделены на эти три группы, и каждый оценивается по одним и тем же пяти критериям. Мы также разберём, что меняется в CodePen 2.0, насколько легко перенести работу в другое место и где на самом деле хранится ваш код. Десктопные редакторы и облачные IDE на виртуальных машинах, например GitHub Codespaces, в обзор не вошли.

На какие три группы делятся онлайн-редакторы кода?

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

• Песочницы для фронтенда (CodePen, JSFiddle): вы пишете HTML, CSS и JavaScript, а страница отображается в живом превью. Они предназначены для демо и небольших примеров воспроизведения.
• Браузерные среды разработки: здесь работает настоящий процесс Node с установленными пакетами и этапом сборки. StackBlitz запускает Node прямо во вкладке с помощью WebContainers. Devbox в CodeSandbox и Replit запускают проекты на удалённых машинах.
• AI-конструкторы (Bolt): по промпту создаётся целый проект, который вы затем дорабатываете.

Сравнивать CodePen с CodeSandbox — обычно ошибка категорий. CodePen создан для того, чтобы делиться отрендеренным демо, а CodeSandbox — для запуска проекта со сборкой и установленными пакетами. Сравнение инструментов из разных групп даёт обманчивые результаты.

Что меняется в CodePen 2.0?

CodePen 2.0 приближает CodePen к инструменту для проектов, но не превращает его в такой инструмент. Согласно анонсу CodePen, запуск состоялся 23 июля 2026 года. В посте описан единый редактор, который заменяет и старый редактор Pen, и старый редактор Project, и при этом получил новые возможности.

Вот что это значит для тех, кто привык к классическим Pen:

• Несколько файлов в одном Pen. Раньше приходилось связывать три Pen и импортировать JavaScript из двух других. Теперь файлы находятся внутри одного Pen. Согласно документации CodePen по файлам, бесплатные Pen ограничены тремя файлами и не могут содержать загруженные медиафайлы, например изображения. Тарифы PRO повышают лимит на число файлов и разрешают медиафайлы.
• npm-пакеты в package.json. Зависимости фиксируются по версиям в манифесте, а не вставляются в виде URL с CDN. Однако ничего не устанавливается. В документации CodePen по пакетам объясняется, что компилятор преобразует package.json в import map, а пакеты по-прежнему загружаются с CDN esm.sh.
• Совместная работа. На платных тарифах можно приглашать других пользователей в качестве редакторов. Работать над Pen можно вместе в реальном времени или вносить изменения, пока остальные офлайн. Пользователи PRO также могут открыть Live Preview в другой вкладке или браузере — превью обновляется по мере редактирования. Обе функции описаны в FAQ CodePen «Что изменилось».
• Blocks. Новые языки и инструменты подключаются в виде Blocks. Один из примеров — MJML. На странице What’s New Blocks описаны как способ, которым CodePen добавляет новые технологии.
• Деплой. Одним кликом Pen деплоится на поддомен *.codepen.app. На тарифах PRO к нему также можно привязать собственный домен.

Классические Pen никуда не делись. Классический редактор работает как прежде. Переводить существующий Pen на 2.0 необязательно, хотя CodePen сообщил, что в будущем может конвертировать в 2.0 все Pen.

Ни одна из подтверждённых функций 2.0 не является серверной средой выполнения или терминалом. Если для примера воспроизведения нужен dev-сервер на Node, CodePen по-прежнему относится не к той группе. Лимиты тарифов помимо числа файлов смотрите на странице с ценами CodePen.

Остальные участники

Ниже JSFiddle, StackBlitz, CodeSandbox, Replit и Bolt описаны по одним и тем же пяти пунктам. Ценообразование у всех устроено одинаково: есть бесплатный тариф, а платные добавляют ресурсы и возможности приватности. Подробности ищите на страницах с ценами каждого сервиса.

JSFiddle

Что запускается: HTML, CSS и JavaScript в браузерном превью. Бесплатный тариф: достаточен для публичных сниппетов. Импорт репозитория: ничего подходящего для работы с репозиторием. Встраивание и шаринг: вы делитесь URL. Переносимость: содержимое панелей копируется вручную. Используйте JSFiddle, когда баг умещается на одном экране.

StackBlitz

Что запускается: Node.js во вкладке браузера через WebContainers. Документация StackBlitz по импорту предупреждает, что всё, что выходит за рамки Node.js, работать не будет. Это исключает такие языки, как PHP, Python и Java, а также базы данных вроде MySQL и PostgreSQL, которым нужен собственный серверный процесс. Бесплатный тариф: подходит для публичных примеров воспроизведения. Импорт репозитория: откройте stackblitz.com/github/{user}/{repo}, чтобы загрузить любой публичный репозиторий. Проект StackBlitz затем следует за репозиторием, так что новые коммиты, которые вы пушите в GitHub, появляются и там. Встраивание и шаринг: можно встраивать проекты в документацию и посты в блоге, а также добавлять в README кнопки «Open in StackBlitz». Если вам нужен редактор внутри собственного продукта, а не встроенное демо, это уже другая задача — она разобрана в статье Create your own Code Editor with React. Переносимость: высокая, если вы начинаете с GitHub. Используйте StackBlitz, когда для воспроизведения нужен npm install.

CodeSandbox

Что запускается: Devbox запускают проекты на удалённых машинах. Бесплатный тариф: есть, на платных тарифах больше вычислительных ресурсов. Импорт репозитория: работа CodeSandbox с GitHub сейчас меняется. Together AI приобрела CodeSandbox и переносит продукты CodeSandbox на собственную платформу, поэтому, прежде чем полагаться на какой-либо сценарий импорта, сверьтесь с актуальной документацией. Встраивание и шаринг: общие рабочие пространства. Переносимость: зависит от того, привязан ли проект к репозиторию. Используйте CodeSandbox, когда команде нужна одна общая удалённая среда.

Replit

Что запускается: хостинговые рабочие пространства на инфраструктуре Replit, не ограниченные Node. Бесплатный тариф: подходит для обучения и небольших прототипов. Импорт репозитория: импорт из GitHub в Replit открывает публичный репозиторий по адресу replit.com/github.com/{user}/{repo}. Для приватных репозиториев нужно подключить аккаунт GitHub на replit.com/import. Секреты и переменные окружения не переносятся. Встраивание и шаринг: вы делитесь ссылкой на запущенное приложение. Переносимость: проект живёт в Replit, пока вы его не экспортируете. Используйте Replit, когда бэкенд написан не на JavaScript.

Bolt

Что запускается: проекты, которые генерирует Bolt, работают в браузере на WebContainers. Bolt разработан StackBlitz, а стек описан в его репозитории с открытым исходным кодом. Бесплатный тариф: достаточен, чтобы попробовать промпт. Импорт репозитория: не основной сценарий работы. Встраивание и шаринг: хостинговое превью. Переносимость: изучите возможности экспорта в Bolt, прежде чем создавать то, что нужно сохранить. Если вам нужен AI внутри полноценного редактора, а не конструктор, превращающий промпты в приложения, читайте статью AI-Powered Code Editors: Are They Actually Improving Developer Productivity?

Привязка к платформе и экспорт

Уйти с инструмента легко, если ваша работа уже хранится в репозитории GitHub. Вы оказываетесь привязаны к платформе, если работа существует только в виде размещённого на сервисе Pen, Fiddle или проекта в AI-конструкторе.

Импорт из GitHub в StackBlitz оставляет репозиторий основной копией вашего кода, поэтому с этого инструмента уйти проще всего. Проекты, которые хранятся только на сервисе, приходится извлекать вручную. Экспорт CodePen выдаёт .zip с исходными файлами и результатом последней сборки, но, чтобы продолжить работу локально, придётся самостоятельно настроить инструменты сборки.

Если работа важна, начинайте с репозитория или как можно раньше запушьте в него проект. Переносимый проект состоит из обычных файлов и не содержит ничего специфичного для какого-либо инструмента:

{
  "name": "portable-repro",
  "private": true,
  "type": "module",
  "scripts": { "dev": "vite", "build": "vite build" },
  "devDependencies": { "vite": "^8.3.0" }
}

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Portable repro</title></head>
<body>
  <div id="app"></div>
  <script type="module" src="/main.js"></script>
</body>
</html>

const app = document.getElementById('app');
app.textContent = `Rendered at ${new Date().toISOString()}`;

Запушьте эти три файла в GitHub, и проект откроется по URL StackBlitz вида /github/. Локально он тоже запускается командой npm install && npm run dev.

Приватность и работа офлайн

Каждый онлайн-редактор кода из этой статьи работает на чужом сервере. Если код выполняется во вкладке браузера, это меняет место его выполнения, но не место хранения. StackBlitz запускает ваш код во вкладке, но всё равно сохраняет проект на своём сервисе, если только проект не лежит в вашем репозитории.

Если код не должен покидать вашу машину, онлайн-редакторы не подходят — включая те, что работают во вкладке. Для быстрых правок локальных файлов статья How to use Chrome as a Code Editor and Debugger показывает, как Workspaces в DevTools могут напрямую читать и записывать локальную папку.

Какой онлайн-редактор кода выбрать?

Универсального победителя среди онлайн-редакторов кода нет. Выбирайте по задаче:

Группа, к которой относится инструмент, определяет, что он может запускать. Конкретный инструмент внутри группы определяет, насколько легко с него уйти. В следующий раз, открывая вкладку, чтобы создать то, что понадобится позже, сначала заведите репозиторий на GitHub, а затем выберите редактор, который сможет его открыть.

Часто задаваемые вопросы

Выполняет ли CodePen 2.0 npm install для пакетов из package.json?

Нет. CodePen 2.0 определяет пакеты, которые использует Pen, и перечисляет их в редактируемом package.json. Затем компилятор CodePen преобразует этот файл в import map, которая загружает каждый пакет с CDN esm.sh. Ничего не устанавливается, и папки node_modules нет. Вы можете добавить собственную import map, и CodePen отдаст вашим записям приоритет над сгенерированными.

Работает ли StackBlitz в Firefox и Safari?

Да, но с ограничениями. WebContainers — среда выполнения, на которой работают StackBlitz и Bolt, — полностью поддерживаются в Chrome и браузерах на базе Chromium. В Firefox поддержка находится в статусе беты, как и в Safari начиная с версии 16.4. Ни Firefox, ни Safari не поддерживают полностью режим cross-origin isolation, который нужен WebContainers, поэтому превью сервера внутри редактора может блокировать сторонние ресурсы. Обойти это можно, открыв превью в отдельном окне.

Может ли StackBlitz открыть приватный репозиторий GitHub?

Только при наличии платной подписки StackBlitz. Публичные репозитории бесплатно открываются по адресу stackblitz.com/github/USER/REPO, но импорт приватных репозиториев доступен только по подписке. Обычная ссылка /github/ загружает репозиторий без прав на запись, а при первом сохранении страница перезагружается уже с вашей собственной копией. Добавьте /fork перед путём GitHub, например stackblitz.com/fork/github/USER/REPO, чтобы сразу открыть новую копию.