Examples
Basic (no document)
Minimal editor container with no collaboraUrl or
wopiSrc configured. The empty state is shown because there is nothing to load.
No document loaded
Text document (Welcome.odt)
Editor loaded with a real .odt file served by the integration-tests WOPI host. Requires a
running Collabora Online server (see scripts/run-collabora.sh).
No document loaded
Spreadsheet (Budget.ods)
Editor loaded with a real .ods spreadsheet.
No document loaded
Presentation (Quarterly Slides.odp)
Editor loaded with a real .odp presentation.
No document loaded
With toolbar
Editor with a PatternFly-styled toolbar providing Save, Print, Download, and Fullscreen actions. The toolbar integrates with the editor via Alpine.js methods.
No document loaded
Read-only viewer
Editor configured in read-only mode for document viewing without editing capabilities.
No document loaded
With status bar
Editor with both a toolbar and a status bar showing connection state and saving indicator.
No document loaded
Documentation
Document editor props
Parameters accepted by {#include components/editors/document-editor /}. The content
slot renders a toolbar area above the frame; an optional {#footer} slot renders a
status bar below it.
| Name | Type | Default | Description |
|---|---|---|---|
id
|
String | — | DOM id on the root; omit unless something else references the editor. |
collaboraUrl
|
String (URL) | — | Base URL of the Collabora Online server. |
wopiSrc
|
String (URL) | — | WOPI file endpoint identifying the document to load. |
accessToken
|
String | — | WOPI access token passed to the editing session. |
fileName
|
String | — | Display name exposed to the Alpine scope (used by toolbar titles). |
readOnly / lang /
height
|
String | — | View-only mode, UI language, and a fixed frame height. |
Usage
Needs a Collabora server. The examples with documents talk to the integration-tests WOPI host and
show their empty/error state unless a Collabora Online server is running — start one locally with
scripts/run-collabora.sh. The Alpine scope exposes save(),
print(), download(),
fullscreen() and the connected/loaded/saving
state used by the toolbar and status-bar examples.