{"id":37587266,"url":"https://github.com/electroluxcode/mvp-onlyoffice","last_synced_at":"2026-01-16T09:47:53.919Z","repository":{"id":324531773,"uuid":"1095775689","full_name":"electroluxcode/mvp-onlyoffice","owner":"electroluxcode","description":"An office editing component based on OnlyOffice that supports document viewing, editing, and conversion entirely on the client side.  ","archived":false,"fork":false,"pushed_at":"2025-12-25T09:59:49.000Z","size":142762,"stargazers_count":98,"open_issues_count":3,"forks_count":19,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-26T22:45:43.180Z","etag":null,"topics":["office","onlyoffice","react","typescript"],"latest_commit_sha":null,"homepage":"https://mvp-onlyoffice.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/electroluxcode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-13T14:01:20.000Z","updated_at":"2025-12-26T03:10:44.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/electroluxcode/mvp-onlyoffice","commit_stats":null,"previous_names":["electroluxcode/mvp-onlyoffice"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/electroluxcode/mvp-onlyoffice","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electroluxcode%2Fmvp-onlyoffice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electroluxcode%2Fmvp-onlyoffice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electroluxcode%2Fmvp-onlyoffice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electroluxcode%2Fmvp-onlyoffice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/electroluxcode","download_url":"https://codeload.github.com/electroluxcode/mvp-onlyoffice/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electroluxcode%2Fmvp-onlyoffice/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28478049,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T06:30:42.265Z","status":"ssl_error","status_checked_at":"2026-01-16T06:30:16.248Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["office","onlyoffice","react","typescript"],"created_at":"2026-01-16T09:47:53.760Z","updated_at":"2026-01-16T09:47:53.879Z","avatar_url":"https://github.com/electroluxcode.png","language":"JavaScript","readme":"# MVP OnlyOffice\n\n\u003e 📖 English | [中文](README.zh.md)\n\n🌐 **Live Demo**: https://mvp-onlyoffice.vercel.app/\n\nA browser-based document processing solution built on the OnlyOffice technology stack, supporting document viewing, editing, and conversion entirely on the client side. All operations are performed on the user's device without requiring backend services.\n\n## 🎯 Core Advantages\n\n- 🛡️ **Data Security**: Document processing is completed entirely within the browser, data never leaves the local environment\n- 📄 **Format Compatibility**: Comprehensive support for mainstream office document formats including Word, Excel, PowerPoint, and more\n- 🔄 **Instant Response**: Provides smooth document editing interaction experience\n- 💻 **Zero Deployment Cost**: Client-side architecture, no server setup required\n- ⚡ **Quick Start**: Access the page and use immediately, no additional configuration needed\n- 🌏 **Internationalization**: Built-in multi-language interface with free language switching\n- 🎯 **Multi-Instance Support**: Supports running multiple independent editor instances simultaneously with complete resource isolation\n\n## 📘 User Guide\n\n### Quick Start\n\n1. Visit the [Online Editor](https://mvp-onlyoffice.vercel.app/)\n2. Select editor type:\n   - `/excel/base` - Excel spreadsheet editor\n   - `/docs/base` - Word document editor\n   - `/ppt/base` - PowerPoint presentation editor\n   - `/multi/base` - Multi-instance basic demo (running multiple editors simultaneously)\n   - `/multi/tabs` - Multi-instance Tab demo (with cache management)\n3. Upload local files\n4. Edit document content directly in the browser\n5. Export and save the document after editing\n\n### URL Parameter Configuration\n\n| Parameter | Description              | Values      | Priority |\n| --------- | ------------------------ | ----------- | -------- |\n| `locale`  | Specify interface language | `en`, `zh` | -        |\n\n**Usage Example:**\n\n```bash\n# Set English interface\n?locale=en\n```\n\n## 🔌 API Documentation\n\n### Editor Manager (EditorManager \u0026 EditorManagerFactory)\n\nThe editor manager provides a complete document operation interface, supporting core functions such as creation, destruction, and export. Supports both single-instance and multi-instance modes.\n\n#### Single-Instance Mode (Backward Compatible)\n\n```typescript\nimport { editorManagerFactory } from '@/onlyoffice-comp/lib/editor-manager';\n\n// Get default instance\nconst editorManager = editorManagerFactory.getDefault();\n\n// Check if editor has been created\nconst exists = editorManager.exists();\n\n// Get editor instance\nconst editor = editorManager.get();\n\n// Destroy editor\neditorManager.destroy();\n```\n\n#### Multi-Instance Mode\n\n```typescript\nimport { editorManagerFactory } from '@/onlyoffice-comp/lib/editor-manager';\n\n// Create or get instance with specified container ID\nconst manager1 = editorManagerFactory.create('editor-1');\nconst manager2 = editorManagerFactory.create('editor-2');\n\n// Get instance with specified container ID\nconst manager = editorManagerFactory.get('editor-1');\n\n// Get all instances\nconst allManagers = editorManagerFactory.getAll();\n\n// Destroy specified instance\neditorManagerFactory.destroy('editor-1');\n\n// Destroy all instances\neditorManagerFactory.destroyAll();\n```\n\n#### Document Export\n\nDocument export uses an event-driven mechanism with asynchronous communication through EventBus.\n\n**Export Process:**\n\n1. **Trigger Save**: Call the `editorManager.export()` method\n2. **Wait for Event**: System listens for `saveDocument` event\n3. **Get Data**: Returns document binary data after event is triggered\n\n**Code Example:**\n\n```typescript\n// Single-instance mode\nconst editorManager = editorManagerFactory.getDefault();\nconst result = await editorManager.export();\n// result contains: { fileName, fileType, binData, instanceId, media }\n\n// Multi-instance mode\nconst manager1 = editorManagerFactory.get('editor-1');\nconst result1 = await manager1.export();\n// result1.instanceId will match manager1.getInstanceId()\n\n// Process export data\nconst blob = new Blob([result.binData], {\n  type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'\n});\nconst url = window.URL.createObjectURL(blob);\n// Perform download or other operations\n```\n\n**Multi-Instance Export Mechanism:**\n\nIn multi-instance mode, each `EditorManager` instance's `export()` method automatically filters `SAVE_DOCUMENT` events, only receiving save events belonging to the current instance (matched via `instanceId` field). This ensures that even when multiple instances call `export()` simultaneously, there will be no event confusion or data misalignment.\n\n#### Read-Only Mode Control\n\n```typescript\n// Set to read-only mode\nawait editorManager.setReadOnly(true);\n\n// Switch to editable mode\nawait editorManager.setReadOnly(false);\n\n// Query current mode\nconst isReadOnly = editorManager.getReadOnly();\n```\n\n### Event Bus (EventBus)\n\nThe project uses an event bus mechanism to handle editor state changes and document operation events.\n\n#### Supported Event Types\n\n- `saveDocument` - Document save completion event\n- `documentReady` - Document load ready event\n- `loadingChange` - Loading state change event\n\n#### Event Listening\n\n```typescript\nimport { onlyofficeEventbus } from '@/onlyoffice-comp/lib/eventbus';\nimport { ONLYOFFICE_EVENT_KEYS } from '@/onlyoffice-comp/lib/const';\n\n// Listen for document save event\nonlyofficeEventbus.on(ONLYOFFICE_EVENT_KEYS.SAVE_DOCUMENT, (data) =\u003e {\n  console.log('Document saved:', data);\n});\n\n// Listen for document ready event\nonlyofficeEventbus.on(ONLYOFFICE_EVENT_KEYS.DOCUMENT_READY, (data) =\u003e {\n  console.log('Document ready:', data);\n});\n\n// Remove event listener\nonlyofficeEventbus.off(ONLYOFFICE_EVENT_KEYS.SAVE_DOCUMENT, callback);\n\n// Wait for event trigger (returns Promise)\nconst saveData = await onlyofficeEventbus.waitFor(\n  ONLYOFFICE_EVENT_KEYS.SAVE_DOCUMENT, \n  3000 // Timeout (milliseconds)\n);\n```\n\n### Document Conversion (X2T Converter)\n\nDocument conversion functionality is implemented based on WebAssembly, supporting conversion between multiple formats.\n\n```typescript\nimport { convertBinToDocument, createEditorView } from '@/onlyoffice-comp/lib/x2t';\n\n// Single-instance mode: Create editor view (using default container)\nawait createEditorView({\n  file: fileObject,        // File object (optional)\n  fileName: 'document.xlsx', // File name\n  isNew: false,            // Whether to create new document\n  readOnly: false,        // Whether read-only\n  lang: 'en',             // Interface language\n});\n\n// Multi-instance mode: Create editor view (specify container ID)\nconst manager1 = await createEditorView({\n  file: fileObject,\n  fileName: 'document.xlsx',\n  isNew: false,\n  readOnly: false,\n  lang: 'en',\n  containerId: 'editor-1', // Specify container ID\n});\n\n// Convert document format\nconst result = await convertBinToDocument(\n  binData,      // Binary data\n  fileName,      // File name\n  FILE_TYPE.XLSX, // Target format\n  media         // Media files (optional)\n);\n```\n\n### Data Type Definitions\n\n```typescript\n// Document save data\ntype SaveDocumentData = {\n  fileName: string;      // File name\n  fileType: string;      // File type (e.g., 'xlsx', 'docx')\n  binData: Uint8Array;   // Binary data\n  instanceId: string;    // Instance ID (used for event matching in multi-instance mode)\n  media?: Record\u003cstring, string\u003e; // Media file mapping\n}\n\n// Document ready data\ntype DocumentReadyData = {\n  fileName: string;      // File name\n  fileType: string;      // File type\n}\n```\n\n## 🏗️ Technical Implementation\n\n- **OnlyOffice SDK**: Integrates OnlyOffice official JavaScript SDK, providing core document editing capabilities\n- **WebAssembly**: Uses x2t-wasm module to implement document format conversion functionality\n- **Client-Side Architecture**: All functional modules run in the browser environment without server dependencies\n\n## 🚀 Deployment Options\n\n### Vercel Deployment\n\nThe project is configured for static export and can be deployed directly to Vercel:\n\n```bash\n# Install dependencies\nnpm install\n# or\npnpm install\n\n# Build project\nnpm run build\n\n# Vercel will automatically detect and deploy\n```\n\nAccess URL: https://mvp-onlyoffice.vercel.app/\n\n### Static File Deployment\n\nThe project supports static export, and built files can be deployed to any static hosting service:\n\n```bash\n# Build static files\nnpm run build\n\n# Output directory: out/\n# Can be directly deployed to GitHub Pages, Netlify, Nginx, etc.\n```\n\n### Local Development\n\n```bash\n# Clone repository\ngit clone \u003crepository-url\u003e\ncd mvp-onlyoffice\n\n# Install dependencies\nnpm install\n# or\npnpm install\n\n# Start development server\nnpm run dev\n\n# Access http://localhost:3001\n```\n\n## 🛠️ Build Tools\n\n### File Compression Script (`scripts/minify.js`)\n\nA utility script for compressing files in a folder (excluding WASM files) to reduce bundle size. This script recursively processes directories and compresses JavaScript, HTML, CSS, and other text-based files.\n\n#### Features\n\n- **Multi-format Support**: Compresses `.js`, `.html`, `.mjs`, `.cjs`, `.ts`, `.jsx`, `.tsx`, `.css` files\n- **Smart Compression**:\n  - JavaScript/TypeScript: Uses `terser` for minification (without variable name mangling to avoid breaking code)\n  - CSS: Uses `postcss` + `cssnano` for optimization\n  - HTML: Uses `html-minifier-terser` for minification\n- **Safe Processing**: Automatically falls back to copying original files if compression fails\n- **Detailed Statistics**: Provides comprehensive compression statistics including file counts and size reduction percentages\n- **WASM Files Preserved**: Automatically skips WASM files to prevent corruption\n\n#### Usage\n\n```bash\n# Use default paths (compresses from version 7 to 7-minify)\nnode scripts/minify.js\n\n# Specify custom source and target directories\nnode scripts/minify.js \u003csourceDir\u003e \u003ctargetDir\u003e\n\n# Example: Compress files from one directory to another\nnode scripts/minify.js ./public/packages/onlyoffice/7 ./public/packages/onlyoffice/7-minify\n```\n\n#### Default Paths\n\n- **Source Directory**: `public/packages/onlyoffice/7`\n- **Target Directory**: `public/packages/onlyoffice/7-minify`\n\n#### Compression Configuration\n\n- **JavaScript/TypeScript**: \n  - Removes comments\n  - Preserves console/debugger statements\n  - No variable name mangling (safe for OnlyOffice SDK)\n- **CSS**: \n  - Full CSS optimization via cssnano\n- **HTML**: \n  - Removes comments\n  - Collapses whitespace\n  - Preserves attribute quotes and structure\n\n#### Output\n\nThe script provides real-time progress updates and a final summary including:\n- Total files processed\n- Number of compressed files\n- Number of copied files\n- Original total size\n- Compressed total size\n- Overall size reduction percentage\n\n## 📝 Project Structure\n\n```\nmvp-onlyoffice/\n├── src/\n│   ├── app/              # Next.js application pages\n│   │   ├── excel/\n│   │   │   └── base/     # Excel editor page (/excel/base)\n│   │   ├── docs/\n│   │   │   └── base/     # Word editor page (/docs/base)\n│   │   ├── ppt/\n│   │   │   └── base/     # PowerPoint editor page (/ppt/base)\n│   │   ├── multi/\n│   │   │   ├── base/     # Multi-instance basic demo page (/multi/base)\n│   │   │   └── tabs/     # Multi-instance Tab demo page (/multi/tabs)\n│   │   └── page.tsx      # Home page (redirects to /excel/base)\n│   ├── onlyoffice-comp/  # OnlyOffice component library\n│   │   └── lib/\n│   │       ├── editor-manager.ts  # Editor manager (supports multi-instance)\n│   │       ├── x2t.ts             # Document conversion module\n│   │       ├── eventbus.ts        # Event bus\n│   │       └── ...\n│   └── components/       # Common components\n├── public/               # Static resources\n│   ├── web-apps/         # OnlyOffice Web application resources\n│   ├── sdkjs/            # OnlyOffice SDK resources\n│   └── wasm/             # WebAssembly converter\n└── onlyoffice-x2t-wasm/  # x2t-wasm source code\n```\n\n### Page Route Description\n\n- `/` - Home page, automatically redirects to `/excel/base`\n- `/excel/base` - Excel spreadsheet editor (single-instance mode)\n- `/docs/base` - Word document editor (single-instance mode)\n- `/ppt/base` - PowerPoint presentation editor (single-instance mode)\n- `/multi/base` - Multi-instance basic demo, showcasing multiple independent editor instances running simultaneously\n- `/multi/tabs` - Multi-instance Tab demo, showcasing multi-tab editor implementation with LRU cache management\n\n## 🔤 Font Configuration\n\n### Font File Description\n\nThis project complies with open-source licensing requirements and **does not include** copyrighted commercial font files (such as Arial, Times New Roman, Microsoft YaHei, SimSun, etc.). These font names are still retained in the configuration to ensure document compatibility, but actual font files need to be added by users.\n\n### Adding Font Files\n\nTo add fonts, follow these steps:\n\n1. Check the `public/sdkjs/common/AllFonts.js` file\n2. Find the target font's index number in the `__fonts_files` array\n3. Place the font file in the `public/fonts/` directory\n4. Rename the file to the corresponding index number (no extension needed)\n\n**Example: Adding Arial Font**\n\n- Arial regular font index is `223` → Place file as `public/fonts/223`\n- Arial bold index is `226` → Place file as `public/fonts/226`\n- Arial italic index is `224` → Place file as `public/fonts/224`\n- Arial bold italic index is `225` → Place file as `public/fonts/225`\n\n**Important Note**: Please ensure that the font files used comply with relevant licensing agreements, only use open-source fonts or fonts with proper authorization.\n\n## 📚 Related Resources\n\n- [OnlyOffice API Documentation](https://api.onlyoffice.com/zh-CN/docs/docs-api/usage-api/config/document/) - OnlyOffice official API reference\n- [ranuts/document](https://github.com/ranuts/document) - Reference static resource implementation\n- [OnlyOffice Web Apps](https://github.com/ONLYOFFICE/web-apps) - OnlyOffice web application source code\n- [OnlyOffice SDK](https://github.com/ONLYOFFICE/sdkjs) - OnlyOffice JavaScript SDK\n- [x2t-wasm](https://github.com/cryptpad/onlyoffice-x2t-wasm) - WebAssembly document converter\n\n## 🤝 Contributing\n\nWelcome to submit Issues and Pull Requests to help improve the project!\n\n## 📄 Open Source License\n\nThe project uses an open-source license. For details, please see the [LICENSE](LICENSE) file.\n\n## 📌 Notes\n\n### Browser Compatibility\n\nIt is recommended to use modern browsers (latest versions of Chrome, Firefox, Edge, Safari) for the best experience.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felectroluxcode%2Fmvp-onlyoffice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felectroluxcode%2Fmvp-onlyoffice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felectroluxcode%2Fmvp-onlyoffice/lists"}