Plugins

The viewer is the headless plugins with an interface built on top. Every feature is a plugin: search is the search plugin, the comments panel uses the annotation plugin’s comments. So everything the headless docs say about a plugin is true inside the viewer, with the same names:

• its settings go in plugins, under its name;
• its API is viewer.get(name);
• its hooks work in your own components inside the viewer.

Every plugin#

Settings#

plugins takes each plugin’s settings by its name, exactly as its page lists them under Settings:

{
  plugins: {
    stage: { spread: 'odd', zoom: { mode: 'fit-width' } },
    selection: { color: 'rgb(124 58 237 / 0.3)' },
    actions: { javascript: { enabled: false } },
  },
}

Change them while the viewer runs, and go back to what you set:

viewer.get('stage').updateSettings({ layout: 'horizontal' });
viewer.get('stage').resetSettings();

A few plugins take settings that only the viewer has, such as the standard stamps of plugins.stamp. The feature pages list them: Annotations, Forms & signatures.

In your components#

Your own components inside the viewer can use every headless hook. Install the headless adapter for your framework next to the viewer (@embedpdf/react, @embedpdf/vue, @embedpdf/svelte or @embedpdf/angular, the same version), and use its hooks as the headless docs show them:

<script lang="ts">
  import { useSearch, useSearchState } from '@embedpdf/svelte/search';

  // A search box of your own, in the viewer's header. The functions are the headless ones.
  const search = useSearch();
  const state = useSearchState();
</script>

<form onsubmit={(event) => event.preventDefault()}>
  <input type="search" placeholder="Search" oninput={(event) => search.search({ text: event.currentTarget.value })} />
  {#if state.hitCount > 0}<span>{state.activeHitIndex + 1} of {state.hitCount}</span>{/if}
  <button type="button" onclick={() => search.nextHit()}>Next</button>
</form>

Put HeaderSearch in the viewer’s header region, and it searches the open document. The hooks find the viewer they’re in, and the document that’s active, by themselves.

A plugin of your own#

A plugin you wrote for headless works in the viewer too. Give it a name in plugins:

import { analyticsPlugin } from './analytics-plugin';
 
export const config = {
  plugins: {
    analytics: analyticsPlugin({ endpoint: '/api/events' }),
  },
};

viewer.get('analytics') is then its API, its commands can go in the layout, and your components can use its hooks. See How it works in the headless docs for writing one.

When to build your own interface#

The viewer lets you move, add and replace everything around the pages. Go headless when you need to change what it doesn’t open up:

• the look of its own buttons, menus and panels beyond theming;
• an arrangement that isn’t bars, panels and regions;
• what’s drawn on the pages themselves, such as annotations drawn your own way.

Everything on this page carries over: the same plugins, settings, names and hooks.