OnlyOffice Web Comp

📖 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:

Part	Path	Description
Component library	src/components/onlyoffice-web-comp/	Reusable Web editor wrapper + Markdown docs
Demo site	src/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

2. Open a route:

Route	Description
/	Product landing page
/docs	Component library documentation (rendered from Markdown)
/docs/demos/single	Single-instance editor demo
/docs/demos/multi	Multi-instance Tab demo

3. 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.

• Entry: Component README (English)
• Overview: docs/概述.md

Doc	Topic
Quick Start	Init and container mount
Core API	OnlyOfficeManager, multi-instance
Events	EventBus
Examples	React integration patterns
Reference	Constants and types
Notes & Formats	Prerequisites and formats
Fonts	Custom font registration
Comments & Revisions	Comments and revisions
Single-instance Demo	Single editor demo + source
Multi-instance Demo	Full 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.

Related Resources

• OnlyOffice API docs
• OnlyOffice Web Apps
• OnlyOffice SDK
• x2t-wasm

Contributing

Issues and Pull Requests are welcome.

License

See LICENSE.