#Getting started

Install the library and import its shared stylesheet once in the host application.

bun add @a3s-lab/office

import { useState } from 'react';
import type { DocumentContent } from '@a3s-lab/office/core';
import { DocumentEditor } from '@a3s-lab/office/react';
import '@a3s-lab/office/styles.css';

const initialContent: DocumentContent = {
  type: 'document',
  html: '<h1>Project brief</h1><p>Start editing here.</p>',
  pageSize: 'a4',
};

export function DocumentPage() {
  const [content, setContent] = useState(initialContent);

  return (
    <main style={{ height: '100vh', minHeight: 0 }}>
      <DocumentEditor content={content} onChange={setContent} />
    </main>
  );
}

#Controlled content

Every editable component is controlled. The editor emits a complete typed content value through onChange; the host owns persistence, collaboration, versioning, and the value passed back into the component.

Do not persist rendered DOM as the primary file model. Keep the structured content returned by the editor, and use the package import/export APIs at file boundaries.

#Cancellable file imports

importOfficeFile accepts an AbortSignal and reports monotonic progress for every supported browser import. The four stages are reading, parsing, analyzing, and finalizing; both stageProgress and the overall progress are normalized from 0 to 1.

import {
  importOfficeFile,
  type OfficeFileImportProgress,
} from '@a3s-lab/office/core';

const controller = new AbortController();

const pending = importOfficeFile(file, {
  signal: controller.signal,
  onProgress(progress: OfficeFileImportProgress) {
    renderImportProgress(progress.stage, progress.progress);
  },
});

// Connect this to the import surface's Cancel action.
cancelButton.addEventListener('click', () => controller.abort(), { once: true });

const artifact = await pending;

Cancellation rejects with an error whose name is AbortError. A large file is read in bounded chunks, and parsers yield at stable checkpoints so the host can paint progress and process cancellation. Starting another import should abort the previous controller and ignore progress from the superseded request.

#Package entry points

#Host layout

Editors fill their host. Give the host a definite height and allow nested flex or grid children to shrink with min-height: 0 and min-width: 0.

.office-editor-host {
  width: 100%;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
}

Continue with the framework bindings or open the DocumentEditor API.