React

Import components from @a3s-lab/office/react. Keep the content value in the host and pass the complete next value back through state or an application store.

DocumentPage.tsx

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 (
    <div style={{ height: '100vh', minHeight: 0 }}>
      <DocumentEditor
        content={content}
        onChange={setContent}
        theme="light"
      />
    </div>
  );
}

Editor implementations are code-split. Use preloadOfficeEditor(kind) before an anticipated navigation when the host wants to remove the first-open delay.

import { preloadOfficeEditor } from '@a3s-lab/office/react';

<button onPointerEnter={() => void preloadOfficeEditor('spreadsheet')}>
  Open workbook
</button>;

#React

React