OpenWord is a professional, high-fidelity, client-side word processor built with React, TypeScript, and Tiptap. It simulates a premium Microsoft Word desktop interface directly in your browser, featuring virtual pagination, dynamic margins, a responsive floating ribbon menu, auto-saving, and dark mode support.
- ⚡ Launch the App Live: You can use the fully featured word processor directly in your browser with zero setup: Use OpenWord Live on GitHub Pages.
- 💻 Download & Customize: The project is 100% open-source. You can clone the repository, run it locally, adapt the components, or host it yourself under your own domain.
Unlike standard cloud word processors, OpenWord is an offline-first, zero-server application.
- Privacy-First: Your documents are never uploaded to any external server. All text processing, imports, database updates, and document compilation occur directly in your browser sandbox.
- No Accounts Needed: Start drafting immediately. Your workspace recovers itself automatically on restart using client-side IndexedDB persistence.
- Virtual A4/Letter Pagination: Visual page breaks that automatically calculate paragraph and node heights in real-time, inserting clean page lines exactly like a physical layout.
- Zoom-Scaled Margin Ruler: Drag-and-drop margin handles to adjust left and right margins dynamically. The cursor tracking scales mathematically to match your current document zoom level.
- Dynamic Headers & Footers: Set customized running header and footer text zones that automatically overlay relative to page margins.
- Auto-Collapsing Ribbon: An interactive ribbon toolbar matching Microsoft Word's layout. It collapses into tabs automatically to maximize vertical reading space and slides open on hover.
- Direct Title Bar Renaming: Edit the document filename directly inside the Windows-styled Title Bar input.
- Sidebar Navigation Outline: Auto-updating outline list based on heading tags to navigate large documents quickly.
- Aesthetic Theme Selector: Seamless light-to-dark canvas transition via the bottom Status Bar.
- Zero-Server Offline Collaboration: Connects directly to a local Ollama instance running Gemma, Llama, Qwen, or other models to assist with drafting, rewriting, and expanding.
- Dual Document-Editing Modes:
- Direct Edit Mode (Real-Time): Streams AI edits directly into the document editor in real-time using a cursor-stable block shifter.
- Proposal Mode (Visual Diff): Streams changes to a sidebar visual diff card (rendered with green/red additions/deletions), allowing you to review edits and click Accept & Apply or Reject before mutating the document.
- Robust XML Tool Actions: Parses structural document actions (
<edit_block>,<insert_block>,<delete_block>) dynamically, supporting arbitrary attribute order, spacing, and quote styles. - Hardware and OS Profiler: Detects GPU VRAM and OS details at startup to recommend the most optimal model size (e.g., Gemma 2B for lighter GPUs).
- Speculative MTP Decoding Toggle: Activates speculative token predictions to accelerate output text stream speeds.
- IndexedDB Autosave: Background saving to IndexedDB (v2) with an automatic session recovery dialog on startup.
- Zero-Server Exports: Export documents directly to Microsoft Word
.docxformat using client-side XML packaging. - Mammoth HTML Importer: Import local document formats directly into the editor canvas.
OpenWord is designed to decouple Tiptap's rich-text events from our React rendering context for fluid editing performance:
+----------------------------------+
| Tiptap/ProseMirror |
+----------------------------------+
|
(onUpdate Event / JSON)
v
+----------------------------------+
| React DocumentContext State |
+----------------------------------+
/ \
(Debounced 5s Autosave) (Debounced 150ms Break)
/ \
v v
+-------------------------------+ +-------------------------------+
| IndexedDB Storage | | Virtual Pagination Extension |
| (Recoverable Session) | | (DOM Height Measure) |
+-------------------------------+ +-------------------------------+
├── public/ # Static assets (Favicons, screenshots)
├── src/
│ ├── assets/ # Brand logos and SVGs
│ ├── components/ # Workspace UI layout blocks
│ │ ├── Editor/ # Custom extensions and pagination logic
│ │ ├── Ribbon/ # Toolbar operations (Font, spacing, view)
│ │ ├── Ruler/ # Interactive margin ruler
│ │ ├── Sidebar/ # Document navigation outline
│ │ └── StatusBar/ # Page counter, layout toggles, theme switcher
│ ├── context/ # Global Document layout & editing state
│ ├── styles/ # Harmony CSS variables & dark theme tokens
│ ├── utils/ # Exporters, DB helpers, and file system handlers
│ ├── App.tsx # Application shell
│ └── main.tsx # App bootstrapping
├── package.json # Deployment scripts and dependencies
└── vite.config.ts # Vite build config & subpath routing
Make sure you have Node.js installed.
-
Clone the repository:
git clone https://github.com/RorriMaesu/OpenWord.git cd OpenWord -
Install dependencies:
npm install
-
Start local development server:
npm run dev
Open
http://localhost:5173in your browser.
npm run build- Custom margin presets (Narrow, Moderate, Wide).
- Full Page-Break rendering inside document export (
.docxparser compatibility). - Custom page dimensions selector (Letter, Legal, Executive, A4).
- Advanced keyboard shortcuts helper card.
This project is licensed under the MIT License - see the LICENSE file for details.