OnlyOffice Web Comp

July 13, 2026 ยท View on GitHub

๐Ÿ“– English | ไธญๆ–‡

๐ŸŒ Live Demo: https://onlyoffice-web-comp.vercel.app/

A browser-based document solution built on the OnlyOffice static SDK. View, edit, and convert Word, Excel, and PowerPoint entirely on the clientโ€”no Document Server required.

This repository has two parts:

PartPathDescription
Component librarysrc/components/onlyoffice-web-comp/Reusable Web editor wrapper + Markdown docs
Demo sitesrc/app/ + src/features/Next.js landing, docs, and live demos

Project Positioning

This project is not an npm package with a one-line install flow yet. It is a browser-only OnlyOffice integration template: the reusable runtime lives in src/components/onlyoffice-web-comp/, and this repository also includes the static OnlyOffice SDK / x2t assets required by that runtime.

Use this project when you want to embed OnlyOffice editing into your own web app without running OnlyOffice Document Server. The demo site is intentionally part of the repository so you can copy a working integration instead of reconstructing the editor lifecycle from scattered snippets.

Integrating into Your Project

The practical integration path is:

  1. Copy src/components/onlyoffice-web-comp/ into your application source tree.
  2. Copy the static assets from public/packages/onlyoffice/ into your app's public/packages/onlyoffice/ directory.
  3. Build your UI by following src/features/demo/office-preview-page.tsx: create an editor container, keep an OnlyOfficeManager instance, call openDocument, downloadExport, toggleReadOnly, and destroy the manager on unmount. To call the editor Automation API from the parent page, get a Developer Edition Connector with createConnector().

Static resource resolution is centralized in src/components/onlyoffice-web-comp/const/index.ts. Both local and CDN modes use the Developer Edition Docker-exported 9.4 SDK at /packages/onlyoffice/9.4.0-develop by default; onlyofficeVersion can override the CDN directory when needed.

Core Advantages

  • Local processing: Documents stay in the browser
  • Format support: Word, Excel, PowerPoint, CSV, DOCM, and more
  • No backend: Host static SDK assets only
  • Engineering APIs: Read-only/edit toggle, theme, language, multi-instance isolation
  • Connector support: Call the editor Automation API from the parent page with the Developer Edition Connector; works in both local and cross-origin CDN modes

Quick Try

  1. Visit the live demo or run locally:
git clone <repository-url>
cd onlyoffice-web-comp
pnpm install
pnpm dev
# http://localhost:3001
  1. Open a route:
RouteDescription
/Product landing page
/docsComponent library documentation (rendered from Markdown)
/docs/demos/singleSingle-instance editor demo
/docs/demos/multiMulti-instance Tab demo
  1. Upload a file โ†’ edit โ†’ export

Legacy route /examples redirects to the single-instance demo; /multi redirects to the multi-instance demo.

Component Library Docs

API details live in the component library docs, not duplicated here.

DocTopic
Quick StartInit and container mount
Core APIOnlyOfficeManager, multi-instance
EventsEventBus
ExamplesReact integration patterns
ReferenceConstants and types
Notes & FormatsPrerequisites and formats
FontsCustom font registration
Comments & RevisionsComments and revisions
Single-instance DemoSingle editor demo + source
Multi-instance DemoFull Tab demo source
import { OnlyOfficeManager, FILE_TYPE, ONLYOFFICE_ID } from "@/components/onlyoffice-web-comp";

Project Structure

onlyoffice-web-comp/
โ”œโ”€โ”€ src/
โ”‚   โ”œโ”€โ”€ app/                              # Next.js routes
โ”‚   โ”‚   โ”œโ”€โ”€ page.tsx                      # Landing
โ”‚   โ”‚   โ”œโ”€โ”€ docs/                         # Documentation site
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ page.tsx                  # /docs (overview md)
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ [slug]/page.tsx           # /docs/*
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ demos/                    # /docs/demos/single|multi
โ”‚   โ”‚   โ””โ”€โ”€ examples/                     # โ†’ redirect to single demo
โ”‚   โ”œโ”€โ”€ features/
โ”‚   โ”‚   โ”œโ”€โ”€ docs/                         # Docs shell, markdown renderer, site-map
โ”‚   โ”‚   โ”œโ”€โ”€ demo/                         # Live demo components
โ”‚   โ”‚   โ”œโ”€โ”€ marketing/                    # Landing page
โ”‚   โ”‚   โ””โ”€โ”€ shell/                        # Site header / footer / layout
โ”‚   โ””โ”€โ”€ components/
โ”‚       โ””โ”€โ”€ onlyoffice-web-comp/          # SDK wrapper + docs/*.md source
โ”œโ”€โ”€ public/                               # OnlyOffice SDK static assets
โ””โ”€โ”€ ...

Docs pages read Markdown directly from src/components/onlyoffice-web-comp/docs/. Demo tabs embed live editors from src/features/demo/.

Tech Stack

  • OnlyOffice SDK: Core editing
  • x2t + WebAssembly: Format conversion
  • Next.js 15 + React 19: Demo application

Deployment

pnpm install
pnpm build

Deploy to Vercel or any static host. Live demo: https://onlyoffice-web-comp.vercel.app/

Deploy SDK Assets to Cloudflare Pages CDN

OnlyOffice SDK assets can be hosted separately from the app. Deploy the contents of public/packages to Cloudflare Pages, then register the Pages URL before creating an editor.

# one-time project creation
npx wrangler pages project create onlyoffice-packages

# upload public/packages as the CDN root
npx wrangler pages deploy public/packages \
  --project-name onlyoffice-packages \
  --commit-dirty=true

After deployment, the asset URL should look like:

https://<project>.pages.dev/onlyoffice/9.4.0-develop/web-apps/apps/api/documents/api.js

Use that Pages origin as the runtime resource root:

import { OnlyOfficeManager } from "@/components/onlyoffice-web-comp";

OnlyOfficeManager.registerStaticResource({
  cdnOrigin: "https://<project>.pages.dev",
});

cdnOrigin points to the uploaded public/packages root, so do not append /packages. Configure this resource origin in src/components/onlyoffice-web-comp/const/index.ts by editing the cdnOrigin logic in buildStaticResource. Cloudflare Pages Direct Upload supports Wrangler folder uploads; dashboard drag-and-drop is less suitable for this repository because the SDK contains many files.

Fonts

Custom fonts are registered via __custom_font_registry__, with ttf-to-catalog-font.mjs producing OnlyOffice catalog wire-format files. See Fonts in the component docs for the full guide.

Quick outline:

  1. Run ttf-to-catalog-font.mjs --id <id> --verify to produce fonts/{id} catalog files
  2. Register the id and aliases in window["__custom_font_registry__"] inside AllFonts.js
  3. Ensure aliases cover every font name used in your documents

Ensure all font files comply with applicable licenses.

Contributing

Issues and Pull Requests are welcome.

License

See LICENSE.