PowerHTML

О приложении

PowerHTML – это web-редактор, в котором создаются презентации для просмотра с помощью браузера. Результирующая презентация представляет собой автономный HTML-файл. Один файл, в который помещены: код HTML и CSS, код Javascript, медиа (изображения, видео, аудио в кодировке base64), содержание встроенных iframe. Всё это в одном файле, что удобно для распространения, контроля, показа в интернете и на локальном компьютере.
Сам редактор также является одним автономным HTML-файлом. Он бесплатен, может работать на сайте в интернете или запускаться по клику на локальном компьютере. Является легким и бесплатным аналогом MS PowerPoint со своими недостатками и преимуществами.

Слайды и шаблоны

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

На верхней панели «Главная» есть кнопка [Шаблоны], которая открывает список имеющихся шаблонов – выбранный в нем шаблон создаст новую страницу.
Пользователь имеет возможность добавить в это окно свой шаблон от выделенного слайда (шаблон будет сохранен только в экспортированном HTML, но не в редакторе). Есть предустановленный шаблон «С номером слайда» – используйте его и потом кнопку [Дублировать] для создания страниц с автоматической нумерацией.

Элементы слайда

Редактирование текста

Выделенный блок текста редактируется с помощью инструментов меню «Главная». Кнопки этого меню работают на весть выделенный блок. Это семейство и стиль шрифта, его цвет и тень.
При выделенном блоке есть возможность точно отредактировать положение блока на слайде, задать его прозрачность и угол поворота – это делается в Инспекторе справа.

Простой текст можно редактировать прямо на холсте слайда. Если есть желание и начальные знания HTML, то можно отформатировать отдельные фрагменты текста с помощью HTML и CSS разметки. Это надо делать в Инспекторе справа в поле ТЕКСТ – увеличьте это поле по вертикали, потянув мышкой за нижний правый угол.

Редактирование видео и аудио

Не просто можно добавить видосик на слайд. Также имеется возможность его обрезать по времени – это делается по кнопке [Видеоредактор] в Инспекторе. Более удивительные вещи можно провернуть по кнопке [Интерактив] – есть возможность останавливать видео на определенном моменте и показывать пользователю или информационный текст, или задать вопрос с вариантами ответа, то есть, сделать своеобразную викторину или тест.

P.S. Не рекомендую обрезать видео именно в это редакторе, т.к. после удаления в редакторе лишних для показа фрагментов видео непоказываемые фрагменты останутся в результирующей Презентации, что значительно увеличит ее вес. Совет относится и к аудио. Заранее обрезайте видео по времени и делайте размер его картинки такой, какой хотите видеть на слайде.

При добавлении аудиофайла его также, как и видео, можно зациклить, убрать управляющие элементы, запускать при старте слайда. Еще можно сразу в редакторе записать звук со своего микрофона и поместить его на слайд (микрофон работает если браузеру дать на это разрешение). Есть похожий на видеоредактор свой «Аудиоредактор» с таким же функционалом.

Флажок для сокрытия управляющих элементов медиа (аудио в этом случае будет вообще не видно визуально) имеет смысл, если хотите чтобы медиа проигрывалось автоматически при открытии слайда – есть такой флажок тоже. Еще можно зацилить медиа.

Вставка iframe

По моему мнению это ударная фича PowerHTML. Идея iframe состоит в том, что пользователь (или нейросеть) в нем пишет свой полноценный HTML+CSS код, включая JS. То есть, размещает на слайде что угодно, что может работать в браузере. Конечно, возможно вставлять в iframe не весь код, а только ссылку на него. Тогда нарушается одна из основных идей редактора – генерить на выходе автономную презентацию без зависимостей. Но для ряда сценариев так будет удобней.

Даже по мелочи iframe здорово помогает в дизайне. Например, в редакторе нет возможности создать прямоугольник с градиентной заливкой. Тогда на слайд выводится iframе, в нем пишется простой код блока с градиентом и всё.
Также автоматическая нумерация слайдов, которую я добавил в один из шаблонов редатора, идет через iframe, в который выведен код для считывания номера слайда во время демонстрации.

Переходы и анимация

Переходы в презентации – это анимация всего слайда при его появлении на экране. Настройка переходов осуществляется на закладке «Переходы». Виды переходов: Появление, Масштаб, Сдвиг (Слева, Справа, Снизу). Есть поле для задания длительности перехода и кнопка для применения перехода сразу ко всем слайдам.

Анимация – это «оживление» элементов слайда. Также существует несколько простых видов анимации, задержки, указание триггера старта анимации. Не выходя из редактора анимацию можно просмотреть. Последовательность применения анимаций регулируется.

Понятие проекта

Понятие проекта заключается в том, чтобы презентацию, созданную в PowerHTML, можно было не только просмотреть в интерфейсе редактора, но и сохранить в такой формат, который потом реально загрузить обратно для продолжения редактирования.
Итак, кнопка [Сохранить в HTML] создает html-файл с автономной презентацией, а кнопка [Открыть HTML] загружает этот же файл для продолжения редактирования.
Вверху слева в редакторе есть поле для названия файла и одновременно для названия страницы, на которой будет просматриваться презентация в браузере.

Показ презентации

После использования кнопки [Сохнанить в HTML] презентация превращается в атономный HTML. Навигация по слайдам осуществляется с помощью: нижней панели показа, или кнопками мыши ЛКМ (вперед) и ПКМ (назад), или колесиком мыши, или клавишами-стрелками на клавиатуре. Для нижней Панели показа предлагаются разные дизайны, которые выбираются на закладке «Конструктор».

Во премя показа презентации пользователь может рисовать, выбирая на Панели показа [Перо] и [Цвета пера]. А кнопка [Стерка] удаляет все художества. Еще на Панели показа есть [Лезерная указка] – это стилизованный анимированный курсор.

История создания PowerHTML

Во-первых, первоначальным автором идеи и создателем этого редактора был не я. Во-вторых, программистом был даже не человек. PowerHTML – это результат вайбкодинга, другими словами, человек пишет промпты на человеческом языке, а нейросеть выдает программный код. Я узнал о редакторе из статьи на Хабре. Статья написана от первого лица, от автора этих самых промптов. Автор представляется школьным учителем физики, которому захотелось для своих учеников делать презентации, каждая из которых помещается в один файл и не зависит ни от какого ПО, кроме браузера. Попробовал редактор, он мне понравился. Заметил недоработки, которые восполнил сам уже без привлечения ИИ.

Что я доработал:

• Нумерация слайдов из шаблона «С номером слайда». Автоматической нумерации раньше не было.
• Проверка и очистка неиспользованных в презентации ассетов. Такие ассеты (изображения, видео, аудио) после их удаления в редакторе оставались в экспортированной презентации, колоссально увеличивая ее вес.
• Добавлена кнопка для выравнивания текста по обоим краям (Justify).
• Добавлена кнопка для задания тени тексту.
• Добавлена подсветка кнопок выравнивания текста в зависимости от выравнивания.
• Облегчено схватывание мышкой за уголки блока для изменения его размеров.
• Настроен прозрачный фон в HTML-вставках iframe.
• Разблокирована возможность вставлять в текстах все html-тэги кроме <script> (используйте Инспектор).

Анатолий Опарин, август 2026

Скачать, попробовать

📥 Моя версия со всеми доработками, изложенными выше.
📥 Русская версия оригинальная.
📥 Английская версия оригинальная.
🌐 Презентация, созданная в PowerHTML и лёгшая в основу этого обзора. Вы ее можете сохранить на свой диск и открыть в PowerHTML для узучения элементов слайда и их параметров.

По ссылкам выше вы попадаете в редактор, который состоит из одного(!) html-файла. Вызовите окно сохранения страницы по сочетанию горячих клавиш Ctrl+S. Тип файла назначьте "Веб-страница, только html" и сохраните файл себе на диск. Запускайте его простым двойным кликом.