CEF Rendering Backend
Relevant source files
The following files were used as context for generating this wiki page:
The CEF (Chromium Embedded Framework) Rendering Backend serves as the foundational display technology for OpenHWP. By utilizing Chromium as the underlying engine, OpenHWP ensures that HWP and HWPX document rendering remains identical across all supported operating systems, including macOS, Windows, and Linux.
This backend is integrated through the Deno desktop runtime, providing a consistent web-standard environment. It allows the application to leverage modern web APIs and ensures that the complex SVG outputs generated by the rhwp document engine are rendered with high fidelity.
Sources: README.en.md:14-16, README.md:14-16
Architecture and Integration
The CEF backend is a critical component of the "platform shell" in OpenHWP's architecture. While the document engine handles parsing and logic, the CEF backend is responsible for the visual presentation and interaction layer.
Core Components
| Component | Description |
|---|---|
| Deno Desktop | The runtime environment that manages the native window and serves the application. |
| Chromium (CEF) | The rendering engine that displays the UI and document content. |
| Localhost Server | A secure context provided by Deno.serve() where the application is hosted. |
Sources: README.en.md:12-16, README.md:12-16
System Workflow
The following diagram illustrates how the CEF backend interacts with the Deno runtime and the document engine to render a file.
The CEF backend is explicitly enabled by setting the "backend": "cef" configuration within the project's deno.json file. This configuration ensures that the Deno desktop shell uses Chromium rather than the default system webview, which might vary by platform.
Sources: README.en.md:15, README.md:15
Modern Web API Support
A primary advantage of using the CEF Rendering Backend is the enablement of modern web APIs that are standardized within Chromium. This simplifies the application's architecture by removing the need for native bindings for common tasks.
File System Access API
Because the CEF backend provides a secure context via localhost, OpenHWP can use the standard File System Access API directly within the webview. This allows for native-like file picking and saving without requiring Deno to implement its own native file picker API.
// Example of using standard Web APIs enabled by the CEF backend
const [handle] = await window.showOpenFilePicker({
types: [{ accept: { "application/octet-stream": [".hwp", ".hwpx"] } }],
});
const file = await handle.getFile();
Sources: README.en.md:28-36, README.md:30-38
Rendering Pipeline
The CEF backend facilitates a specific data flow for document viewing:
- Byte Retrieval: Files are read into memory using the File System Access API.
- Engine Processing: The
rhwpengine (WASM) processes the bytes. - UI Updates: The engine produces SVG content which is injected into the DOM.
- Display: The Chromium-based backend renders the SVG with consistent layout across platforms.
Sources: README.en.md:20-25, README.md:22-27
Build and Development Commands
The CEF backend can be specified during the build process to produce standalone binaries that bundle the Chromium engine.
| Task | Command |
|---|---|
| Development | deno task dev |
| Build (CEF) | deno desktop main.ts --backend cef |
| Packaging | deno desktop main.ts |
Sources: README.en.md:46-52, README.md:48-54, CONTRIBUTING.md:14-16
Summary
The CEF Rendering Backend provides OpenHWP with a stable, cross-platform environment for document visualization. By decoupling the rendering engine from the host OS's default webview, the project achieves visual consistency and access to powerful web standards like the File System Access API, which are essential for the roadmap's viewer and editor milestones.
Sources: README.en.md:55-60, README.md:57-62