Как запустить полноценный Office прямо в браузере без сервера и регистрации

Представьте ситуацию: вам нужно внедрить просмотр или небольшое редактирование документов Word и Excel в свой проект. Обычно выбор невелик: либо платные тяжеловесные решения типа Google Docs API или Microsoft Graph, либо попытки поднять свой сервер с LibreOffice или OnlyOffice Document Server. А теперь представьте, что все это работает на чистом фронтенде, не отправляет файлы на сторонние сервера и не требует бэкенда вообще.

Репозиторий office-website — это как раз такая попытка перенести офисный пакет в браузер, используя мощь WebAssembly.

Что это за проект

Проект представляет собой реализацию концепции local-first для офисных документов. По сути, это легкая обертка над движком Open XML, скомпилированным в WASM. Основная идея в том, что ваши .docx, .xlsx и .pptx файлы обрабатываются исключительно на стороне клиента.

Автор проекта использовал наработки OnlyOffice, но упаковал их в современный стек на Next.js 15. Это не просто «просмотровая» библиотека, а полноценное веб-приложение, которое можно развернуть на Cloudflare Pages или любом статическом хостинге за пару минут.

Чем он интересен разработчику

Главная фишка здесь — приватность и автономность. Поскольку обработки на сервере нет, вы избавляетесь от целого пласта проблем с безопасностью данных и нагрузкой на CPU вашего сервера.

Вот что умеет этот «офис на стероидах»:

• Полный цикл работы с файлами. Можно не только открывать готовые документы, но и создавать новые прямо из интерфейса.
• Использование IndexedDB. Для хранения временных файлов и состояния редактора используется локальная база данных браузера. Если вы случайно закроете вкладку, данные никуда не денутся.
• Интеграция с облаками через Uppy. Несмотря на локальную обработку, файлы можно подтягивать напрямую из Google Drive, Dropbox или OneDrive.
• WASM-конвертация. Благодаря проекту OnlyOffice x2t WASM, сложные операции по преобразованию форматов происходят внутри браузерной песочницы.

Взгляд под капот

Технологический стек выглядит очень бодро для 2024-2025 года. Вместо старых тяжелых библиотек здесь:

• Next.js 15+ в качестве основы.
• Zustand для управления состоянием. На мой взгляд, это идеальный выбор для такого приложения — минимум бойлерплейта по сравнению с Redux.
• Radix UI и Lucide Icons. Интерфейс выглядит чисто, современно и отзывчиво. Нет ощущения «привета из 2000-х», которым часто грешат опенсорсные редакторы.

Интересно, как реализована работа с данными. Автор использует библиотеку idb для удобного взаимодействия с IndexedDB. Это позволяет приложению работать практически как нативному десктопному софту в плане кэширования и сохранения прогресса.

Как это попробовать

Запустить проект локально проще простого. Вам понадобится Node.js версии 22 или выше (это важно из-за требований свежего Next.js) и pnpm.

git clone https://github.com/baotlake/office-website
cd office-website
pnpm install
pnpm dev

После этого по адресу localhost:3000 поднимется готовый редактор. Если захотите выкатить это в продакшн, проект уже преднастроен под Cloudflare Pages. Команда pnpm deploy сделает всё за вас.

Кому это пригодится

Я вижу несколько сценариев, где этот проект будет полезен. Во-первых, если вы делаете внутреннюю корпоративную систему, где безопасность данных критична и файлы не должны покидать контур браузера пользователя. Во-вторых, для учебных проектов или CRM-систем, где нужно быстро глянуть содержимое документа, не скачивая его на диск.

Конечно, стоит понимать, что это не стопроцентная замена полноценному Microsoft Office в плане сложных макросов или тяжелой верстки. Но для 90% повседневных задач — поправить текст в договоре или проверить цифры в таблице — возможностей WASM-движка хватает за глаза.

Проект сейчас находится в версии 0.1.0. Документация пока довольно лаконичная, но код открыт под лицензией AGPL v3, так что можно смело изучать внутренности и адаптировать под свои нужды. Если вы искали способ «прикрутить офис» без боли с серверной частью — это отличный кандидат для старта.