Quick Start

This tutorial guides you through installing InkLayer, loading a PDF, and adding your first annotation — all in under 5 minutes. Covers both React and Vue frameworks. Pick the one you’re familiar with.

Installation

InkLayer bundles all internal dependencies (PDF.js, Konva, pdf-lib, etc.) — you only need the framework-specific package:

React

npm install inklayer-react

Vue

npm install inklayer-vue

No need (and not recommended) to manually install pdfjs-dist, konva, pdf-lib, etc. — InkLayer already includes tested versions of them.

Choosing a Component

InkLayer provides two top-level components. Before you start, pick the one that fits your use case:

Component	Use Case	Features
`PdfAnnotator`	Users need to annotate PDFs (highlight, pen, signature, etc.)	Toolbar + annotation editing + sidebar + save/load
`PdfViewer`	Only need to view PDFs, no annotation required	Zoom, search, print, page navigation, outline

The examples below use PdfAnnotator (full-featured version). If you only need viewing, replace the component name with PdfViewer — all other configuration works the same way.

Minimal Example

Import the component and styles, pass a PDF URL, and you have a fully functional PDF annotator.

Tip: The examples below use a publicly accessible test PDF. You can also place your own PDF file in your project’s public/ directory and reference it (e.g., /my-file.pdf).

React

import { PdfAnnotator, PdfViewer } from 'inklayer-react'
import 'inklayer-react/style'

export default function App() {
  return (
    <PdfAnnotator
      url="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-polyfill.pdf"
      user={{ id: 'user-1', name: 'Demo User' }}
      layoutStyle={{ width: '100vw', height: '100vh' }}
    />
  )
}

What you should see: After running, a full PDF annotator appears. The top toolbar contains 14 annotation tools (highlight, pen, rectangle, etc.), the left sidebar shows thumbnails, and the right panel lists annotations. You can immediately click any tool and draw annotations on the PDF.

⚠️ Layout note: PdfAnnotator uses absolute positioning internally. You must provide an explicit height via layoutStyle, otherwise the component will be invisible. Values should use strings with CSS units (e.g., '100vh', '600px'). If the page is blank, check layoutStyle first.

Vue

<script setup>
import { PdfAnnotator, PdfViewer } from 'inklayer-vue'
import 'inklayer-vue/style'
</script>

<template>
  <PdfAnnotator
    url="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-polyfill.pdf"
    :user="{ id: 'user-1', name: 'Demo User' }"
    :layout-style="{ width: '100vw', height: '100vh' }"
  />
</template>

What you should see: Same as the React version — a fully functional PDF annotator ready to use.

⚠️ Layout note: The Vue version also requires an explicit :layout-style. Use string values with CSS units, same as React.