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

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

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?tab=single	Single-instance editor demo
/docs/demos?tab=multi	Multi-instance Tab demo

3. Upload a file → edit → export

Legacy routes /examples and /multi redirect to the multi-instance demo tab.

Component Library Docs

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

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

Doc	Topic
01 Quick Start	Init and container mount
02 Core API	OnlyOfficeManager, multi-instance
03 Events	EventBus
04 Examples	React integration patterns
05 Reference	Constants and types
06 Notes & Formats	Prerequisites and formats
10 Fonts	Custom font registration
07 Comments & Revisions	Comments and revisions
08 Single-instance Demo	Single editor demo + source
09 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/page.tsx            # /docs/demos?tab=single|multi
│   │   └── examples/                     # → redirect to multi 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/

Fonts

Custom fonts are registered via __custom_font_registry__, with ttf-to-catalog-font.mjs producing OnlyOffice catalog wire-format files. See 10 - 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.