EmbedPDF
DocsSvelteViewerCustomizing 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.svelte
<script lang="ts">
  import { PDFViewer } from '@embedpdf/svelte-pdf-viewer';
</script>
 
<PDFViewer 
  config={{
    src: 'https://snippet.embedpdf.com/ebook.pdf',
    disabledCategories: ['annotation', 'print', 'export']
  }}
/>

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.svelte
<script lang="ts">
  import {
    PDFViewer,
    type EmbedPdfContainer,
    type PluginRegistry,
    type CommandsPlugin,
    type UIPlugin,
  } from '@embedpdf/svelte-pdf-viewer';
 
  let container = $state<EmbedPdfContainer | null>(null);
 
  const handleInit = (c: EmbedPdfContainer) => {
    container = 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>
 
<PDFViewer 
  oninit={handleInit} 
  onready={handleReady}
  config={{ src: '/doc.pdf' }} 
/>

Registering Custom Icons

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

<script lang="ts">
  const handleInit = (c: EmbedPdfContainer) => {
    container = c;
 
    // Register during init
    container.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 Components 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