reveal.js: темы, экспорт и сравнение с альтернативами
reveal.js — это HTML-фреймворк для презентаций с открытым исходным кодом и 71,9 тыс. звёзд на GitHub: слайды пишутся на HTML или Markdown и показываются в любом браузере. Перед вами честное руководство: как устроены темы, шаблоны и примеры, как на самом деле ведёт себя экспорт в PDF и PowerPoint, чем он отличается от Slidev и Marp и какое место занимает agent-native рабочее пространство для дизайна.
Если вы пишете код и вам нужно выступить с докладом, вы наверняка уже сталкивались с reveal.js. Это опенсорсный фреймворк, стоящий за огромной долей слайдов с конференций для разработчиков, которые вы видели: вы пишете каждый слайд на HTML или Markdown, и он работает как веб-страница в любом браузере — со встроенными темами, переходами, анимациями фрагментов, заметками докладчика и нативным экспортом в PDF. С 71,9 тыс. звёзд на GitHub и лицензией MIT это ответ по умолчанию на вопрос «как сделать слайды, не открывая PowerPoint».
Это руководство — честная карта. Что такое reveal.js на самом деле, как складываются вместе темы, шаблоны и примеры, как в действительности ведёт себя экспорт в PDF и PowerPoint (есть подвох), как он смотрится на фоне других опенсорсных претендентов и — та часть, которую пропускает большинство статей, — где такой фреймворк перестаёт быть подходящим инструментом и его сменяет что-то другое. Если вы взвешиваете варианты для процесса подготовки презентаций с помощью ИИ и агентов, полезно точно знать, чем reveal.js является, а чем нет.
Что такое reveal.js
reveal.js называет себя «The HTML Presentation Framework», и это описание точное. Это не приложение, которое вы открываете и в котором кликаете, — это библиотека JavaScript, которую вы вставляете в HTML-файл. Каждый слайд — это элемент <section>; вложите секции друг в друга, и вы получите вертикальные слайды. Вы стилизуете всё с помощью CSS, подключаете переходы и фрагменты через data-атрибуты и проводите показ, открывая страницу в браузере. Поскольку результат и есть веб-страница, всё, на что способен веб, — живой код, встроенное видео, iframe, WebGL, ваши собственные компоненты — может жить на слайде.
Компромисс заложен прямо в определении: это фреймворк для разработчиков, а не графический интерфейс. Ваши инструменты — редактор кода и браузер, а не холст с маркерами перетаскивания. Именно за это разработчики его и любят — полный контроль версий, полный контроль над CSS, отсутствие проприетарного формата файлов — и именно поэтому не-программист от него отскочит. Он к тому же по-настоящему бесплатен: ни аккаунта, ни водяного знака, ни лимита на экспорт, ни оплаты за место. HTML принадлежит вам.
Темы, шаблоны и примеры
Большинство запросов вокруг reveal.js на самом деле о том, как сделать его красивым, не проектируя с нуля, — так что вот как складываются эти части.
Темы reveal.js — это встроенная отправная точка. Фреймворк поставляется с набором готовых тем — Black, White, League, Beige, Sky, Night, Serif, Simple, Solarized и другими, — которые вы переключаете, меняя одну ссылку на таблицу стилей. Тема — это просто CSS, поэтому «пользовательская тема reveal.js» означает написать (или форкнуть) файл Sass/CSS, задающий ваши шрифты, цвета и стили заголовков. Никакого магазина тем нет; вы редактируете таблицы стилей.
Шаблоны и примеры reveal.js живут преимущественно в сообществе, а не в единой официальной галерее. В репозитории есть примеры презентаций, сайт документации (revealjs.com) сам по себе является презентацией reveal.js, исходники которой можно прочитать, а GitHub полон стартовых шаблонов, заготовок и обёрток-фреймворков. Если вы ищете «reveal js examples», самый информативный — исходный код самого официального сайта: он демонстрирует почти каждую возможность в деле. Подвох для новичков: «шаблон» здесь — это репозиторий кода, который нужно клонировать и редактировать, а не файл дизайна, который вы заполняете.
Экспорт в PowerPoint и PDF
Экспорт в PDF — первоклассная встроенная функция, и работает она хорошо. Добавьте ?print-pdf к URL вашей презентации, откройте диалог печати браузера, выберите «Сохранить как PDF», и reveal.js переформатирует каждый слайд на отдельную страницу. Это чистый, поддерживаемый путь — получаемый PDF выглядит в точности как ваши слайды.
Экспорт reveal.js в PowerPoint — это то место, где нужно управлять ожиданиями. Никакого нативного «Сохранить как .pptx», который создавал бы редактируемый файл PowerPoint, нет. Практический путь — конвертация PDF → PPTX, и эта конвертация с потерями: каждый слайд попадает в PowerPoint как плоское изображение, а не как редактируемые текстовые поля, фигуры и макеты. Так что если кому-то дальше по цепочке нужно открыть вашу презентацию в PowerPoint и отредактировать её — перепечатать заголовок, изменить стиль диаграммы, переверстать пункт — reveal.js не тот инструмент, который это даст. Он создан для показа из браузера, и его редактируемый источник — это HTML, а не .pptx. Знание этого до начала избавит вас от болезненного сюрприза в тот день, когда коллега попросит «тот самый PowerPoint».
Альтернативы reveal.js и сравнение
reveal.js — не единственный способ писать слайды как код. Две ближайшие опенсорсные альтернативы — те, что имеют в виду под «альтернативой reveal.js», — это Slidev и Marp, и стоит честно сказать: Open Design находится совсем в другом слое, а не соперничает лоб в лоб.
| Инструмент | Создание | Редактируемый .pptx | Шаблонизация | Лицензия |
|---|---|---|---|---|
| reveal.js | HTML или Markdown | Нет (PDF→PPTX — изображения с потерями) | Темы = CSS/Sass; шаблоны сообщества | MIT |
| Slidev | Markdown + Vue | Нет (экспорт в изображение/PDF) | Компоненты Vue + темы | MIT |
| Marp | Только Markdown | Нет (PDF/PPTX как изображения) | Темы Markdown (CSS) | MIT |
| Open Design | Опишите это своему агенту | Да — редактируемый результат на основе дизайн-системы | Собственные шаблоны презентаций | Apache-2.0 |
Slidev — ближайший по духу собрат: он ставит во главу угла Markdown с компонентами Vue под капотом, так что часть сырой HTML-свободы reveal.js он меняет на более структурированный, удобный для разработчика процесс написания. Если вы живёте в мире Vue/Vite и хотите живые демо с кодом, Slidev — естественный выбор. Marp идёт в другую сторону — только Markdown, намеренно минималистичный, без компонентов — что делает его самым быстрым путём, когда ваши слайды в основном текст и вы вообще не хотите думать о фреймворке.
Все три — фреймворки «код в первую очередь» с одной и той же основной формой: вы пишете презентацию, вы показываете её в браузере, а редактируемый вывод в PowerPoint не является целью. Выбор между ними — в основном вопрос о том, какую поверхность написания вы хотите (сырой HTML, Vue-Markdown или чистый Markdown), а не о возможностях, которые есть у одного и отсутствуют у других.
Где место Open Design
Вот честная граница. reveal.js требует, чтобы вы писали презентацию — каждый слайд, кодом. Это плюс, если вам нужен рукотворный контроль над HTML, и ничто здесь его не заменит, если это ваша цель.
Open Design — это другой слой, и это продукт, который делаем мы, так что читайте с учётом этого. Это опенсорсное (Apache-2.0), local-first, работающее по принципу «свой ключ» Agent-Native Design Workspace, которое находится вне кодового агента, которым вы уже пользуетесь, — Claude Code, Codex или Cursor. Вместо того чтобы писать HTML вручную, вы описываете нужную презентацию, и агент генерирует редактируемую на основе дизайн-системы, так что она выходит в фирменном стиле и остаётся редактируемой, а не замерзает как отрендеренный артефакт. Open Design также поставляет собственные шаблоны презентаций, с которых можно начать.
Это не замена reveal.js, если вам нужно писать слайды как код с полным контролем над CSS, — это домашняя территория reveal.js, и здесь он превосходен. Open Design — для случая, когда вы предпочли бы дать агенту бриф, а не писать разметку, хотите, чтобы вывод соответствовал дизайн-системе во множестве презентаций, и хотите в итоге получить редактируемые файлы, которые принадлежат вам. Тянитесь к reveal.js, когда презентация и есть код, который вы пишете; тянитесь к рабочему пространству, когда презентация — один из многих фирменных результатов, которые агент производит для вас.
Частые вопросы
reveal.js бесплатен? Да. reveal.js — опенсорс под лицензией MIT: бесплатен для коммерческого использования, без аккаунта, без водяного знака и без лимитов на экспорт. HTML вы размещаете сами.
Как добавить или сменить тему reveal.js? reveal.js поставляется со встроенными темами (Black, White, League, Sky, Night, Serif и другими), которые вы меняете, поменяв одну ссылку на таблицу стилей. Пользовательская тема означает написать или форкнуть файл CSS/Sass со своими шрифтами и цветами — магазина тем для просмотра нет.
Можно ли экспортировать reveal.js в PowerPoint? В редактируемый .pptx — нет. reveal.js чисто экспортируется в PDF (добавьте ?print-pdf и распечатайте в PDF из браузера). Конвертировать этот PDF в PowerPoint можно, но с потерями — каждый слайд ложится плоским изображением, а не редактируемым текстом и фигурами. Если вам нужен редактируемый PowerPoint, reveal.js — не тот источник.
reveal.js vs Slidev vs Marp — что выбрать? Все три — опенсорс, «код в первую очередь», под лицензией MIT. Выбирайте reveal.js для сырого контроля над HTML, Slidev для Markdown плюс компоненты Vue (отлично для живых демо) и Marp для простейших презентаций только на Markdown. Ни один не нацелен на редактируемый вывод в PowerPoint.
Нужно ли уметь программировать, чтобы пользоваться reveal.js? По сути, да. reveal.js — фреймворк для разработчиков: вы работаете в текстовом редакторе с HTML, Markdown и CSS, а не в графическом интерфейсе drag-and-drop. Если же вы хотите описать презентацию простым языком, именно этот пробел заполняет agent-native рабочее пространство вроде Open Design.
Итог
reveal.js заслуживает свои 71,9 тыс. звёзд: это бесплатный, под лицензией MIT, HTML-нативный способ строить слайды, которые работают везде, где есть браузер, — с настоящими темами, чистым экспортом в PDF и полным контролем над CSS. Только входите с открытыми глазами — это фреймворк, в котором вы пишете, а не приложение, по которому вы кликаете, и «экспорт в редактируемый PowerPoint» он не делает. Если вы хотите писать презентации как код, reveal.js (или Slidev / Marp) — прекрасный дом. Если же вы предпочли бы описать презентацию и дать агенту сгенерировать редактируемую, фирменную и принадлежащую вам, вот тут подхватывает Agent-Native Design Workspace.