A complete PDF viewer, ready to embed

The viewer is everything people expect from a PDF app, in one tag: a toolbar, thumbnails, search, annotations, comments, forms, signatures and stamps. It fits a phone and a wide screen, speaks the user’s language, and works with a keyboard and a screen reader.

first.vue

<script setup lang="ts">
import { PDFViewer } from '@embedpdf/viewer-vue';
</script>

<template>
  <PDFViewer src="/report.pdf" style="height: 100vh" />
</template>

That’s the whole integration. The rest of these docs are about making it yours.

Make it yours#

Everything you change is a few lines of config, the same in every framework. Start at the top and stop when it’s enough:

You want to	Change	Page
Match your brand	Your accent color, fonts, light or dark	Theming
Leave features out, or make it read-only	`disable: ['forms', 'redaction']`, `readOnly: true`	Turn features off
Move or remove buttons	One line per change	Layout
Put a toolbar at the bottom, on the side, or several	Where each bar goes	Layout
Add your own button	A command: a label, an icon, what it does	Buttons & commands
Add your own menu or panel	A list of items, or your component	Menus, Panels
Put your own component in the toolbar	Your React, Vue, Svelte or Angular component	Your own components
Control the viewer from your app	The `viewer` object	The viewer in code

You never write layout code for phones, menus that open the right way, or keyboard focus. You say what goes where, and the viewer takes care of how it behaves. A menu in a bottom toolbar opens upward; the thumbnails slide up from the bottom on a phone; a button that doesn’t fit moves into the “More” menu.

The viewer or headless?#

EmbedPDF comes in two forms, built on the same engine and the same plugins:

The viewer is finished. You configure it, theme it, and add your own buttons, menus, panels and components.
Headless is the parts. You build the whole interface yourself, and nothing appears on screen unless you put it there.

Start with the viewer. Every feature is a headless plugin with the same settings, and inside the viewer your own components can use the headless hooks. If you outgrow the viewer, what you learned still applies.

Local or cloud#

The viewer runs on the local engine by default: the PDF opens in the browser, with no server and no upload, and it works offline.

Next steps#

Quick startInstall, show a PDF, add your color and your own button.LayoutToolbars at any edge, several of them, and every button where you want it.Your own componentsYour React, Vue, Svelte or Angular components inside the viewer.

Was this page helpful?

Your feedback goes directly to the documentation team.