Viewer UI Component
Relevant source files
The following files were used as context for generating this wiki page:
The Viewer UI Component is the primary interface for OpenHWP, an open-source HWP/HWPX desktop application. Its purpose is to provide a cross-platform environment for opening and viewing Korean document formats on macOS, Windows, and Linux without requiring Hancom Office. The component is designed as a "thin platform shell" that leverages a decoupled document engine for high-fidelity rendering.
Sources: README.en.md:3-8, README.md:3-8
Architecture and Platform Shell
The Viewer UI is built using the Deno desktop runtime. It operates by serving content via a local Deno.serve() instance which is then displayed within a native window's webview. To ensure consistent rendering across different operating systems, the project utilizes the Chromium Embedded Framework (CEF) as the rendering backend.
Technical Stack Components
| Layer | Technology | Purpose |
|---|---|---|
| Desktop Shell | deno desktop | Native window management and application lifecycle. |
| Rendering Backend | CEF (Chromium) | Standardized web API support and identical cross-platform rendering. |
| Logic Runtime | Deno (>= 2.9.0) | Execution environment for the application's TypeScript/JavaScript code. |
| Inter-process | Deno Desktop Bindings | Communication between the Deno runtime and native OS menus/windows. |
Sources: README.en.md:10-15, README.md:10-15, CONTRIBUTING.md:12-14
Data Flow Overview
The following diagram illustrates the relationship between the Deno desktop shell, the local server, and the Chromium-based UI.
Sources: README.en.md:12-15, README.md:12-15
Document Engine Integration
The Viewer UI component does not contain the logic for parsing document formats. Instead, it delegates all document-specific concerns to the rhwp engine, which is loaded as a WebAssembly (WASM) module via npm packages.
@rhwp/core for Viewing
The core viewing functionality relies on the @rhwp/core package. It provides the HwpDocument class, which takes document bytes and converts them into SVG elements for display in the viewer container.
import init, { HwpDocument } from "@rhwp/core";
// Initialize the WASM engine
await init();
// Create document instance from bytes
const doc = new HwpDocument(bytes);
// Render a specific page as SVG into the UI
document.querySelector("#viewer").innerHTML = doc.renderPageSvg(0);
Sources: README.en.md:18-26, README.md:18-26
File Access Logic
Because the application runs in a secure context (localhost) within a Chromium-based backend, it utilizes the standard File System Access API for file operations. This avoids the need for Deno-specific native file picker implementations.
Sources: README.en.md:31-48, README.md:31-48
Roadmap and Future Capabilities
The Viewer UI is the first phase of the OpenHWP roadmap. Future iterations will expand the UI component's responsibilities:
- Editor Integration: Embedding the
@rhwp/editorvia an iframe to support interactive document modification. - Native Menus: Implementing native OS menus and multi-window support through Deno desktop bindings.
- Export & Print: Utilizing the webview print path and rhwp-based PDF export features.
Sources: README.en.md:61-68, README.md:61-68
Development and Deployment
The Viewer component is managed through a single Deno toolchain. Developers use deno task dev to launch the UI during development. For distribution, the component is bundled into a standalone binary using the CEF backend to maintain UI consistency.
# Build a standalone binary with the Chromium (CEF) backend
deno desktop main.ts --backend cef
Sources: README.en.md:54-58, CONTRIBUTING.md:12-25, orca.yaml:15-18
Summary
The Viewer UI Component serves as a lightweight, Chromium-based shell for the rhwp document engine. By leveraging Deno desktop and the File System Access API, it provides a modern, web-standard approach to viewing legacy HWP/HWPX documents across all major desktop operating systems.