Scroll, zoom & layout

The Stage is where the document is shown. It lays out the pages (scrolling, facing pages, a grid), keeps only the visible ones mounted, and handles scrolling, zoom and page navigation, with the mouse, the keyboard and on touch screens. You decide what each page draws and what the controls around it look like.

Register stagePlugin() with renderPlugin(), put <Stage> in your layout, and give it a scoped slot that draws one page:

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 { localEngine } from '@embedpdf/engine';

import './basic.css';

const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin()];

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>
      <Stage class="stage">
        <template #page><RenderLayer /></template>
      </Stage>
    </DocumentGate>
  </Viewer>
</template>

Try it: drag to pan, and zoom with Ctrl and the wheel (Cmd on a Mac) or a trackpad pinch. On a phone, flick to scroll, pinch to zoom, and double-tap to zoom in.

Only visible pages are mounted, so a 2,000-page document scrolls as smoothly as a short one.
Gestures work with no code of your own: pan, zoom around the pointer, momentum scrolling and pinch.
Each page is yours. The scoped slot runs once per visible page. Stack more layers in it (text selection, annotations, search highlights) and they move with the page.

Zoom#

useStageState() gives you the zoom to show, and useStage() the calls to change 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 { localEngine } from '@embedpdf/engine';
import ZoomToolbar from './ZoomToolbar.vue';

import '../zoom.css';

const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin()];

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>
      <ZoomToolbar />
      <Stage class="stage">
        <template #page><RenderLayer /></template>
      </Stage>
    </DocumentGate>
  </Viewer>
</template>

zoom-controls.vue

<script setup lang="ts">
import { useStage, useStageState } from '@embedpdf/vue/stage';

const stage = useStage();
const { zoomLevel, zoomMode } = useStageState();
</script>

<template>
  <div>
    <button @click="stage.zoomOut()">−</button>
    <span>{{ Math.round(zoomLevel * 100) }}%</span>
    <button @click="stage.zoomIn()">+</button>
    <button :aria-pressed="zoomMode === 'fit-width'" @click="stage.fitWidth()">Fit width</button>
  </div>
</template>

zoomLevel is a plain number: 1 is 100%, 2 is 200%. And 100% means the page’s real size: a Letter page shows as big as the paper, as it does in Acrobat.

A fit mode keeps applying when the window resizes. As soon as the user pinches or presses +, the mode becomes 'custom' and their zoom stays.

Mode	What it does
`'automatic'`	Fits the page width, but never zooms past 100%. The default.
`'fit-page'`	Fits the whole page in view.
`'fit-width'`	Fills the full width.
`'fit-all'`	Zooms out until every page is visible.

For an exact level, a mode or a fixed page size, use zoomTo:

stage.zoomTo(1.5); // exactly 150%
stage.zoomTo({ mode: 'fit-width' });
stage.zoomTo({ pageWidth: 200 }); // every page 200 pixels wide, for thumbnails
stage.zoomBy(1.25, { around: { x: 400, y: 300 } }); // 25% closer, around a point in the Stage

Move through pages#

page-navigation.vue

<script setup lang="ts">
import { useStage, useStageState } from '@embedpdf/vue/stage';

const stage = useStage();
const { currentPageIndex, pageCount } = useStageState();
</script>

<template>
  <nav>
    <button @click="stage.previousPage()">Previous</button>
    <span>{{ currentPageIndex + 1 }} of {{ pageCount }}</span>
    <button @click="stage.nextPage()">Next</button>
  </nav>
</template>

stage.goToPage(4); // the fifth page
stage.goToPage(page.ref); // or by its ref
stage.goToFirstPage();
stage.goToLastPage();

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 { localEngine } from '@embedpdf/engine';
import PageToolbar from './PageToolbar.vue';

import '../navigation.css';

const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin()];

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>
      <PageToolbar />
      <Stage class="stage">
        <template #page><RenderLayer /></template>
      </Stage>
    </DocumentGate>
  </Viewer>
</template>

Try it: zoom in, then press Next. The next page lands with its top edge at the top of the view, at every zoom.

A page is its ref or its index. Every call that takes a page takes either. An index counts from 0, so page “1” in your UI is goToPage(0), and an index past the end goes to the last page.
nextPage() and previousPage() follow spreads. When two facing pages fit, they move a whole spread; zoomed in, one page.
reveal() scrolls only as far as needed. It makes a page visible and does nothing if it already is. Use it for a thumbnail strip that follows along without jumping.
You can navigate as soon as the document opens. A call made before the Stage is on screen waits for it, and the last one is where the Stage opens, without scrolling there.

Layouts#

The arrangement of the pages is four settings. Set them when you register the plugin, or change them while the app runs. The Stage keeps you on the same page while it reflows:

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 { localEngine } from '@embedpdf/engine';
import LayoutControls from './LayoutControls.vue';

import '../layouts.css';

const engine = localEngine();
// Facing pages from the start, like a book.
const plugins = [stagePlugin({ spread: 'odd' }), renderPlugin()];

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>
      <LayoutControls />
      <Stage class="stage">
        <template #page><RenderLayer /></template>
      </Stage>
    </DocumentGate>
  </Viewer>
</template>

stage.updateSettings({ layout: 'horizontal', spread: 'odd' });

Setting	What it decides	Values
`flow`	Scroll every page, or one page or spread at a time	`'continuous'` (default), `'paged'`
`layout`	How pages are arranged	`'vertical'` (default), `'horizontal'`, `'grid'`
`spread`	Facing pages side by side, like a book	`'none'` (default), `'odd'`, `'even'`
`sizing`	Each page at its true size, or every page equally wide	`'intrinsic'` (default), `'uniform'`

Two combinations you’ll reach for often:

// A book: facing pages, one spread at a time
stagePlugin({ flow: 'paged', spread: 'odd' });
 
// A thumbnail grid that wraps to the available width
stagePlugin({ layout: 'grid', columns: 'auto', zoom: { pageWidth: 150 } });

columns applies to the grid: 'auto' wraps to fit, 'square' aims for a square grid, and a number fixes the count.

Space around pages#

padding is the space between the pages and the edge of the Stage, in screen pixels. Fit modes respect it, so “fit page” never touches the edges. It’s 24, or 4 on narrow screens.
gap is the space between pages. A number (16, the default) grows with the zoom, like the space between sheets of paper. { px: 16 } stays 16 screen pixels at every zoom, which suits a thumbnail strip.

stagePlugin({ padding: 32, gap: { px: 12 } });

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 { localEngine } from '@embedpdf/engine';
import SpacingControls from './SpacingControls.vue';

import '../spacing.css';

const engine = localEngine();
// No responsive rules, so the padding you set applies at every width.
const plugins = [stagePlugin({ padding: 32, gap: { px: 12 }, responsive: [] }), renderPlugin()];

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>
      <SpacingControls />
      <Stage class="stage">
        <template #page><RenderLayer /></template>
      </Stage>
    </DocumentGate>
  </Viewer>
</template>

Adapt to the space you have#

A generous margin on a desktop wastes half a phone screen. Settings can depend on how much room the Stage has, like a CSS container query:

stagePlugin({
  padding: 24,
  spread: 'odd',
  responsive: [
    { name: 'compact', when: { maxWidth: 600 }, settings: { padding: 4 } },
    { when: { orientation: 'portrait' }, settings: { spread: 'none' } },
  ],
});

Every rule whose when matches applies, in order, and a later rule wins on the settings they share. when takes minWidth, maxWidth, minHeight, maxHeight and orientation, all combined with and, or a function for anything else: (box) => box.width / box.height > 2.

It measures the Stage, not the device. A 500-pixel pane on a desktop is compact too, and two Stages in one window decide on their own.
A rule applies when the size crosses it. In between, the user is in charge: pinch to 300%, resize the window, and the zoom stays while the padding rule still applies.

Loading live preview…

<script setup lang="ts">
import { ref } from 'vue';
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 { localEngine } from '@embedpdf/engine';
import Toolbar from './Toolbar.vue';

import '../responsive.css';

const engine = localEngine();

// Facing pages with a roomy margin, and one rule for a narrow Stage: a thin
// margin and one page at a time. The rule has a name, so the UI can read it too.
const plugins = [
  stagePlugin({
    padding: 24,
    spread: 'odd',
    responsive: [
      { name: 'compact', when: { maxWidth: 600 }, settings: { padding: 4, spread: 'none' } },
    ],
  }),
  renderPlugin(),
];

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()) };
};

const narrow = ref(false);
</script>

<template>
  <Viewer :engine="engine" :plugins="plugins" :initial-documents="[{ source: ebook }]">
    <DocumentGate>
      <template #fallback><p class="loading">Loading…</p></template>
      <Toolbar v-model:narrow="narrow" />
      <div class="frame" :data-width="narrow ? 'narrow' : 'full'">
        <Stage class="stage">
          <template #page><RenderLayer /></template>
        </Stage>
      </div>
    </DocumentGate>
  </Viewer>
</template>

Try it: switch the Stage to 360 pixels. The rule turns on, the facing pages become one, and the toolbar’s buttons get shorter, all from the same breakpoint.

Out of the box there’s one rule, the compact margin above. Pass your own list to replace it, or responsive: [] for none. stage.setResponsiveRules([…]) changes the rules while the app runs.

A named rule is also something your UI can read, so one breakpoint drives both the layout and your own chrome:

compact-layout.vue

<script setup lang="ts">
import { computed } from 'vue';
import { useStageState } from '@embedpdf/vue/stage';
import BottomSheet from './BottomSheet.vue';
import SidePanel from './SidePanel.vue';

const { activeRules } = useStageState();
const compact = computed(() => activeRules.value.includes('compact'));
</script>

<template>
  <BottomSheet v-if="compact" />
  <SidePanel v-else />
</template>

On touch screens#

Touch works out of the box, tuned to feel like the platform rather than a web page:

One finger scrolls, with momentum: flick and the page glides to a stop.
Two fingers pinch-zoom around the point between them, and pan at the same time.
Double-tap zooms in steps: the whole page, the text at full width, closer, and back out.
Edges are elastic. Pulling past the end stretches and springs back.
Long-press selects a word when the Selection plugin is registered.

For a Stage that should scroll but not zoom under a pinch or Ctrl+wheel, such as a thumbnail strip, set its zoomGestures setting to false.

Labels and buttons on every page#

For UI that belongs to a page but shouldn’t sit on it, like a page number below or a row of buttons above, reserve space with pageFrame and draw into it with the #page-chrome slot:

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 { localEngine } from '@embedpdf/engine';

import './page-labels.css';

const engine = localEngine();

// Reserve a 26px band below every page: the label lives there, so it never
// covers the page and keeps its size when you zoom.
const plugins = [stagePlugin({ pageFrame: { bottom: 26 } }), renderPlugin()];

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>
      <Stage class="stage">
        <template #page><RenderLayer /></template>
        <template #page-chrome="{ page }">
          <div class="page-label" :style="{ height: `${page.frame.bottom}px` }">
            Page {{ page.pageIndex + 1 }}
          </div>
        </template>
      </Stage>
    </DocumentGate>
  </Viewer>
</template>

The reserved bands are in screen pixels, so labels keep their size at every zoom. They count as part of the page: “fit page” includes them, and going to a page shows its label.

Each page has a drop shadow so it reads as paper. It’s the viewer’s page.shadow setting ('none' for no shadow), next to page.background, the color of a page before its picture arrives. Both can also come from CSS, which wins over the setting:

.pdf-viewer {
  --epdf-page-shadow: 0 2px 8px rgb(0 0 0 / 0.25); /* or none */
}

See Colors & theming.

Scrollbars#

<Scrollbar> is a scrollbar for the Stage that you style yourself: drag the thumb, click the track to page, and it hides when the pointer leaves, like a macOS scrollbar:

Loading live preview…

<script setup lang="ts">
import { DocumentGate, Viewer } from '@embedpdf/vue/runtime';
import type { OpenInput } from '@embedpdf/vue/runtime';
import { Scrollbar, Stage, stagePlugin } from '@embedpdf/vue/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/vue/render';
import { localEngine } from '@embedpdf/engine';
import ReadingProgress from './ReadingProgress.vue';

import '../scrollbar.css';

const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin()];

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>
      <ReadingProgress />
      <Stage class="stage">
        <template #page><RenderLayer /></template>
        <template #overlay>
          <Scrollbar axis="y" :auto-hide="1200" class="scrollbar" thumb-class="thumb" />
        </template>
      </Stage>
    </DocumentGate>
  </Viewer>
</template>

scrollbar.vue

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

<template>
  <Scrollbar axis="y" :auto-hide="1200" class="my-scrollbar" thumb-class="my-thumb" />
</template>

Prop	What it is	Default
`axis`	`'x'` or `'y'`	required
`auto-hide`	Milliseconds before it hides, or `false` to always show it	`1200`
`min-thumb-size`	The smallest thumb, in pixels, for very long documents	`24`
`track-press`	A click on the track moves a `'page'` or `'jump'`s there	`'page'`

It sets data-axis, data-state and data-dragging for your CSS; until you style the thumb, its color is --epdf-scrollbar-thumb. To build your own, such as a reading-progress bar, useScrollMetrics() gives you scrollTop, scrollHeight and clientHeight, the same numbers a scrolling element has.

Jump to an exact spot#

Give reveal() a rectangle and it becomes your “go to this search result” call:

stage.reveal(hit.page, {
  rect: hit.bounds, // a box in page coordinates
  zoom: 'fit-width', // zoom so the box spans the view, or 'keep'
  anchor: { y: 0.35 }, // about a third from the top, like a browser's find bar
});

Search results, comments and bookmarks all come down to this one call.

Loading live preview…

<script setup lang="ts">
import { ref } from 'vue';
import { DocumentGate, Viewer } from '@embedpdf/vue/runtime';
import type { OpenInput, PageContextValue } from '@embedpdf/vue/runtime';
import { Stage, stagePlugin } from '@embedpdf/vue/stage';
import type { RevealZoom } from '@embedpdf/vue/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/vue/render';
import { localEngine } from '@embedpdf/engine';
import SpotPicker from './SpotPicker.vue';
import { SPOTS } from './spots';

import '../reveal.css';

const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin()];

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()) };
};

const active = ref(0);
const zoom = ref<RevealZoom>('fit-width');

// Page coordinates become pixels only here, as the spot is drawn.
function boxOn(page: PageContextValue, rect: (typeof SPOTS)[number]['rect']) {
  const box = page.transform.pageToViewRect(rect);
  return { left: `${box.x}px`, top: `${box.y}px`, width: `${box.width}px`, height: `${box.height}px` };
}
</script>

<template>
  <Viewer :engine="engine" :plugins="plugins" :initial-documents="[{ source: ebook }]">
    <DocumentGate>
      <template #fallback><p class="loading">Loading…</p></template>
      <SpotPicker v-model:active="active" v-model:zoom="zoom" />
      <Stage class="stage">
        <template #page><RenderLayer /></template>
        <template #page-chrome="{ page }">
          <template v-for="(spot, index) in SPOTS" :key="spot.label">
            <div
              v-if="spot.page === page.pageIndex"
              class="spot"
              :data-active="index === active"
              :style="boxOn(page, spot.rect)"
            />
          </template>
        </template>
      </Stage>
    </DocumentGate>
  </Viewer>
</template>

Follow a destination#

A destination is where a link, a bookmark or the document’s opening view points: a page, a spot on it, and a zoom. goToDestination() goes exactly there:

stage.goToDestination(destination);
 
// Page 5, with the point (72, 100) at the top-left of the view, at 200%
stage.goToDestination({ kind: 'xyz', page: pages[4].ref, x: 72, y: 100, zoom: 2 });

`kind`	Goes to
`'xyz'`	The point `x`, `y` at the top-left, at `zoom`
`'fit'`	The whole page
`'fitH'`	The page’s full width, with `y` at the top
`'fitV'`	The page’s full height, with `x` at the left
`'fitR'`	The box `x`, `y`, `width`, `height`, filling the view
`'fitB'`, `'fitBH'`, `'fitBV'`	The same as `fit`, `fitH` and `fitV`

Any of x, y and zoom can be null or left out: the view keeps what it has on that axis.

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 { localEngine } from '@embedpdf/engine';
import Destinations from './Destinations.vue';

import '../destination.css';

const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin()];

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>
      <Destinations />
      <Stage class="stage">
        <template #page><RenderLayer /></template>
      </Stage>
    </DocumentGate>
  </Viewer>
</template>

Make it feel right#

When someone clicks “next page”, should the page land at the top of the view, or centered like a slide? Four settings answer questions like that. They all take 'start', 'center', 'end' or a fraction such as 0.35, per axis:

Setting	The question it answers	Default
`arrivalAlign`	Where does a page land when you go to it?	the top
`zoomAlign`	What stays put when you zoom with a button?	the center
`anchorAlign`	What stays put when the window resizes or the layout changes?	the top
`fitAlign`	Where does the content rest when everything fits?	the center

The defaults feel like reading a document. Set them all to center for a presentation, where each move keeps the page centered like a slide:

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 { localEngine } from '@embedpdf/engine';
import FeelSwitcher from './FeelSwitcher.vue';

import '../presets.css';

const engine = localEngine();
// Zoomed in, so a page is wider than the view and you can see where it lands.
const plugins = [stagePlugin({ zoom: { level: 1.6 } }), renderPlugin()];

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>
      <FeelSwitcher />
      <Stage class="stage">
        <template #page><RenderLayer /></template>
      </Stage>
    </DocumentGate>
  </Viewer>
</template>

const presentation = {
  arrivalAlign: { x: 'center', y: 'center' },
  zoomAlign: { x: 'center', y: 'center' },
  anchorAlign: { x: 'center', y: 'center' },
};
 
stage.updateSettings(presentation); // one change, and you keep your place

One call can override the setting just for itself: stage.goToPage(12, { arrivalAlign: { y: 'center' } }). 'keep' means “don’t move this axis”: with arrivalAlign: { x: 'keep', y: 'start' }, someone reading the left column of a two-column paper stays in that column as they page on.

Rotate the view#

For a scan that came out sideways, turn how the pages are shown without changing the file:

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 { localEngine } from '@embedpdf/engine';
import RotateButtons from './RotateButtons.vue';

import '../rotate-view.css';

const engine = localEngine();
// The pages start a quarter turn round, like a scan that came out sideways.
const plugins = [stagePlugin({ viewRotation: 90 }), renderPlugin()];

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>
      <RotateButtons />
      <Stage class="stage">
        <template #page><RenderLayer /></template>
      </Stage>
    </DocumentGate>
  </Viewer>
</template>

stage.rotateViewBy(90); // a quarter turn clockwise from here
stage.setViewRotation(180); // or an exact rotation

To rotate pages in the PDF itself, use Organizing pages. That’s an edit to the document, not a view setting, so keep the two on different buttons.

Remember where the user was#

// One page: remember the spot before leaving, go back to it later
const spot = stage.getViewpoint();
stage.goToPage(2, { viewpoint: spot });
 
// Everything: settings and position, as one object you can store
localStorage.setItem('view', JSON.stringify(stage.getViewState()));
stage.applyViewState(JSON.parse(localStorage.getItem('view')!));

A viewpoint remembers what you were looking at, not pixel offsets, so it restores correctly in a window of another size.

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 { localEngine } from '@embedpdf/engine';
import Memory from './Memory.vue';

import '../viewpoint.css';

const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin()];

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>
      <Memory />
      <Stage class="stage">
        <template #page><RenderLayer /></template>
      </Stage>
    </DocumentGate>
  </Viewer>
</template>

Try it: scroll and zoom somewhere else, then press Go back to page 1.

Two views of one document#

Register the Stage twice, with its own id and token, for two independent views of the same document, such as a thumbnail strip next to the main view:

thumbs-token.ts

import { createCapabilityToken } from '@embedpdf/vue/runtime';
import { stagePlugin, type StageCapability } from '@embedpdf/vue/stage';

export const ThumbsToken = createCapabilityToken<StageCapability>('stage-thumbs');

export const plugins = [
  stagePlugin(), // the main view
  stagePlugin({ id: 'stage-thumbs', token: ThumbsToken, layout: 'grid', zoom: { pageWidth: 120 } }),
];

Pass the token to the component and the composables: <Stage :token="ThumbsToken"> and useStage(ThumbsToken); the state and settings take it after the selector, useStageState(select, ThumbsToken). Each view has its own zoom and layout; both show the same live document.

Loading live preview…

<script setup lang="ts">
import { DocumentGate, Viewer } from '@embedpdf/vue/runtime';
import type { OpenInput } from '@embedpdf/vue/runtime';
import { stagePlugin } from '@embedpdf/vue/stage';
import { renderPlugin } from '@embedpdf/vue/render';
import { localEngine } from '@embedpdf/engine';
import { OverviewToken } from './overview-token';
import Views from './Views.vue';

import '../two-views.css';

const engine = localEngine();

const plugins = [
  stagePlugin(), // the main view
  stagePlugin({
    id: 'stage-overview',
    token: OverviewToken,
    layout: 'grid',
    columns: 'auto',
    zoom: { pageWidth: 72 },
    gap: { px: 10 },
    padding: 10,
    interaction: false, // a drag only scrolls it
    // A wide, short box (a phone) lines the pages up in one row.
    responsive: [{ when: { orientation: 'landscape' }, settings: { layout: 'horizontal' } }],
  }),
  renderPlugin(),
];

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>
      <Views />
    </DocumentGate>
  </Viewer>
</template>

A thumbnail strip should usually not start text selection or drawing when someone drags it. Turn off its interaction setting; it keeps its own drag-to-scroll:

stagePlugin({
  id: 'stage-thumbs',
  token: ThumbsToken,
  layout: 'grid',
  interaction: false, // a drag doesn't select text or draw
});

Methods#

Everything useStage() gives you.

Method	What it does
`zoomIn()`, `zoomOut()`	Zooms one step in or out, around the `zoomAlign` point. Zoom
`fitWidth()`, `fitPage()`, `fitAll()`, `fitAutomatic()`	Switches to a fit mode, which keeps applying when the window resizes
`zoomTo(zoom, { around? })`	Zooms to a level (`1.5`), a mode (`{ mode: 'fit-width' }`) or a page size (`{ pageWidth }`, `{ pageHeight }`). `around` is a point in the Stage that stays put.
`zoomBy(factor, { around? })`	Multiplies the zoom: `1.25` is 25% closer
`goToPage(page, options?)`	Goes to a page, by its ref or its index. Move through pages
`nextPage(options?)`, `previousPage(options?)`	Goes to the next or previous page, or a whole spread when two facing pages fit
`goToFirstPage(options?)`, `goToLastPage(options?)`	Goes to the first or the last page
`canGoNext()`, `canGoPrevious()`	Whether there’s a page after or before the current one, to disable your buttons
`reveal(page, options?)`	Brings a page into view, scrolling only as far as needed. With `rect`, `zoom` or `anchor`, it lands on that spot. Jump to an exact spot
`goToDestination(destination)`	Goes where a link, a bookmark or the document’s opening view points. Follow a destination
`scrollTo({ left, top })`, `scrollBy({ left, top })`	Scrolls like a scrolling element does, in screen pixels. It jumps unless you pass `behavior: 'smooth'`. Scrollbars
`panBy(x, y)`	Moves the view by `x` and `y` screen pixels
`resetView()`	Jumps back to the first page and keeps the zoom mode
`isMoving()`, `stopMotion()`	Whether a glide or a fling is running, and stopping it where it is
`getCamera()`, `setCamera(camera)`	Where the view is, as `{ x, y, zoom }`, and moving it there at once. Every scroll frame
`setViewRotation(rotation)`, `rotateViewBy(degrees)`	Turns how the pages are shown: to `0`, `90`, `180` or `270`, or a quarter turn from here with `90` or `-90`. Rotate the view
`getViewpoint()`	What the user is looking at on the current page, with the zoom, to pass back to `goToPage(page, { viewpoint })`. Remember where the user was
`getViewState()`, `applyViewState(view)`	Every setting and the position as one object you can store, and restoring it. The responsive rules apply again on top.
`getSettings()`, `updateSettings(changes)`, `resetSettings()`	Reads, changes and resets the live settings, keeping you on the same page. Settings
`setResponsiveRules(rules)`	Replaces the responsive rules while the app runs. Adapt to the space you have
`listVisiblePages()`, `isPageVisible(page)`	The pages on screen, each with its box in the Stage and the part of it that shows, and whether one page is on screen
`listCurrentItemPages()`	The pages of the current spread, or the current page alone
`getPageAt(point)`	The page under a point in the Stage and the point on that page, or `null` over the space between pages
`viewportToPage(page, point)`, `pageToViewport(page, point)`, `pageRectToViewport(page, rect)`	Converts a point between the Stage and a page, and a box on a page to the Stage. `null` when the page isn’t laid out. Page coordinates
`getPageFrame(page)`	Where a page is laid out in the Stage, on screen or not, or `null` before it’s placed
`getViewportSize()`	The Stage’s size in screen pixels, as last measured

The page moves (goToPage(), nextPage(), previousPage(), goToFirstPage(), goToLastPage()) take { behavior, arrivalAlign, viewpoint }: behavior is the scrollBehavior setting for one call, arrivalAlign is where the page lands, and viewpoint is a saved spot to go back to. reveal() and goToDestination() take behavior too.

State#

Everything useStageState() 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
`zoomLevel`	The zoom as a number: `1` is 100%	`getZoomLevel()`
`zoomMode`	The fit mode, such as `'fit-width'`, or `'custom'` after a pinch or an exact level	`getZoomMode()`
`currentPageIndex`	The current page’s place in the document, from 0	`getCurrentPageIndex()`
`currentPage`	The current page’s ref, or `null` before the document has pages	`getCurrentPage()`
`pageCount`	How many pages the document has	`getPageCount()`
`viewRotation`	How the view is turned: `0`, `90`, `180` or `270`	`getViewRotation()`
`activeRules`	The names of the responsive rules that apply now, in order	`listActiveRules()`, or `matchesRule(name)` for one

The settings come from useStageSettings(), and the document’s pages from usePageList().

Settings#

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

Setting	What it does	Default
`flow`	Scroll every page, or one page or spread at a time	`'continuous'`
`layout`	`'vertical'`, `'horizontal'` or `'grid'`	`'vertical'`
`spread`	Facing pages: `'none'`, `'odd'`, `'even'`	`'none'`
`sizing`	`'intrinsic'` (true sizes) or `'uniform'` (equal widths)	`'intrinsic'`
`columns`	Grid columns: `'square'`, `'auto'` or a number	`'square'`
`zoom`	A mode, a level, `{ pageWidth }` or `{ pageHeight }`	`{ mode: 'automatic' }`
`padding`	Space around the pages, in screen pixels	`24` (`4` when compact)
`gap`	Space between pages: a number (grows with zoom) or `{ px }`	`16`
`pageFrame`	Space reserved around each page for your labels, in screen pixels	`0` on every side
`bounded`	Keep panning within the pages; `false` for an endless canvas	`true`
`direction`	Reading direction: `'rtl'` flips the page order and spreads	`'ltr'`
`arrivalAlign`	Where a page lands when you go to it	`{ x: 'start', y: 'start' }`
`zoomAlign`	What stays put when you zoom with a button	`{ x: 'center', y: 'center' }`
`anchorAlign`	What stays put when the window resizes or the layout changes	`{ x: 'start', y: 'start' }`
`fitAlign`	Where the content rests when everything fits	`{ x: 'center', y: 'center' }`
`viewRotation`	How the pages are turned: `0`, `90`, `180`, `270`	`0`
`scrollBehavior`	Whether going to a page glides or jumps: `'smooth'`, `'instant'`	`'smooth'`
`interaction`	Drags reach the active tool, such as text selection; `false` for a view that only scrolls	`true`
`panFallback`	A drag in the space between pages scrolls, whatever the tool	`true`
`zoomGestures`	A pinch or Ctrl+wheel zooms; `false` keeps the zoom fixed	`true`
`viewUnitsPerPoint`	Screen pixels per PDF point at 100%, so 100% is the page’s real size; a native app sets its own	`96 / 72` on the web

Set once, when you register the plugin:

Setting	What it does	Default
`responsive`	Rules that change settings by the Stage’s size	one `compact` rule
`id`, `token`	For a second view of the same document	the main view

Events#

page-analytics.vue

<script setup lang="ts">
import { RenderLayer } from '@embedpdf/vue/render';
import { Stage, useStageEvent } from '@embedpdf/vue/stage';
import { analytics } from './analytics';

useStageEvent(
  (stage) => stage.onPageChanged,
  ({ pageIndex }) => analytics.track('page_view', { page: pageIndex + 1 }),
);
</script>

<template>
  <Stage>
    <template #page>
      <RenderLayer />
    </template>
  </Stage>
</template>

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 { localEngine } from '@embedpdf/engine';
import EventLog from './EventLog.vue';

import '../events.css';

const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin()];

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>
      <div class="layout">
        <EventLog />
        <Stage class="stage">
          <template #page><RenderLayer /></template>
        </Stage>
      </div>
    </DocumentGate>
  </Viewer>
</template>

Event	Fires when	Carries
`onPageChanged`	Another page becomes the current one	`page`, `pageIndex`, `previousPageIndex`
`onZoomChanged`	The zoom level changed	`level`, `previousLevel`, `mode`
`onCameraChanged`	The view moved, on every frame of a scroll or zoom	`camera`
`onMotionEnded`	Scrolling, a fling or an animated move came to rest	`camera`
`onViewportChanged`	The Stage itself changed size	`size`
`onSettingsChanged`	A setting changed, by you or by a responsive rule	`settings`, `changed`

Good to know#

What “current page” means#

The current page is the one that fills most of the view, and with spreads, the first of the spread. It changes as you scroll, before the scroll comes to rest.

Every scroll frame#

onCameraChanged fires on every frame of a scroll or zoom. Use it for things that must track the view exactly, and onMotionEnded for anything expensive.

Page coordinates#

Positions you pass to reveal() and goToDestination() are in points from the top-left of the page, like every position in EmbedPDF. A destination from another PDF tool uses the file’s own numbers; turn it into this form with pageDestinationOf(destination, page.pdfCropBox) from the engine. See Coordinates.

How pages stay sharp#

The Stage lays the pages out; the render plugin draws them, at every zoom, within the memory budget you set.

Was this page helpful?

Your feedback goes directly to the documentation team.