Review colors and styling

Review styling changes presentation only. It does not change the document file.

The same author color applies to tracked changes and comments.

Default behavior

Override ramp tokens under .docx-editor. Load your stylesheet after editor.css, or use a more specific selector.

.docx-editor {
  --doc-review-author-0: #7c3aed;
  --doc-review-author-1: #0e7490;
}

The document filter handles dark mode. Review chrome adjusts separately.

Choose a styling API

Use declarations or setRevisionStyles as the source of style state. Calling setRevisionStyles replaces mounted declarations until a declaration changes.

Declarations do not render Document Object Model (DOM) elements. Mounting, changing, or removing one repaints the editor without resetting selection, caret position, or undo history.

Declare author styles

Place declarations anywhere inside the editor root.

import { DocxEditor } from '@docx-editor.dev/react';
import { reviewModule } from '@docx-editor.dev/pro/react';

const MODULES = [reviewModule()];

<DocxEditor.Root document={bytes} modules={MODULES} author="Jess Lin">
  <DocxEditor.AuthorStyle author="Jess Lin" color="#7c3aed" avatarUrl="/avatars/jess.png" />
  <DocxEditor.ColorByChangeType />
  <DocxEditor.Viewport>
    <DocxEditor.Content />
  </DocxEditor.Viewport>
</DocxEditor.Root>;

<script setup lang="ts">
import {
  DocxEditorAuthorStyle,
  DocxEditorColorByChangeType,
  DocxEditorContent,
  DocxEditorRoot,
  DocxEditorViewport,
} from '@docx-editor.dev/vue';
import { reviewModule } from '@docx-editor.dev/pro/vue';

defineProps<{ bytes: Uint8Array }>();
const modules = [reviewModule()];
</script>

<template>
  <DocxEditorRoot :document="bytes" :modules="modules" author="Jess Lin">
    <DocxEditorAuthorStyle author="Jess Lin" color="#7c3aed" avatar-url="/avatars/jess.png" />
    <DocxEditorColorByChangeType />
    <DocxEditorViewport>
      <DocxEditorContent />
    </DocxEditorViewport>
  </DocxEditorRoot>
</template>

author must match the document's w:author value. An absent author has no effect. Unmatched authors keep ramp colors unless ColorByChangeType is mounted.

Keep span CSS metric-safe. Do not change font size, weight, or family. Such changes make painted text differ from measured layout.

Set styles through the editor

setRevisionStyles and the editor creation option accept a RevisionStyles value. Declarative components accept individual author or change-type props. Set others to 'author', the default, or 'kind' in RevisionStyles.

editor.setRevisionStyles({
  others: 'kind',
  authors: {
    'Jess Lin': '#7c3aed',
    'Sam Reyes': { color: '#0e7490', avatarUrl: '/avatars/sam.png' },
  },
});

An author value can be a color string or an author style object. A headless host can also pass revisionStyles during editor creation.

Read document authors

Use useReviewAuthors() to build legends and color controls. Use getReviewAuthors() without an adapter.

React returns the list directly. Vue returns a shallow ref. Call the composable under DocxEditorRoot.

Add .docx-editor to a legend or its ancestor. This class resolves ramp token values used by swatches.

Add avatars

Set avatarUrl to replace initials in a review card. Authors without an avatar keep their initials.

Use a host you control. The editor accepts application-held blob: URLs and non-SVG data:image/* URLs. It rejects other data: URLs, SVG data images, script schemes, and protocol-relative hosts.

The browser fetches an avatar when its card renders. The editor never loads an avatar address from the document.

Document authors are untrusted strings. A sender can use a known name and receive its configured image. Do not use review styling as identity proof.

Use CSS hooks

data-review-author contains the exact document value. data-review-author-slot wraps to 0 through 7. Calculate it as slot % 8 when you build selectors from useReviewAuthors().

Painted spans use an inline ink color. CSS cannot override that color or its text decoration. Use a declaration or ramp token for ink. Use currentColor for metric-safe span effects.

.docx-editor [data-review-author='Jess Lin'] {
  outline: 1px dotted currentColor;
  outline-offset: 1px;
}

.docx-editor .docx-comment-band {
  background: color-mix(
    in srgb,
    var(--doc-review-author-current, var(--doc-comment-bg)) 22%,
    transparent
  );
}

--doc-review-author-current contains the light-theme value in both themes. Define a dark-theme rule when you tint comment bands by author.

Build custom review cards

useReviewAuthor returns one author's resolved color, ramp slot, and declared style. React returns the value directly. The Vue composable accepts a ref or getter and returns a computed ref.

The DocxEditorReview.List callback or Vue #item slot receives each item and its author. Use that value to select a custom card. For composition patterns, see React composition or Vue composition.

Next steps

• Tracked changes: Record and resolve revisions.
• Comments: Add discussion threads.