CloakShare
Secure document viewer
in one line of code
Watermarks, email gates, and view tracking. Free for PDF & images. No API key needed. Works in React, Vue, Svelte, Angular, and vanilla HTML.
$ npm install @cloakshare/viewer
<!-- That's it. One tag. -->
<cloak-viewer
src="/deck.pdf"
watermark="Confidential"
email-gate
/>Try it live
Edit the code on the left. The viewer updates in real time on the right.
<cloak-viewer
src="/sample.pdf"
watermark="{{email}} · {{date}}"
branding
/>Free forever. Pay when you need more.
PDF and image support runs entirely client-side. No API key, no server, no cost. Office docs and video require server-side processing via the CloakShare API.
Client-side rendering
- + PDF viewing (lazy-loaded PDF.js)
- + Image viewing (PNG, JPG, WebP, GIF, SVG)
- + Canvas watermarks with templates
- + Client-side email gate
- + Client-side password protection
- + Print and right-click protection
- + Link expiry (with server time check)
- + Client-side view events
npm install @cloakshare/viewer + Server-side processing
- + Office docs (DOCX, PPTX, XLSX)
- + Video (MP4, MOV, WebM + HLS streaming)
- + Server-burned watermarks (unremovable)
- + Server-verified email gate
- + Server-verified password
- + Analytics dashboard + webhooks
- + Custom domains and team management
- + 50 links/mo + 500 views/mo free
Everything you need
DocSend features in an npm package. No SaaS lock-in.
Watermarking
Tiled diagonal watermarks with {{email}}, {{date}}, and {{session_id}} template variables. Canvas-rendered, not CSS overlay.
Email Gate
Require viewers to enter their email before viewing. Stored in localStorage for return visits. Pre-fill via prop if you know the user.
Password Protection
Optional password gate before document access. Client-side for free tier, server-verified with API key.
Canvas Rendering
Documents render to HTML Canvas, not DOM. Prevents select-all copy and makes screenshots harder.
Print Protection
CSS @media print hides the viewer. Right-click and drag are disabled. Deters casual sharing.
Link Expiry
Set an ISO 8601 expiry date. Server time fetch prevents clock tampering. API-connected mode enforces server-side.
Page Analytics
Track which pages were viewed, time per page, scroll depth, and device type. Client events free, dashboard with API.
Webhook Events
cloak:view, cloak:ready, cloak:error, cloak:email-submitted — wire up your own tracking or CRM integration.
Dark & Light Themes
Dark mode by default. Light theme via theme="light" attribute. Both with full color system.
Framework Agnostic
Web Component works in React, Vue, Svelte, Angular, and vanilla HTML. Zero framework lock-in.
Custom Branding
"Secured by CloakShare" badge included free. Remove it on Starter plan and above.
Accessible
Keyboard navigation, ARIA labels, screen reader announcements, focus management, and prefers-reduced-motion support.
Works everywhere
Web Component with framework wrappers. Same API, any stack.
import { CloakViewer } from '@cloakshare/react';
<CloakViewer
src="/deck.pdf"
watermark="Confidential"
emailGate
onView=
/><script setup>
import '@cloakshare/viewer';
</script>
<template>
<cloak-viewer
src="/deck.pdf"
watermark="Confidential"
email-gate
/>
</template><script src="https://unpkg.com/
@cloakshare/viewer"></script>
<cloak-viewer
src="/deck.pdf"
watermark="Confidential"
email-gate
></cloak-viewer><!-- Web Components work natively -->
import '@cloakshare/viewer';
<cloak-viewer
src="/deck.pdf"
watermark="Confidential"
email-gate
/>How it compares
No npm package combines viewing + watermarks + email gates + tracking. Until now.
| Feature | CloakViewer | DocSend | Papermark | react-pdf | PDF.js |
|---|---|---|---|---|---|
| Embeddable component | ✓ | — | — | ✓ | ✓ |
| Watermarking | ✓ | ✓ | ✓ | — | — |
| Email gate | ✓ | ✓ | ✓ | — | — |
| View tracking | ✓ | ✓ | ✓ | — | — |
| Office docs | API | ✓ | ✓ | — | — |
| Video | API | ✓ | — | — | — |
| Self-hostable | ✓ | — | ✓ | — | — |
| Open source | MIT | — | AGPL | MIT | Apache |
| Starting price | Free | $45/user | $59/mo | Free | Free |
Honest bundle sizes
We don't hide the real cost. Here's exactly what loads.
Web Component, watermark engine, email gate, toolbar, theme. Loads on page init.
PDF.js — lazy-loaded only when src is a .pdf file. Never loads for images or API mode. Use renderer="external" if your app already has PDF.js.
Uses native Canvas API. Zero additional JavaScript.
Get started in 30 seconds
Install the package. Add the tag. Ship secure documents.
# Install
$ npm install @cloakshare/viewer
# Use in your HTML
<script type="module">
import '@cloakshare/viewer';
</script>
<cloak-viewer
src="/your-document.pdf"
watermark="{{email}} · {{date}}"
email-gate
/>