Skip to content

README-en-US.md

Latest commit

 

History

History
148 lines (105 loc) · 3.41 KB

README-en-US.md

File metadata and controls

148 lines (105 loc) · 3.41 KB
Raw

InkLayer

InkLayer React

简体中文   |   English

🖊️ A React PDF viewer & annotation SDK built on PDF.js
For building document review, annotation, and commenting systems


🔥 Live Demo   |   📚 Docs   |   ⭐ GitHub

InkLayer React Screenshot

⭐ Quick Start (Recommended)

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

git clone https://github.com/Laomai-codefee/inklayer-react-starter.git
cd inklayer-react-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.

✨ Features

  • 🚀 PDF Viewer (zoom / search / theming)
  • 🖍️ PDF Annotation System (highlight / ink / shapes / stamps / signatures)
  • 💬 Comment & review workflow
  • 💾 Annotation data model (persistable)
  • 📤 Export support (PDF / Excel)
  • 🎨 Customizable UI (toolbar / sidebar)

📦 Installation

npm install inklayer-react

🚀 Basic Usage

PdfAnnotator (annotation)

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

export default function App() {
  return (
    <PdfAnnotator
      title="PDF Annotator"
      url="https://example.com/sample.pdf"
      user={{ id: 'u1', name: 'Alice' }}
      onSave={(annotations) => {
        console.log('Saved annotations:', annotations)
      }}
    />
  )
}

PdfViewer (viewer)

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

export default function App() {
  return (
    <PdfViewer
      title="PDF Viewer"
      url="https://example.com/sample.pdf"
      layoutStyle={{ width: '100vw', height: '100vh' }}
    />
  )
}

📖 API Docs

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

🔗 Related Projects

💬 Feedback

Questions? Feature requests? Drop by GitHub Discussions or email us: codefee@foxmail.com

Bug reports → GitHub Issues

📄 License

MIT © InkLayer