Quickstart

Put a PDF on screen with tools above it and page and zoom controls below. This page assumes a Vite project.

1. Install the packages

You need the core, the theme and the package for your framework. The packages share one version number.

Vue

pnpm add @inkbar/vue @inkbar/core @inkbar/theme

React

pnpm add @inkbar/react @inkbar/core @inkbar/theme

Svelte

pnpm add @inkbar/svelte @inkbar/core @inkbar/theme

2. Add the Vite plugin

PDF.js loads a worker, fonts and decoders at runtime. The plugin serves those files in development and copies them into your build. It works with Vite 6 or later.

vite.config.ts

import { inkbar } from '@inkbar/core/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [inkbar()],
})

Note

On another bundler, pass your own asset URLs to the root. Loading assets lists the files.

3. Mount the viewer

Wrap the viewport in a root. Put a toolbar of tools, undo and redo above it and a page and zoom bar below, then add the popovers for notes and suggested redactions.

Vue

Review.vue

<script setup lang="ts">
import {
  InkRoot,
  InkViewport,
  InkToolbar,
  InkToolButton,
  InkToolbarSeparator,
  InkUndo,
  InkRedo,
  InkPrevPage,
  InkPageInput,
  InkPageCount,
  InkNextPage,
  InkZoomSelect,
  InkNotePopover,
  InkSuggestionCard,
} from '@inkbar/vue'
import { assets } from 'virtual:inkbar-assets'
import '@inkbar/theme/theme.css'

defineProps<{ url: string; id: string }>()
</script>

<template>
  <InkRoot :src="{ url, key: id }" :assets="assets">
    <InkToolbar>
      <InkToolButton tool="view" />
      <InkToolButton tool="select" />
      <InkToolButton tool="highlight" />
      <InkToolButton tool="redact-area" />
      <InkToolButton tool="note" />
      <InkToolbarSeparator />
      <InkUndo />
      <InkRedo />
    </InkToolbar>
    <InkViewport />
    <InkToolbar label="Page and zoom">
      <InkPrevPage />
      <InkPageInput />
      <InkPageCount />
      <InkNextPage />
      <InkZoomSelect />
    </InkToolbar>
    <InkNotePopover />
    <InkSuggestionCard />
  </InkRoot>
</template>

React

Review.tsx

import {
  InkRoot,
  InkViewport,
  InkToolbar,
  InkToolButton,
  InkToolbarSeparator,
  InkUndo,
  InkRedo,
  InkPrevPage,
  InkPageInput,
  InkPageCount,
  InkNextPage,
  InkZoomSelect,
  InkNotePopover,
  InkSuggestionCard,
} from '@inkbar/react'
import { assets } from 'virtual:inkbar-assets'
import '@inkbar/theme/theme.css'

export function Review({ url, id }: { url: string; id: string }) {
  return (
    <InkRoot src={{ url, key: id }} assets={assets}>
      <InkToolbar>
        <InkToolButton tool="view" />
        <InkToolButton tool="select" />
        <InkToolButton tool="highlight" />
        <InkToolButton tool="redact-area" />
        <InkToolButton tool="note" />
        <InkToolbarSeparator />
        <InkUndo />
        <InkRedo />
      </InkToolbar>
      <InkViewport />
      <InkToolbar label="Page and zoom">
        <InkPrevPage />
        <InkPageInput />
        <InkPageCount />
        <InkNextPage />
        <InkZoomSelect />
      </InkToolbar>
      <InkNotePopover />
      <InkSuggestionCard />
    </InkRoot>
  )
}

Svelte

Review.svelte

<script lang="ts">
  import {
    InkRoot,
    InkViewport,
    InkToolbar,
    InkToolButton,
    InkToolbarSeparator,
    InkUndo,
    InkRedo,
    InkPrevPage,
    InkPageInput,
    InkPageCount,
    InkNextPage,
    InkZoomSelect,
    InkNotePopover,
    InkSuggestionCard,
  } from '@inkbar/svelte'
  import { assets } from 'virtual:inkbar-assets'
  import '@inkbar/theme/theme.css'

  let { url, id }: { url: string; id: string } = $props()
</script>

<InkRoot src={{ url, key: id }} {assets}>
  <InkToolbar>
    <InkToolButton tool="view" />
    <InkToolButton tool="select" />
    <InkToolButton tool="highlight" />
    <InkToolButton tool="redact-area" />
    <InkToolButton tool="note" />
    <InkToolbarSeparator />
    <InkUndo />
    <InkRedo />
  </InkToolbar>
  <InkViewport />
  <InkToolbar label="Page and zoom">
    <InkPrevPage />
    <InkPageInput />
    <InkPageCount />
    <InkNextPage />
    <InkZoomSelect />
  </InkToolbar>
  <InkNotePopover />
  <InkSuggestionCard />
</InkRoot>

The viewer fills its parent, so give the parent a height. Without one, the document has no room to scroll. Each control is its own component: drop the ones you don’t need, move them, or add your own buttons. Toolbars covers them.

Inkbar keeps the annotations itself here, with undo and redo. To hold them in your own state, read Controlled mode. Annotations live in memory until you save them: Annotations shows how to store them as JSON.

Next

• Restyle the controls with your own tokens and CSS.
• Work with annotations and save them as JSON.
• Review redactions, including suggestions from your own detector.
• Read the page for your framework: Vue, React, Svelte or Plain DOM.
• Compare with the sandbox, which runs the same setup in each framework.