For AI agents: the complete documentation index is available at https://a3s-lab.github.io/Office/docs/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/Office/docs/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/Office/docs/en/components/web-component.md.
A3S Office
Playground
  • English
  • latest

      • Web Component

      Register the elements once, then set structured values as JavaScript properties. Complex values are not serialized through HTML attributes.

      document-editor.ts
      import {
  defineA3SOfficeElements,
} from '@a3s-lab/office/web-component';
import '@a3s-lab/office/styles.css';

defineA3SOfficeElements();

const editor = document.querySelector('a3s-document-editor');

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

editor.addEventListener('change', (event) => {
  editor.content = event.detail;
});

      Use attributes for primitive values such as theme, preview, and save-status. Use element properties for content, callbacks, file actions, extensions, and source loaders.