Show content-control chrome

Content controls are structured fields stored in a DOCX. Their IDs, aliases, tags, types, and content travel with the document. SuperDoc can draw chrome around those fields so people can recognize and select them in the Editor.

Try content controls

Expand the Editor and click Acme Inc. or the checkbox. The demo reports the control's alias, tag, and type above the document.

Set Built-in chrome to Hide. The outlines disappear, but the fields and their DOCX metadata remain. Clicking a field still reports its metadata.

Changing this startup option reloads the current DOCX. Document edits remain, while the selection and last-clicked status reset.

Show the built-in chrome

Continue with the project from the Quickstart. Download the content-control sample and save it as public/content-controls-sample.docx:

Vite serves that file at /content-controls-sample.docx. Content-control chrome is on by default; this example enables it explicitly and reports the field someone clicks:

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const status = document.querySelector<HTMLOutputElement>('#content-control-status');

const superdoc = new SuperDoc({
  selector: '#editor',
  document: '/content-controls-sample.docx',
  ui: {
    contentControls: true,
  },
  onContentControlClick: ({ target }) => {
    if (!status) return;

    const name = target.alias ?? target.tag ?? target.id;
    status.value = `${name} · tag: ${target.tag ?? 'none'} · type: ${target.controlType}`;
  },
});

window.addEventListener('beforeunload', () => superdoc.destroy());

Vanilla also needs an Editor mount and a status element:

<div id="editor"></div>
<output id="content-control-status" aria-live="polite">Click a content control.</output>

<script type="module" src="/src/main.ts"></script>

Click a control. The status should show the field's alias, tag, and type from onContentControlClick.

Set ui.contentControls: false when your application should hide only SuperDoc's chrome. The content controls remain part of the document, and the click callback continues to work.

Choose the next layer

Use onContentControlClick for behavior tied to one click. Use custom content-control UI for a persistent field list, navigation, or application-owned chrome.

Use the Document API content-controls reference when code needs to list, create, update, or remove content controls.