Skip to content

Add Nutrient Web SDK demo: full host-app shell around the viewer #193

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MahmoudElsayad wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Add Nutrient Web SDK demo: full host-app shell around the viewer #193

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
53cfcee
Add Nutrient Web SDK demo app (React + Vite)
MahmoudElsayad May 16, 2026
e9f1109
Merge branch 'master' into mahmoud/demo-example
MahmoudElsayad Jun 2, 2026
4f92792
Address web SDK demo review feedback
MahmoudElsayad Jun 11, 2026
96e5f8b
Merge branch 'master' into mahmoud/demo-example
MahmoudElsayad Jun 16, 2026
8692f9c
Fix Biome accessibility errors
MahmoudElsayad Jun 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions biome.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",

Check notice on line 2 in biome.json

View workflow job for this annotation

GitHub Actions / quality

deserialize 

The configuration schema version does not match the CLI version 2.4.16

Check notice on line 2 in biome.json

View workflow job for this annotation

GitHub Actions / quality

deserialize 

The configuration schema version does not match the CLI version 2.4.16
"vcs": {
"enabled": false,
"clientKind": "git",
Expand All @@ -23,6 +23,7 @@
"!web/signing/signing-demo-complete",
"!web/signing/sign-here-upgraded",
"!web/viewer/multi-tab",
"!web/viewer/web-sdk-demo",
"!playground/form-creator",
"!web/document-generator-vanillajs",
"!windows/pspdfkit-with-winui3"
Expand Down
9 changes: 9 additions & 0 deletions web/viewer/web-sdk-demo/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
node_modules
dist
.env
.env.local
.env.development
.env.development.local
*.log
.DS_Store
*.tsbuildinfo
73 changes: 73 additions & 0 deletions web/viewer/web-sdk-demo/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
# Nutrient Web SDK Demo

A complete Vite + React + TypeScript app showcasing a custom shell around the Nutrient Web SDK:

- A side file explorer with drag-and-drop PDF uploads
- A fully custom top toolbar (page navigation, rotate, move/add/delete pages, search, zoom, download)
- A floating, draggable **ink** toolbar with a colour grid and stroke width picker
- A floating, draggable **text** toolbar (font colour, size, bold/italic, alignment)
- A signing flow: signer management, drag-and-drop placement of signature/initials/auto-fill/standard fields, and a draw/type/upload/saved signature modal
- A custom Form Creator property editor mounted into the SDK's slot
- A shared Baseline UI dark theme applied to both the host app and the SDK iframe

## Run

```bash
npm install
npm run dev
```

Open <http://localhost:5173>.

The SDK is loaded via the `<script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.15.0/nutrient-viewer.js">` tag in `index.html`, so no `pspdfkit-lib` copy step is required. The SDK auto-detects its asset `baseUrl` from the script's origin.

> **Important:** The grouped UI customization slots used by this demo (`tools.main`, `signatures.create`, `formCreator.propertyEditor`, etc.) were introduced in **Web SDK 1.14**. Older CDN versions (e.g. 1.5, 1.9) reject this config with "`tools` is not a valid UI element". Stick to 1.14+ unless you adapt `src/NutrientViewer.tsx` to the older flat slot names.

### License key

Trial mode works out of the box. To run with a license, create `.env.development`:

```bash
VITE_LICENSE_KEY=your-license-key-here
```

## Project layout

```
src/
App.tsx Orchestrates UI state
NutrientViewer.tsx SDK wiring (load, unload, setUI, theme, slot bridges)
Toolbar.tsx Custom top toolbar
FileExplorer.tsx Sidebar with drag-and-drop PDF uploads
main.tsx React root + ThemeProvider
theme.ts Baseline UI dark theme (shared with the SDK iframe)
styles.css Demo shell styles

form-creator/ Custom Form Creator property editor + tooltip buttons
index.ts

ink/InkToolbar.tsx Floating draw-mode toolbar
text/TextToolbar.tsx Floating text-mode toolbar

signing/
SignersPanel.tsx Side panel with field tray and signer dropdown
SignersModal.tsx Manage signers
SigningModal.tsx Draw / type / upload / pick a saved signature
storage.ts localStorage layer for signers + saved signatures
signatureTarget.ts Page-space targeting for inserted signatures

lib/
selection.ts Selection-shape normalization
color.ts Hex → SDK Color
sdk.ts Misc SDK helpers (FORM_CREATOR detection, Immutable.List)
icons.tsx Shared React SVG icons

types/ Local type declarations for the window.NutrientViewer global
```

## Build

```bash
npm run build
npm run preview
```
13 changes: 13 additions & 0 deletions web/viewer/web-sdk-demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nutrient Web SDK Demo</title>
<script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.15.0/nutrient-viewer.js"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Loading
Loading