InkLayer

English | 简体中文

🖊️ A PDF viewer and annotation SDK for Vue 3 applications
For building document review, collaborative annotation, and commenting workflows

InkLayer Vue PDF annotation demo — highlight, ink, shapes and comments

The fastest way to try InkLayer Vue: use the official starter 🚀 .

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

Open:

http://localhost:5173

💡 The starter comes with a complete PDF annotation example pre-configured — no extra setup needed to experience the full SDK.

• 🚀 PDF Viewer (thumbnails / outline / zoom / search / theming)
• 🖍️ PDF Annotation System (highlight / ink / shapes / stamps / signatures)
• 💬 Comment & review workflow
• 🔗 Annotation references and cross-page navigation (# references / hover previews / click-to-jump)
• 🔐 Collaborative annotation permissions (ownership / admin overrides / read-only)
• 💾 Annotation data model (persistable)
• 📤 Export support (PDF / Excel)
• 🎨 Customizable UI (toolbar / sidebar)

• Fixed exports for native /Line annotations without /LE and added regression coverage
• Preserved existing native PDF annotations when enableNativeAnnotations is disabled instead of removing them during export
• exportToPdf now returns a Promise, allowing callers to await completion and handle export failures

• Refined annotation interactions: Sidebar and PDF synchronize on selection only, while Canvas hover keeps author labels without a distracting outline
• Fixed annotation navigation at automatic zoom, clipped Sidebar editors, and menu positioning after user or permission changes
• Improved PDF and Excel numbering: main PDF annotations use Author · #N, while Excel uses stable #N / #N.1 references
• Localized annotation-type filters, preserved filter state, and polished collaborative permission and read-only behavior

• Restore a deleted annotation or reply before the notification disappears
• Fixed annotation selection state and the color picker's back, layout, and timer interactions
• Improved author-label collision handling, drag updates, and hover-preview layering

• Reference other annotations with # from comments and replies
• Preview referenced annotations, selected text, authors, pages, and replies on hover
• Jump between sidebar entries and PDF annotations, including across pages
• Improved annotation selection, editor focus, and hover interactions

npm install inklayer-vue

import { createApp } from 'vue'
import { inklayerVuePlugin } from 'inklayer-vue'
import App from './App.vue'
const app = createApp(App)
app.use(inklayerVuePlugin)
app.mount('#app')

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

const handleSave = (annotations) => {
 console.log('Saved annotations:', annotations)
}
</script>
<template>
 <PdfAnnotator
 title="PDF Annotator"
 url="https://example.com/sample.pdf"
 :user="{ id: 'u1', name: 'Alice' }"
 @save="handleSave"
 />
</template>

<script setup>
import { PdfViewer } from 'inklayer-vue'
import 'inklayer-vue/style'
</script>
<template>
 <PdfViewer
 title="PDF Viewer"
 url="https://example.com/sample.pdf"
 />
</template>

👉 https://inklayer.dev/docs/vue

user is the current application user supplied by the host application. InkLayer uses this identity only to determine annotation and reply ownership; authentication remains the host application's responsibility, and callers do not need to provide a separate role. In owner-only mode, a current user with a valid user.id may create annotations and replies, while only the annotation owner may move, resize, edit, change status, or delete that annotation. A reply can be edited or deleted only by its author.

<PdfAnnotator
 :user="currentUser"
 :annotation-permissions="{
 mode: 'owner-only',
 // isAdmin is implemented by your application
 can: ({ currentUser }) =>
 isAdmin(currentUser?.id) ? true : undefined
 }"
/>

The optional synchronous can(request) resolver overrides the mode: return true to allow, false to deny, or undefined to keep the mode's default decision. The request includes action, currentUser, annotation, comment, and defaultAllowed, so applications can add administrator, workflow-state, or document-level rules.

For a fully read-only annotator, pass :annotation-permissions="{ can: () => false }". Users can still select and inspect annotations, while every mutation is denied.

These are browser interaction permissions for InkLayer UI and local mutations. Your backend API must still authorize every read and write; client-side decisions are not a security boundary.

• InkLayer React: https://github.com/Laomai-codefee/inklayer-react
• Vue Starter: https://github.com/Laomai-codefee/inklayer-vue-starter
• React Starter: https://github.com/Laomai-codefee/inklayer-react-starter

The core InkLayer SDK is MIT licensed and free to use in personal and commercial projects.

• Questions and feature ideas: GitHub Discussions
• Bug reports: GitHub Issues
• Documentation: https://inklayer.dev/docs/vue

Community support is provided on a best-effort basis as maintainer time allows, without a guaranteed response time.

Contact the maintainer if your project needs:

• React or Vue integration and troubleshooting
• Annotation persistence and backend integration
• User, role, and workflow permission integration
• Custom features or support for another framework
• Ongoing maintenance and priority response for a private project

Email: codefee@foxmail.com

Please include your use case, technology stack, required capabilities, and target timeline.

InkLayer Vue is browser-only and does not support server-side rendering (SSR). Load it from a client entry point or a client-only component.

• Vue 3.5+
• Vite 5+ or Webpack 5
• ESM and CommonJS package entry points
• Standard package managers such as npm and pnpm; all runtime dependencies are declared by the package

When using an SSR framework such as Nuxt, disable server rendering for the component and import both the component and its styles on the client only.

MIT © InkLayer