TPTruPDF

UI presets

Five built-in modularConfig values pick from common layouts. Override with a custom ModularConfig JSON object for full control.

Built-in presets

Preset valueLayout
'default-ui'Horizontal top toolbar, left dock (thumbnails + comments), right rail (style + comments)
'alternate-ui'Vertical left toolbar, right-side panel layout
'vertical-headers'Horizontal ribbon stacked vertically on the left
'no-ribbons'Minimal toolbar, modular buttons only
'ribbons-with-icons'Large icon ribbons with compact text labels
<DocViewer source="…" modularConfig="alternate-ui" licenseManager={license} />

'default-ui' is the default. The legacy literal 'default' is still accepted but deprecated — it maps to 'default-ui'; new code should say 'default-ui'.

Preset helpers

import { buildUIPresetConfig, isBuiltInUIPreset, BUILT_IN_UI_PRESETS } from '@trupdf/core';
 
BUILT_IN_UI_PRESETS;
// ['default-ui', 'alternate-ui', 'vertical-headers', 'no-ribbons', 'ribbons-with-icons']
 
isBuiltInUIPreset('alternate-ui'); // true
 
// Resolve a preset into its ModularConfig to tweak programmatically:
const config = buildUIPresetConfig('no-ribbons');

Custom ModularConfig

A ModularConfig is a nested JSON object with:

  • modularComponents — the registry of available components, keyed by id. Component types: presetButton, toolButton, toggleButton, divider, groupedItems, ribbonItem, ribbonGroup, viewControls, zoom, pageControls.
  • modularHeaders — positioned containers (placement: 'top' | 'bottom' | 'left' | 'right') whose items arrays reference component ids.
  • panels (optional) — docked panels (thumbnailsPanel, notesPanel, tab-panel lists).
  • flyouts (optional) — popover menus.
  • popups (optional) — annotation / text / context-menu popups.

The field names match the legacy WebViewer's modular-UI schema 1:1, so existing customer JSON pastes in unmodified.

<DocViewer
  source="…"
  licenseManager={license}
  modularConfig={{
    modularHeaders: {
      'default-top-header': {
        placement: 'top',
        items: ['mainMenu', 'pageControls', 'searchToggle', 'printButton', 'highlightTool'],
      },
    },
    modularComponents: {
      mainMenu: { type: 'toggleButton', toggleElement: 'MainMenuFlyout', icon: 'Menu' },
      pageControls: { type: 'pageControls' },
      searchToggle: { type: 'toggleButton', toggleElement: 'searchPanel', icon: 'Search' },
      printButton: { type: 'presetButton', buttonType: 'printButton' },
      highlightTool: { type: 'toolButton', toolName: 'AnnotationCreateTextHighlight' },
    },
  }}
/>

toolButton accepts legacy tool names (AnnotationCreateTextHighlight, AnnotationCreateRectangle, …) — unknown tools render disabled with a one-time console warning instead of breaking the layout.

Hide built-in actions

Omit them from the items array of a header. The button is not registered, no event listener attached, no DOM emitted.

Custom preset buttons

New presetButton types come from plugins — declare them under presets and reference the buttonType from any config:

const sdk = new TruPDFSDK({
  plugins: [
    {
      id: 'compact-review',
      presets: [
        {
          buttonType: 'markReviewedButton',
          label: 'Mark reviewed',
          icon: 'Check',
          onActivate: ({ events }) =>
            events.emit('plugin.toolbar.action', { id: 'mark-reviewed' }),
        },
      ],
    },
  ],
});

See Plugins.

Where the configs live

The five built-in preset JSONs are served by this site under /ui-configurations/ — default-ui.json, alternate-ui.json, vertical-headers.json, no-ribbons.json, ribbons-with-icons.json. To fork a preset, download one, tweak it, then pass the parsed object as modularConfig.

See also