EmbedPDF
DocsVueViewerCustomizing the UI

Customizing the UI

The PDFViewer component provides ways to customize the user interface—from simple feature toggles to advanced toolbar modifications.

Disabling Features

The easiest way to customize the UI is to disable features you don’t need. Use the disabledCategories config option:

App.vue
<script setup lang="ts">
import { PDFViewer } from '@embedpdf/vue-pdf-viewer';
</script>
 
<template>
  <PDFViewer 
    :config="{
      src: 'https://snippet.embedpdf.com/ebook.pdf',
      disabledCategories: ['annotation', 'print', 'export']
    }"
  />
</template>

Interactive Example

Toggle the checkboxes below to see how categories are disabled in real-time:

Available Categories

Categories are hierarchical—disabling a parent category (e.g., annotation) disables all its children.

GroupCategories
Zoomzoom, zoom-in, zoom-out, zoom-fit-page, zoom-fit-width, zoom-marquee, zoom-level
Annotationannotation, annotation-markup, annotation-highlight, annotation-underline, annotation-strikeout, annotation-squiggly, annotation-ink, annotation-text, annotation-stamp
Shapesannotation-shape, annotation-rectangle, annotation-circle, annotation-line, annotation-arrow, annotation-polygon, annotation-polyline
Redactionredaction, redaction-area, redaction-text, redaction-apply, redaction-clear
Documentdocument, document-open, document-close, document-print, document-export, document-fullscreen
Pagepage, spread, rotate, scroll, navigation
Panelpanel, panel-sidebar, panel-search, panel-comment
Toolstools, pan, pointer, capture
Selectionselection, selection-copy
Historyhistory, history-undo, history-redo

Advanced Customization

For more control over the UI, you can access the viewer instance and modify the toolbar schema directly.

Accessing the Viewer Registry

CustomViewer.vue
<script setup lang="ts">
import { ref } from 'vue';
import {
  PDFViewer,
  type EmbedPdfContainer,
  type PluginRegistry,
  type CommandsPlugin,
  type UIPlugin,
} from '@embedpdf/vue-pdf-viewer';
 
const container = ref<EmbedPdfContainer | null>(null);
 
const handleInit = (c: EmbedPdfContainer) => {
  container.value = c;
};
 
const handleReady = (registry: PluginRegistry) => {
  const commands = registry.getPlugin<CommandsPlugin>('commands')?.provides();
  const ui = registry.getPlugin<UIPlugin>('ui')?.provides();
 
  if (!commands || !ui) return;
 
  // Register a custom command
  commands.registerCommand({
    id: 'custom.hello',
    label: 'Say Hello',
    icon: 'smiley',
    action: () => alert('Hello from my custom button!')
  });
 
  // Add it to the toolbar
  // ... (see below)
};
</script>
 
<template>
  <PDFViewer 
    @init="handleInit" 
    @ready="handleReady"
    :config="{ src: '/doc.pdf' }" 
  />
</template>

Registering Custom Icons

Before using a custom icon, you need to register it:

<script setup lang="ts">
const handleInit = (c: EmbedPdfContainer) => {
  container.value = c;
 
  // Register during init
  container.value.registerIcons({
    smiley: {
      viewBox: '0 0 24 24',
      paths: [
        { d: 'M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0', stroke: 'currentColor', fill: 'none' },
        { d: 'M9 10l.01 0', stroke: 'currentColor', fill: 'none' },
        { d: 'M15 10l.01 0', stroke: 'currentColor', fill: 'none' },
        { d: 'M9.5 15a3.5 3.5 0 0 0 5 0', stroke: 'currentColor', fill: 'none' }
      ]
    }
  });
};
</script>

Modifying the Toolbar

const schema = ui.getSchema();
const toolbar = schema.toolbars['main-toolbar'];
 
// Clone and modify the items
const items = structuredClone(toolbar.items);
const rightGroup = items.find(item => item.id === 'right-group');
 
if (rightGroup) {
  // Add our custom button
  rightGroup.items.push({
    type: 'command-button',
    id: 'smiley-button',
    commandId: 'custom.hello',
    variant: 'icon'
  });
}
 
// Apply the changes
ui.mergeSchema({
  toolbars: { 'main-toolbar': { ...toolbar, items } }
});

Interactive Example

In this example, the comment button is replaced with a smiley 😊, and a star ⭐ is added to the document menu. Click them to see feedback:

Need Complete Control?

If you need to build a completely custom UI from scratch—your own toolbars, layouts, and controls—consider using our Headless Composables instead.

The headless approach gives you:

  • Zero pre-built UI
  • Full access to all plugin APIs
  • Complete freedom to design your own interface
Last updated on December 22, 2025
ThemeAccessing the Engine

Need Help?

Join our community for support, discussions, and to contribute to EmbedPDF's development.

GitHub DiscussionsDiscord CommunitySupport Development