Stamps

A stamp is artwork you place on a page: “Approved”, a company seal, a signature. The stamp plugin keeps stamps in libraries, arms one for a click, and writes the placed stamp the way Acrobat does, so it’s the same stamp there.

Register stampPlugin() next to annotationPlugin(), and use useStamp(). The example imports the standard library, lists its stamps and arms one: hover a page to see where it lands, and click to place it:

Loading live preview…

<script setup lang="ts">
import { DocumentGate, Viewer } from '@embedpdf/vue/runtime';
import type { OpenInput } from '@embedpdf/vue/runtime';
import { Stage, stagePlugin } from '@embedpdf/vue/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/vue/render';
import { interactionPlugin } from '@embedpdf/vue/interaction';
import { AnnotationLayer, annotationPlugin } from '@embedpdf/vue/annotation';
import { stampPlugin } from '@embedpdf/vue/stamp';
import { localEngine } from '@embedpdf/engine';
import StampPicker from './StampPicker.vue';

import '../basic.css';

const engine = localEngine();
const assetEngine = engine; // stamp libraries are PDFs; they open here too
const plugins = [
  stagePlugin(),
  renderPlugin(),
  interactionPlugin(),
  annotationPlugin(),
  stampPlugin({ assetEngine }),
];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};
</script>

<template>
  <Viewer :engine="engine" :plugins="plugins" :initial-documents="[{ source: ebook }]">
    <DocumentGate>
      <template #fallback><p class="loading">Loading…</p></template>
      <StampPicker />
      <Stage class="stage">
        <template #page>
          <RenderLayer />
          <AnnotationLayer />
        </template>
      </Stage>
    </DocumentGate>
  </Viewer>
</template>

const { library } = await stamp.importLibrary(await loadDefaultLibrary('en'));
await stamp.armAsset(assetId); // the next click places it

A library names itself. A library is a PDF: its title is the library’s name, and its named pages are the stamps. An Acrobat stamp file imports as it is.
Libraries are shared, placing is per document. Every open document sees the same libraries. Arming and placing act on the document your component is in, like every other composable.
The preview stays sharp. A vector stamp is drawn for the size it’s shown at, so a big stamp at 300% is as crisp as the placed one.

A library is a PDF#

Every library is one PDF, the kind Acrobat uses for its own stamp files:

the document’s title is the library’s name;
the named pages are the stamps, as identifier=label pairs such as Approved=Goedgekeurd;
each page is one stamp’s artwork, vector or image.

The identifier is the stamp’s lasting identity, and the placed annotation’s name. The label is what a picker shows. Two libraries can share identifiers: a Dutch and an English “Approved” are the same stamp with different labels.

// Any PDF becomes a library. A plain PDF gives one stamp per page.
const { library } = await stamp.importLibrary(bytes);
 
// The library as the PDF it is: drop it into Acrobat's stamps folder
const pdf = await stamp.exportLibrary(library.id);
 
// Add a stamp: a one-page PDF (vector) or a PNG or JPEG
const { asset } = await stamp.createAsset({ libraryId: library.id, label: 'Paid', source: pngBytes });
 
// Rename it; the identifier never changes
await stamp.updateAsset(asset.id, { label: 'PAID' });

Show a stamp picker#

A button per stamp arms it, and each button shows the stamp’s preview:

picker.vue

<script setup lang="ts">
import { useStamp, useStampAssets } from '@embedpdf/vue/stamp';

import StampPreview from './preview.vue';

const { libraryId } = defineProps<{ libraryId: string }>();

const stamp = useStamp();
const assets = useStampAssets(() => ({ libraryId }));
</script>

<template>
  <button v-for="asset in assets" :key="asset.id" @click="stamp.armAsset(asset.id)">
    <StampPreview :asset-id="asset.id" />
    {{ asset.label }}
  </button>
</template>

preview.vue

<script setup lang="ts">
import { useStampAssetPreviewUrl } from '@embedpdf/vue/stamp';

const { assetId } = defineProps<{ assetId: string }>();

const url = useStampAssetPreviewUrl(() => assetId);
</script>

<template>
  <img v-if="url" :src="url" alt="" />
</template>

useStampLibraries() lists the libraries, and useStampAssets({ libraryId }) the stamps in one. Both update when stamps are added, renamed or removed. useStampState().armedAsset is the armed stamp, to show which button is on.

Library kinds#

A library says what it holds: kind is 'stamps' (the default), 'signatures' (a person’s marks; see Signatures), or a name of your own:

await stamp.createLibrary('Review marks', { kind: 'review' });
await stamp.importLibrary(bytes, { libraryKind: 'legal-seals' }); // override what the file says

A picker asks for the kinds it shows:

library-kinds.vue

<script setup lang="ts">
import { useStampLibraries } from '@embedpdf/vue/stamp';

const libraries = useStampLibraries({ kind: ['stamps', 'legal-seals'] });
</script>

<template>
  <ul>
    <li v-for="library in libraries" :key="library.id">{{ library.name }}</li>
  </ul>
</template>

Draw or type a stamp#

A stamp can be drawn, typed, an image, or a page of a PDF. Pass a mark instead of source:

await stamp.createAsset({ libraryId, label: 'Signature', mark: { kind: 'ink', strokes, strokeWidth: 2.5 } });
await stamp.createAsset({ libraryId, label: 'Initials', mark: { kind: 'text', text: 'AL', fontFamily: 'times-italic' } });
await stamp.createAsset({ libraryId, label: 'Logo', mark: { kind: 'image', source: pngBytes } });
await stamp.createAsset({ libraryId, label: 'Seal', mark: { kind: 'pdf', source: pdfBytes, pageIndex: 2 } });

Ink and text are drawn by the engine as vector artwork, exactly as a placed annotation would show. The example makes a drawn signature and typed initials; type more, and place them:

Loading live preview…

<script setup lang="ts">
import { DocumentGate, Viewer } from '@embedpdf/vue/runtime';
import type { OpenInput } from '@embedpdf/vue/runtime';
import { Stage, stagePlugin } from '@embedpdf/vue/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/vue/render';
import { interactionPlugin } from '@embedpdf/vue/interaction';
import { AnnotationLayer, annotationPlugin } from '@embedpdf/vue/annotation';
import { stampPlugin } from '@embedpdf/vue/stamp';
import { localEngine } from '@embedpdf/engine';
import Marks from './Marks.vue';

import '../marks.css';

const engine = localEngine();
const assetEngine = engine; // stamp libraries are PDFs; they open here too
const plugins = [
  stagePlugin(),
  renderPlugin(),
  interactionPlugin(),
  annotationPlugin(),
  stampPlugin({ assetEngine }),
];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};
</script>

<template>
  <Viewer :engine="engine" :plugins="plugins" :initial-documents="[{ source: ebook }]">
    <DocumentGate>
      <template #fallback><p class="loading">Loading…</p></template>
      <Marks />
      <Stage class="stage">
        <template #page>
          <RenderLayer />
          <AnnotationLayer />
        </template>
      </Stage>
    </DocumentGate>
  </Viewer>
</template>

Place a stamp with code#

A click after armAsset() and a call to placeAsset() make the same annotation from the same inputs:

Loading live preview…

<script setup lang="ts">
import { DocumentGate, Viewer } from '@embedpdf/vue/runtime';
import type { OpenInput } from '@embedpdf/vue/runtime';
import { Stage, stagePlugin } from '@embedpdf/vue/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/vue/render';
import { interactionPlugin } from '@embedpdf/vue/interaction';
import { AnnotationLayer, annotationPlugin } from '@embedpdf/vue/annotation';
import { stampPlugin } from '@embedpdf/vue/stamp';
import { localEngine } from '@embedpdf/engine';
import PlaceStamps from './PlaceStamps.vue';

import '../programmatic.css';

const engine = localEngine();
const assetEngine = engine; // stamp libraries are PDFs; they open here too
const plugins = [
  stagePlugin(),
  renderPlugin(),
  interactionPlugin(),
  annotationPlugin(),
  stampPlugin({ assetEngine }),
];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};
</script>

<template>
  <Viewer :engine="engine" :plugins="plugins" :initial-documents="[{ source: ebook }]">
    <DocumentGate>
      <template #fallback><p class="loading">Loading…</p></template>
      <PlaceStamps />
      <Stage class="stage">
        <template #page>
          <RenderLayer />
          <AnnotationLayer />
        </template>
      </Stage>
    </DocumentGate>
  </Viewer>
</template>

const { annotation } = await stamp.placeAsset(assetId, {
  page: page.ref,
  center: { x: 120, y: 90 }, // where the stamp's middle goes, in page coordinates
  targetWidth: 160, // optional: the stamp's own size by default
  rotation: 0, // optional: degrees clockwise
});
 
// The same stamp on several pages, such as "DRAFT" on every page
await stamp.placeAssetOnPages(assetId, 'all', { center: { x: 300, y: 400 } });

The box keeps the stamp’s proportions and stays on the page. The placed annotation carries the stamp’s identifier as its name. A placement from code is selected only when you ask, with select: true, like any annotation you create.

Make a stamp from annotations#

Select annotations on a page and turn them into a stamp. They become one stamp exactly as they look on the page, vector and all:

Loading live preview…

<script setup lang="ts">
import { DocumentGate, Viewer } from '@embedpdf/vue/runtime';
import type { OpenInput } from '@embedpdf/vue/runtime';
import { Stage, stagePlugin } from '@embedpdf/vue/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/vue/render';
import { interactionPlugin } from '@embedpdf/vue/interaction';
import { AnnotationLayer, annotationPlugin } from '@embedpdf/vue/annotation';
import { stampPlugin } from '@embedpdf/vue/stamp';
import { localEngine } from '@embedpdf/engine';
import DrawSeal from './DrawSeal.vue';
import MakeStamp from './MakeStamp.vue';

import '../from-selection.css';

const engine = localEngine();
const assetEngine = engine; // stamp libraries are PDFs; they open here too
const plugins = [
  stagePlugin(),
  renderPlugin(),
  interactionPlugin(),
  annotationPlugin(),
  stampPlugin({ assetEngine }),
];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};
</script>

<template>
  <Viewer :engine="engine" :plugins="plugins" :initial-documents="[{ source: ebook }]">
    <DocumentGate>
      <template #fallback><p class="loading">Loading…</p></template>
      <DrawSeal />
      <MakeStamp />
      <Stage class="stage">
        <template #page>
          <RenderLayer />
          <AnnotationLayer />
        </template>
      </Stage>
    </DocumentGate>
  </Viewer>
</template>

const { asset } = await stamp.createAssetFromAnnotations(page.ref, refs, {
  libraryId, // omit to create a library named after the label
  label: 'Custom stamp 1',
});

It’s all or nothing: a hidden annotation, one without an appearance, or one on another page fails the whole call.

Keep libraries between sessions#

The plugin tells you when a library changes and gives you its bytes; where you store them is up to you. persistStampLibraries and restoreStampLibraries connect a library to a store:

Loading live preview…

<script setup lang="ts">
import { DocumentGate, Viewer } from '@embedpdf/vue/runtime';
import type { OpenInput } from '@embedpdf/vue/runtime';
import { Stage, stagePlugin } from '@embedpdf/vue/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/vue/render';
import { interactionPlugin } from '@embedpdf/vue/interaction';
import { AnnotationLayer, annotationPlugin } from '@embedpdf/vue/annotation';
import { stampPlugin } from '@embedpdf/vue/stamp';
import { localEngine } from '@embedpdf/engine';
import Libraries from './Libraries.vue';

import '../persist.css';

const engine = localEngine();
const assetEngine = engine; // stamp libraries are PDFs; they open here too
const plugins = [
  stagePlugin(),
  renderPlugin(),
  interactionPlugin(),
  annotationPlugin(),
  stampPlugin({ assetEngine }),
];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};
</script>

<template>
  <Viewer :engine="engine" :plugins="plugins" :initial-documents="[{ source: ebook }]">
    <DocumentGate>
      <template #fallback><p class="loading">Loading…</p></template>
      <Libraries />
      <Stage class="stage">
        <template #page>
          <RenderLayer />
          <AnnotationLayer />
        </template>
      </Stage>
    </DocumentGate>
  </Viewer>
</template>

persist.vue

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import {
  indexedDbByteStore,
  persistStampLibraries,
  restoreStampLibraries,
  useStamp,
  useStampLibraries,
} from '@embedpdf/vue/stamp';

const store = indexedDbByteStore('stamps');
const stamp = useStamp();
const libraries = useStampLibraries();

let stop: (() => void) | undefined;

onMounted(() => {
  void restoreStampLibraries(stamp, store); // import every stored library
  stop = persistStampLibraries(stamp, store, { except: ['embedpdf-standard'] });
});
onUnmounted(() => stop?.());
</script>

<template>
  <ul>
    <li v-for="library in libraries" :key="library.id">{{ library.name }}</li>
  </ul>
</template>

A store has three calls, list, put and delete, over bytes by library id. indexedDbByteStore is the browser default, and memoryStampStore is for tests. Writes are batched per library, so a burst of edits saves once.

Dynamic stamps#

A stamp can carry form fields, such as the user’s name and today’s date. When the actions plugin has JavaScript on, the stamp fills them in when it’s placed, with the user’s identity and the current time, and the result is flattened into the placed artwork. The library itself never changes. stampPlugin({ dynamic: false }) keeps stamps as they are.

Standard stamps in eight languages#

@embedpdf/default-stamps has the standard set as one library per language (en, de, nl, fr, es, zh-CN, sv, ja), each with the same identifiers and translated labels. It loads from your own build, so nothing is fetched from anywhere else. negotiateLocale, from @embedpdf/vue/i18n, picks the one closest to the reader’s language:

import { LOCALES, loadDefaultLibrary } from '@embedpdf/default-stamps/library';
 
const locale = negotiateLocale(LOCALES, navigator.languages) ?? 'en';
await stamp.importLibrary(await loadDefaultLibrary(locale));

Pick a language: the same stamps come back with their labels translated.

Loading live preview…

<script setup lang="ts">
import { DocumentGate, Viewer } from '@embedpdf/vue/runtime';
import type { OpenInput } from '@embedpdf/vue/runtime';
import { Stage, stagePlugin } from '@embedpdf/vue/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/vue/render';
import { interactionPlugin } from '@embedpdf/vue/interaction';
import { AnnotationLayer, annotationPlugin } from '@embedpdf/vue/annotation';
import { stampPlugin } from '@embedpdf/vue/stamp';
import { localEngine } from '@embedpdf/engine';
import LanguagePicker from './LanguagePicker.vue';

import '../languages.css';

const engine = localEngine();
const assetEngine = engine; // stamp libraries are PDFs; they open here too
const plugins = [
  stagePlugin(),
  renderPlugin(),
  interactionPlugin(),
  annotationPlugin(),
  stampPlugin({ assetEngine }),
];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};
</script>

<template>
  <Viewer :engine="engine" :plugins="plugins" :initial-documents="[{ source: ebook }]">
    <DocumentGate>
      <template #fallback><p class="loading">Loading…</p></template>
      <LanguagePicker />
      <Stage class="stage">
        <template #page>
          <RenderLayer />
          <AnnotationLayer />
        </template>
      </Stage>
    </DocumentGate>
  </Viewer>
</template>

Methods#

Everything useStamp() gives you.

Method	What it does
`listLibraries({ kind? })`	Every library, or the ones of the kinds you ask for. In a component, use `useStampLibraries({ kind? })`. Library kinds
`getLibrary(libraryId)`	One library, or `null`
`listAssets({ libraryId? })`	Every stamp, or the ones in one library, in the order a picker shows them. In a component, use `useStampAssets({ libraryId })`. Show a stamp picker
`getAsset(assetId)`	One stamp, or `null`
`getAssetPreview(assetId)`, `renderAssetPreview(assetId, { width })`	A stamp’s picture as `{ bytes, mimeType }`, or `null`: the thumbnail at the `previewWidth` setting, or one drawn at any width. In a component, `useStampAssetPreviewUrl(assetId)` gives an image URL.
`readAssetBytes(assetId)`	A copy of the stamp’s artwork as a one-page PDF, or `null`
`createLibrary(name, { kind? })`	Creates an empty library. Resolves `{ library }`. Library kinds
`updateLibrary(libraryId, changes)`	Renames a library, or changes its categories. Resolves `{ library }`.
`deleteLibrary(libraryId)`	Removes a library and every stamp in it
`importLibrary(bytes, { libraryKind? })`	Makes a library from a PDF: an Acrobat stamp file as it is, a plain PDF with one stamp per page. Resolves `{ library }`. A library is a PDF
`exportLibrary(libraryId)`	The library as the PDF it is, to store or to open in Acrobat
`createAsset({ libraryId?, label, source })`	Adds a stamp from a one-page PDF, a PNG or a JPEG, or from a `mark` instead of `source`. Without `libraryId`, it gets a library of its own. Resolves `{ asset }`. Draw or type a stamp
`createAssetFromAnnotations(page, refs, { libraryId?, label })`	Turns annotations on a page into one stamp, exactly as they look. Resolves `{ asset }`. Make a stamp from annotations
`updateAsset(assetId, changes)`	Changes a stamp’s label, subject or categories; its identifier never changes. Resolves `{ asset }`.
`deleteAsset(assetId)`	Removes a stamp from its library
`moveAsset(assetId, { libraryId })`	Moves a stamp to another library. Resolves `{ asset }`, which has a new id there.
`duplicateAsset(assetId, { label? })`	Copies a stamp within its library. Resolves `{ asset }`.
`armAsset(assetId, { targetWidth? })`	Arms a stamp: the next click on a page places it, with a preview under the pointer. Show a stamp picker
`disarm()`	Disarms the stamp without placing it
`placeAsset(assetId, { page, center, targetWidth?, rotation?, select? })`	Places a stamp without the pointer, its middle on `center`. Resolves `{ annotation }`. Place a stamp with code
`placeAssetOnPages(assetId, pages, { center, … })`	Places the same stamp at the same spot on several pages, or on `'all'`. Resolves `{ applied, skipped, failed }`: the placed stamps, and the pages that were skipped or failed.
`canPlace()`, `canCreateFromAnnotations()`	Whether placing a stamp, and making one from annotations, are allowed. Permissions
`canImport()`	Whether libraries can be imported here. It turns `false` once an import finds no local engine to open them in; see Settings.
`getSettings()`, `updateSettings(changes)`, `resetSettings()`	Reads the settings, changes them while the app runs, or goes back to what you registered. In a component, use `useStampSettings()`. Settings

Every method that returns a promise also takes a signal in its options, to cancel it.

State#

Everything useStampState() gives you, as refs: your template updates when a value changes. The method in the last column reads the same value once.

Field	What it is	Read once
`armedAsset`	The stamp the next click on this document places, or `null`	`getArmedAsset()`

The libraries and their stamps come from useStampLibraries() and useStampAssets({ libraryId }).

Settings#

Set them when you register the plugin, and change them while the app runs with stamp.updateSettings({ … }); stamp.resetSettings() goes back to what you registered, and useStampSettings() gives you the current settings.

Setting	What it does	Default
`assetEngine`	The engine stamp libraries open in	the viewer’s engine (local)
`previewWidth`	The width of stamp previews, in pixels	`256`
`dynamic`	Fill in dynamic stamps when they’re placed	`true`

Events#

events.vue

<script setup lang="ts">
import { ref } from 'vue';
import { useStampEvent } from '@embedpdf/vue/stamp';

const message = ref('');

useStampEvent(
  (stamp) => stamp.onLibraryChanged,
  ({ libraryId, reason }) => (message.value = `${libraryId}: ${reason}`),
);
</script>

<template>
  <p aria-live="polite">{{ message }}</p>
</template>

Event	Fires when	Carries
`onLibraryChanged`	Anything in a library changed: the one to save it on	`libraryId`, `reason`
`onLibraryCreated`, `onLibraryUpdated`, `onLibraryDeleted`	A library was added, changed or removed	`libraryId`, `library`
`onAssetCreated`, `onAssetUpdated`, `onAssetDeleted`	A stamp was added, changed or removed	`assetId`, `libraryId`, `asset`
`onArmChanged`	A stamp was armed or disarmed	`documentId`, `asset`
`onSettingsChanged`	The settings changed	`settings`, `changed`

reason is 'created', 'imported', 'updated', 'asset-added', 'asset-updated', 'asset-removed' or 'removed'. library and asset are the new values, and null in the deleted events; in the arm event, asset is null when the stamp was disarmed.

Permissions#

Permission	What it allows	Check
`annotations:create`	Placing a stamp	`stamp.canPlace()`
`doc.download`	Making a stamp from annotations, which copies them out	`stamp.canCreateFromAnnotations()`

Libraries live in the browser and touch no document, so creating and importing them needs no document permission.

Good to know#

The identifier#

A stamp made here gets an identifier in Acrobat’s own form, so it keeps its identity when its library is opened in Acrobat.

Stamps in the engine#

A placed stamp is a normal stamp annotation. To place one without the plugin, or copy one, see Stamps.

Was this page helpful?

Your feedback goes directly to the documentation team.