WYSIWYG HTML-редактор
WYSIWYG HTML-редактор позволяет собирать веб-страницу, глядя на неё, а разметку за вас пишет программа. Разберём, где предпросмотр может ввести в заблуждение, и сравним Mobirise, наш бесплатный блочный редактор, с пятью другими программами.
Бесплатно для личных и коммерческих сайтов.
за приложение и экспорт в HTML
Приложение Mobirise для компьютера экспортирует сайт в статические файлы на любом плане. Чтобы открыть код прямо в редакторе, нужен платный план.
WYSIWYG HTML-редакторы: коротко о главном
Факты о редакторах собрала команда Mobirise в октябре 2026 года.
WYSIWYG расшифровывается как «what you see is what you get», то есть «что видишь, то и получишь». В таком редакторе вы работаете со страницей в том виде, в каком она выглядит, а не с её исходным кодом: щёлкаете по заголовку и печатаете, вставляете картинку или меняете цвет, а программа пишет HTML и CSS для каждого действия. Так можно заниматься дизайном HTML-страниц, не набирая ни одного тега, хотя на экране вы видите близкий предпросмотр, а не гарантию результата.
Классические редакторы с режимом дизайна, блочные конструкторы, визуальные CSS-дизайнеры и редакторы кода с живым предпросмотром.
Визуальный редактор и экспорт в HTML ничего не стоят на Windows, Mac и Linux, а для начала у вас есть 200+ блоков. На бесплатном плане на опубликованных страницах показывается брендинг Mobirise.
Обычные страницы .html со стилями Bootstrap 5, а рядом лежат его скрипты. Их отдаст любой хостинг, который умеет раздавать обычные файлы; на сервере никакой код не выполняется.
Чтобы читать или менять саму разметку, нужно расширение Code Editor: оно входит в планы KIT, BASE и GROW и работает с отдельным блоком или целой страницей.
Mobirise не умеет загружать сайт или шаблон, сделанный в другой программе. Pinegrow, Dreamweaver, Bootstrap Studio и CoffeeCup это умеют.
Блоки перестраиваются под телефон, планшет и компьютер, и каждую ширину можно проверить в предпросмотре. Отдельного макета для телефона нет.
Какая программа для визуальной вёрстки подойдёт под вашу задачу
Лучшего WYSIWYG HTML-редактора на все случаи не существует, поэтому выбирайте по задаче. Для некоторых из этих задач лучше подходит конкурент, и в его карточке так и написано.
Mobirise
Вы видите готовую страницу, пока перетаскиваете блоки на место, заменяете в них текст и настраиваете параметры блоков; затем бесплатное приложение создаёт статический сайт на Bootstrap 5. Минус: чужой HTML не загрузить, а просмотр кода требует платного плана.
Pinegrow Web Editor
Открывает любой готовый файл .html и показывает живой визуальный вид рядом с его разметкой; поддерживается и Tailwind CSS. Минус: $18 в месяц, $149 в год или $199 разово.
Bootstrap Studio
Компоненты Bootstrap, которые перетаскиваются мышью, встроенный редактор кода и офлайн-проекты — за $29 или $59 разово. Минус: вы остаётесь в рамках компонентной модели Bootstrap.
Adobe Dreamweaver
В режиме Live View можно щёлкнуть по отрисованной странице и поменять в ней текст, картинки и классы, а главным по-прежнему остаётся исходный код. Минус: подписка ($22,99 в месяц на плане для одного приложения) и нет версии для Linux.
CoffeeCup HTML Editor
Разделённый предпросмотр перерисовывает страницу прямо во время набора; есть бесплатная версия, а полная стоит $29 разово. Минус: только Windows, и каждый тег вы пишете сами.
Webflow
Визуальный дизайнер на основе CSS, в котором каждый брейкпоинт настраивается вручную; для экспорта кода нужен платный план. Минус: панели повторяют CSS, так что удобнее всего он тем, кто CSS уже знает.
8B AI
Напишите одно предложение и получите готовый дизайн сайта; на бесплатном плане можно посмотреть настоящий HTML и CSS, из которых он состоит. Минус: сервис работает только в браузере, а публикация, полный экспорт и правки через чат требуют плана Pro ($9 в месяц при оплате за год).
Elementor
Плагин-конструктор страниц для сайтов на WordPress. Минус: отдельной папки с HTML вы не получите, потому что страницам нужен WordPress, работающий на вашем сервере.
Оговорка: Mobirise делаем мы, так что считайте этот список написанным заинтересованной стороной. Сведения о каждом конкуренте взяты с его страниц о продукте и ценах, и там, где конкурент справляется с задачей лучше, мы прямо его называем.
Шесть программ для визуальной работы с HTML в одной таблице
Строки подобраны для тех, кому важен сам HTML: что вы правите на экране, насколько открыт код и загружаются ли сторонние файлы.
| Возможность | Mobirise | Pinegrow Web Editor | Adobe Dreamweaver | 8B AI | Bootstrap Studio | CoffeeCup HTML Editor |
|---|---|---|---|---|---|---|
| Что вы правите на экране | Саму страницу: перетаскиваете блоки, печатаете текст прямо на месте, настраиваете каждый блок | Отрисованную страницу рядом с её исходными файлами | В основном код; Live View позволяет править отрисованную страницу | Сгенерированный дизайн, который на Pro дорабатывается через ИИ-чат | Компоненты Bootstrap, размещённые на холсте, и панель кода | Код с живым предпросмотром на разделённом экране |
| Ввод собственного кода | Через расширение Code Editor (KIT, BASE, GROW), для блока или страницы | Да, с двусторонней синхронизацией с VS Code | Да, это основной режим, с подсказками кода | Ручная правка не заявлена; на бесплатном плане виден настоящий HTML и CSS | Да: HTML, SASS, JavaScript и JSON в редакторе по образцу VS Code | Да; программа дополняет код и проверяет разметку |
| Открывает готовый сайт .html | Нет, только проекты, начатые в Mobirise | Да, любой готовый сайт | Да, в том числе готовые страницы на Bootstrap | Разработчик об этом не сообщает | Да: готовые страницы, стили, скрипты и картинки перетаскиваются в проект | Да, локальные файлы или страницы, открытые прямо на сервере |
| Фреймворк в экспортированном HTML | Bootstrap 5 | Tailwind CSS, Bootstrap или без фреймворка | Любой; в комплекте Bootstrap 5.3.8, 4.4.1 и 3.4.1 | Собственная разметка; без Bootstrap | Bootstrap 5, 4 или 3 | Ваша собственная разметка; для старта есть бесплатные адаптивные шаблоны |
| Где работает | Windows, macOS (сборка для Apple Silicon или Intel), Linux на базе Debian, браузер, Android | Windows, macOS, Linux; есть и версия для браузера | Windows и macOS | Только в браузере | Windows, macOS, Linux | Только Windows |
| Цена и оплата | $0 за редактор и экспорт в HTML. Годовые планы: KIT за $149 открывает Code Editor и премиум-темы; BASE ($199) и GROW ($249) добавляют ещё сайты на хостинге и ИИ | $18 в месяц, $149 в год или $199 разово; есть пробный период | План на одно приложение — $22,99 в месяц, годовое обязательство с ежемесячной оплатой; есть пробный период | Создание дизайна бесплатно; Pro, нужный для публикации, стоит $9 в месяц при оплате за год | Разовая оплата: $29 за Standard или $59 за Lifetime | Бесплатная версия или бессрочная лицензия за $29, в которую входит год обновлений |
Где «что видишь» перестаёт быть правдой
Редактор отрисовывает страницу один раз — на вашем экране. А у каждого посетителя свой браузер, своё устройство и свой набор шрифтов.
В большинстве современных визуальных редакторов холст — это настоящая веб-страница, которую отрисовывает браузерный движок, так что многое из того, что вы видите, соответствует действительности: те же теги, те же стили. Расхождения появляются там, где окружение посетителя отличается от вашего. На трёх из них спотыкаются почти все.
Шрифты
Посетитель увидит ваш шрифт, только если страница загружает его из интернета или он поставляется вместе с сайтом. Иначе устройство подставит другой шрифт, и заголовки переносятся по-другому. Проверьте, что тема сама подключает свои шрифты.
Размеры экрана
Холст показывает одну ширину за раз. Заголовок, который помещается на ноутбуке, на телефоне может разбиться на несколько строк, а ряд колонок — выстроиться друг под другом. Перед публикацией пройдитесь в предпросмотре по каждой ширине.
Скрипты
Слайдеры, меню, формы, карты и встроенное видео внутри редактора часто ведут себя иначе или намеренно стоят на паузе. Считайте их там заглушками, проверьте экспортированную страницу в настоящих браузерах и отправьте тестовую форму уже с рабочего хостинга.
Четыре семейства WYSIWYG HTML-редакторов
Все они показывают страницу, пока вы работаете. Разница в том, с чем вы имеете дело: со страницей, готовыми блоками, свойствами CSS или кодом.
Классический режим дизайна
Холст в духе текстового документа поверх HTML, обычно рядом с кодом; Live View в Dreamweaver — его современная форма. Подходит тем, кто поддерживает сайты, написанные вручную, и хочет поправить текст, не выискивая его среди тегов.
Блочные конструкторы
Страницы собираются из готовых секций или компонентов, как в Mobirise или Bootstrap Studio, а разметку пишет программа. Такой инструмент часто называют конструктором HTML-страниц. Подходит всем, кому нужен сайт без кода; так же устроены и многие простые конструкторы веб-страниц для новичков.
Визуальные CSS-дизайнеры
Webflow или Pinegrow на ваших собственных файлах: вы оформляете элементы в панелях, которые соответствуют свойствам CSS. Подходит дизайнерам, которые уже мыслят категориями блочной модели, классов и брейкпоинтов.
Редакторы кода с живым предпросмотром
CoffeeCup HTML Editor и похожие программы, которые часто называют WYSIWYG HTML-редакторами с предпросмотром: вы набираете HTML, а соседняя панель перерисовывает страницу. Они подходят тем, кто изучает HTML, и разработчикам, которые пишут каждый тег сами, но хотят сразу видеть результат.
Делаете собственное приложение, а не сайт? Тогда вам нужен редактор-компонент: поле форматированного текста, которое встраивается в форму, CMS или службу поддержки, чтобы ваши пользователи могли оформлять текст. TinyMCE и CKEditor 5 — многофункциональные ветераны с платными облачными планами и дополнениями; Quill — более лёгкий WYSIWYG HTML-редактор с открытым исходным кодом; TipTap — headless-инструментарий на основе ProseMirror, так что панель инструментов вы проектируете сами. Они выдают фрагменты HTML внутри вашего продукта, а не целые страницы, поэтому их нет в таблице выше.
Что в Mobirise настраивается визуально, а что требует кода
Большая часть страницы делается мышью. То, чего нет в панелях, закрывает расширение Code Editor.
Блоки
Каждая страница в редакторе — это столбец готовых секций. Перетащите новую из боковой панели и удалите те, что не нужны.
Текст и теги заголовков
Печатайте прямо на странице. Каждому заголовку можно задать любой тег H, так что структура страницы — в ваших руках.
Фотографии
Щёлкните по любой фотографии, чтобы заменить её своей. Большие файлы уменьшите заранее, до добавления; почему — объясняют советы ниже.
Параметры блока
Панель параметров у каждого блока задаёт отступы, фон, видимые элементы вроде заголовка или кнопок и число колонок.
Шрифты и цвета
В Style Editor выбираются шрифты и цветовая палитра, которые используют блоки.
Код, когда он нужен
Дополнительный атрибут, своё правило CSS или переработанная разметка — это работа для расширения Code Editor, которое входит в KIT, BASE и GROW.
Ограничение, о котором стоит знать: HTML, который вы собрали, получает каждое устройство. В Mobirise нет отдельного макета для телефона, и ни один элемент нельзя скрыть только на одном размере экрана.
Какие файлы вы получаете при экспорте
Экспорт из приложения для компьютера бесплатен на любом плане. Работаете в конструкторе в браузере? Там для скачивания кода нужен BASE или GROW.
Страницы и картинки
По одному HTML-файлу на страницу с обычными заголовками, абзацами и ссылками, а также ваши фотографии и графика темы в экспортированной папке.
Стили и скрипты
CSS и JavaScript из Bootstrap 5, собственные стили темы, настройки, которые вы выбрали в панелях, и скрипты для меню и слайдеров.
Ничего на сервере
Ни PHP, ни базы данных, ни админ-панели, поэтому сайт работает на любом обычном хостинге или на GitHub Pages.
Экспорт работает в одну сторону. Mobirise собирает сайт из собственного проекта, а не из HTML, поэтому правки экспортированных файлов в другом редакторе в него не попадут. Меняйте код в Code Editor или оставляйте ручные правки на самый последний шаг.
Как сохранить визуально созданный HTML чистым и быстрым
Визуальные инструменты по своей природе добавляют лишний вес. Эти привычки помогают его снизить — в Mobirise или любом другом редакторе.
Структура через заголовки, а не размеры
Дайте каждой странице один H1, вложите под него H2 и H3 и выбирайте тег по его месту в структуре. Насколько крупно он выглядит — задача стилей.
Сначала уменьшите фотографии
Уменьшите каждое изображение примерно до максимальной ширины, в которой оно будет показано, и сохраните в WebP или хорошо сжатом JPEG. Один исходник с фотоаппарата может весить больше, чем вся остальная страница.
Стили в одном месте
Если перекрашивать кнопки по одной, за вами тянется шлейф разовых правил. Задайте шрифты и цвета централизованно, в Style Editor или его аналоге в вашей программе, и CSS останется коротким.
Проверяйте вне редактора
Откройте экспортированную страницу в нескольких браузерах, прогоните её через валидатор W3C и тест скорости вроде PageSpeed Insights и до запуска исправьте всё, на что они укажут.
Тема Mobirise или бесплатные HTML-шаблоны сайтов?
И то и другое даёт готовый внешний вид с первого дня. Разница в том, кто пишет разметку и какие редакторы смогут её потом открыть.
Скачанный шаблон
Папка файлов, которые написал кто-то другой. Правьте его в редакторе кода или в визуальной программе, которая открывает сторонний HTML, например в Pinegrow, Dreamweaver, Bootstrap Studio или CoffeeCup. Прочитайте лицензию: некоторые бесплатные шаблоны требуют ссылку на автора.
Тема Mobirise
Библиотека блоков, которая живёт внутри приложения, а не папка с файлами. Вы собираете из неё страницы визуально, а HTML создаётся при экспорте. На бесплатном плане доступны 200+ блоков в одной базовой теме; KIT открывает все премиум-темы и расширения, всего больше 220.
Перенос внешнего вида шаблона
Mobirise не открывает шаблоны, сделанные в другом месте, даже на Bootstrap 5. Воссоздайте внешний вид из блоков или дайте Mobirise AI скриншот в качестве запроса и доработайте четыре варианта дизайна, которые он вернёт, если лицензия шаблона это позволяет.
Кому Mobirise подходит как визуальный HTML-редактор
Для одних задач Mobirise подходит, для других — нет. Вот как понять, к какой стороне относится ваша.
Хороший выбор, если
- Вы хотите собирать страницы визуально и не писать ни одного тега
- Вам нужны обычные файлы для своего хостинга без оплаты плана
- Вы делаете сайты для клиентов из единообразных адаптивных блоков
- Вы работаете на ноутбуке офлайн, а публикуете позже
- Вы хотите сначала получить черновик от ИИ, а потом править его вручную в том же редакторе
Лучше другая программа, если
- Нужно исправить старый сайт, написанный вручную, или скачанный шаблон: Dreamweaver, Pinegrow или CoffeeCup HTML Editor
- Проекту нужен Tailwind или вообще никакого фреймворка: Pinegrow
- Нужен контроль до пикселя и стили под каждый брейкпоинт: Webflow
- Вы предпочитаете заплатить за работу с Bootstrap один раз: Bootstrap Studio
- Вы хотите бесплатно писать код и сразу видеть результат: бесплатная версия CoffeeCup
- Сайт уже работает на WordPress: Elementor
Вопросы о визуальном редактировании HTML
Что такое WYSIWYG HTML-редактор?
Это редактор, в котором вы меняете веб-страницу в том виде, в каком она выглядит на экране, а HTML и CSS пишет программа. Аббревиатура обещает, что страница, которую вы правите, — это та же страница, которую вы публикуете. На практике они близки, но не одинаковы, потому что шрифты, ширина экрана и скрипты зависят от браузера каждого посетителя.
Mobirise — это drag-and-drop HTML-редактор?
Да, на уровне блоков: вы перетаскиваете готовые секции из боковой панели на страницу, а затем печатаете в них. Отдельные элементы в произвольное место не бросаются; макет задают блоки и их параметры. Подробнее о таком способе работы: бесплатные конструкторы сайтов drag-and-drop.
Можно ли править HTML-код в Mobirise?
Можно, если у вас есть расширение Code Editor, которое входит в KIT ($149 в год), BASE и GROW. Оно показывает разметку и CSS отдельного блока или всей страницы. Файлы, экспортированные на бесплатном плане, тоже открываются в любом текстовом редакторе, но сделанные там правки в проект уже не вернутся.
Может ли Mobirise открыть скачанный HTML-шаблон?
Нет. Шаблон с маркетплейса или сайт, написанный вручную, — это обычный HTML, а Mobirise работает только с проектами, созданными в нём самом. Dreamweaver, Pinegrow, Bootstrap Studio и CoffeeCup HTML Editor открывают готовый HTML; в Mobirise внешний вид пришлось бы воссоздать из блоков.
Есть ли бесплатный WYSIWYG HTML-редактор?
Да. Приложение Mobirise для компьютера бесплатно и для личных, и для коммерческих сайтов, как и его экспорт, хотя на бесплатных сайтах показывается брендинг Mobirise. У CoffeeCup есть бесплатная версия HTML Editor, если вам удобнее писать код. 8B AI создаёт дизайны бесплатно, хотя за публикацию придётся платить. Больше бесплатных вариантов мы сравниваем в подборке бесплатного программного обеспечения для дизайна сайтов.
HTML из визуального редактора хуже кода, написанного вручную?
Обычно он тяжелее, потому что визуальные инструменты добавляют обёртки и классы, без которых обходятся страницы, написанные вручную. Результат на основе фреймворка вроде Bootstrap 5 остаётся читаемым и предсказуемым; о фреймворке подробнее в обзоре конструкторов сайтов на Bootstrap. Если нужна самая компактная разметка, пишите её сами в редакторе кода.
Есть ли WYSIWYG HTML-редактор для Mac, Windows или Linux, который работает офлайн?
Да. У приложения Mobirise для компьютера есть сборки для Windows, для macOS (Apple Silicon и Intel) и для Ubuntu и других систем Linux на базе Debian, а для редактирования подключение не нужно. Bootstrap Studio, который хранит проекты офлайн, и Pinegrow тоже работают на всех трёх системах, а у Dreamweaver нет версии для Linux, и CoffeeCup HTML Editor работает только на Windows. Больше вариантов для пользователей Mac — в нашем обзоре конструкторов сайтов для macOS.
Работает ли Mobirise офлайн?
В приложении для компьютера — да: визуальное редактирование, предпросмотр и все установленные темы и блоки работают без сети. Подключение нужно для ИИ, публикации, входа в аккаунт, покупок и загрузки обновлений или тем, которых у вас ещё нет. Подробнее об этом разделении: офлайн-программа для создания сайтов.
Есть ли онлайн WYSIWYG HTML-редактор для Android или iPhone?
Приложения для устройств Apple у Mobirise нет, но на iPhone и iPad его конструктор в браузере работает онлайн в Safari или любом другом мобильном браузере. На Android приложение Mobirise AI из Google Play генерирует дизайны, переводит, публикует и экспортирует HTML. 8B AI тоже работает в браузере.
Создайте свою первую страницу сегодня
Начните с ИИ в браузере или скачайте бесплатное приложение. В обоих случаях это один и тот же Mobirise.