Quick Start

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

Starter (Recommended) 🚀

The fastest way to experience InkLayer: use the official Starter template. Experience the full SDK with zero configuration.

React

git clone https://github.com/Laomai-codefee/inklayer-react-starter.git
cd inklayer-react-starter
npm install
npm run dev

Vue

git clone https://github.com/Laomai-codefee/inklayer-vue-starter.git
cd inklayer-vue-starter
npm install
npm run dev

💡 Don’t want to install locally? Try it right in your browser:

• Open React version on StackBlitz →
• Open Vue version on StackBlitz →

Open http://localhost:5173 and you’ll see a fully functional PDF annotator (you can also switch to the viewer component). The top toolbar includes 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 start drawing annotations on the PDF.

💡 The Starter comes with a complete PDF viewer & annotation example pre-configured. Just start coding.

Manual Installation

If you’re integrating InkLayer into an existing project, follow the steps below.

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:

The examples below show both components separately — PdfViewer for viewing and PdfAnnotator for full annotation. Pick the one that fits your use case.

Minimal Example

Import the component and styles, pass a PDF URL — you’re done.

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

PdfViewer — View-only mode

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

export default function App() {
  return (
    <PdfViewer
      url="https://inklayer.dev/inklayer-demo.pdf"
      layoutStyle={{ width: '100vw', height: '100vh' }}
    />
  )
}

PdfAnnotator — Full annotation mode

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

export default function App() {
  return (
    <PdfAnnotator
      url="https://inklayer.dev/inklayer-demo.pdf"
      user={{ id: 'user-1', name: 'Demo User' }}
      layoutStyle={{ width: '100vw', height: '100vh' }}
    />
  )
}

What you should see: For PdfViewer, a clean PDF reader with zoom, search, and page navigation. For PdfAnnotator, a full PDF annotator appears with 14 annotation tools (highlight, pen, rectangle, etc.), a thumbnail sidebar, and an annotation list. You can immediately click any tool and draw annotations on the PDF.

Vue

⚠️ Required: You must register the InkLayer Vue plugin before using any components. In main.ts:

import { createApp } from 'vue'
import { inklayerVuePlugin } from 'inklayer-vue'
import App from './App.vue'

const app = createApp(App)
app.use(inklayerVuePlugin)
app.mount('#app')

PdfViewer — View-only mode

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

<template>
  <PdfViewer
    url="https://inklayer.dev/inklayer-demo.pdf"
    :layout-style="{ width: '100vw', height: '100vh' }"
  />
</template>

PdfAnnotator — Full annotation mode

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

<template>
  <PdfAnnotator
    url="https://inklayer.dev/inklayer-demo.pdf"
    :user="{ id: 'user-1', name: 'Demo User' }"
    :layout-style="{ width: '100vw', height: '100vh' }"
  />
</template>

What you should see: Same as the React version — PdfViewer gives a clean reader, PdfAnnotator gives the full annotation experience.