Skip to main content

Getting Started

Installation​

npm install doclens    # npm
pnpm add doclens       # pnpm
yarn add doclens       # yarn

Optional peer dependencies​

Install only the renderers you need — doclens lazy-loads them at runtime:

npm install pdfnova          # PDF (PDFium-powered, Chrome-grade)
npm install xlsx             # Excel (XLSX/XLS)
npm install papaparse        # CSV
npm install mammoth          # Word (DOCX)
npm install marked           # Markdown
npm install tesseract.js     # OCR (search text in images / scanned PDFs)

If a dependency is not installed, the viewer shows a helpful error message for that format. All other formats continue to work.

Your First Viewer​

import { DocViewer } from 'doclens';

function App() {
  return (
    <DocViewer
      document={{ uri: '/report.pdf', fileName: 'Q4 Report.pdf' }}
      height={700}
    />
  );
}

Search on Load​

Pass initialSearchTerms to highlight terms as soon as the document renders. The viewer scrolls to the first match automatically.

<DocViewer
  document={{ uri: '/contract.pdf' }}
  initialSearchTerms={['liability', 'indemnification', 'termination']}
/>

Each term gets a distinct highlight color (5 built-in colors, customizable via CSS).

Dark Mode​

<DocViewer document={{ uri: '/report.pdf' }} theme="dark" />

Multi-Document Tabs​

<DocViewer
  documents={[
    { uri: '/report.pdf', fileName: 'Report.pdf' },
    { uri: '/data.xlsx', fileName: 'Data.xlsx' },
    { uri: '/notes.md', fileName: 'Notes.md' },
  ]}
  activeDocument={0}
  onDocumentChange={(index, doc) => console.log('Switched to', doc.fileName)}
/>

Handling Events​

<DocViewer
  document={{ uri: '/report.pdf' }}
  onDocumentLoad={(meta) => {
    console.log(`Loaded ${meta.fileName} (${meta.pageCount} pages)`);
  }}
  onError={(err) => console.error(err)}
  onSearchChange={(query, results) => {
    console.log(`"${query}": ${results.length} matches`);
  }}
/>

Drag and Drop​

function App() {
  const [doc, setDoc] = useState(null);

  return (
    <DocViewer
      document={doc}
      onDrop={(files) => {
        const file = files[0];
        setDoc({ fileData: file, fileName: file.name, fileType: file.type });
      }}
    />
  );
}

Next Steps​