|
| 1 | +# Nutrient Web SDK Demo |
| 2 | + |
| 3 | +A complete Vite + React + TypeScript app showcasing a custom shell around the Nutrient Web SDK: |
| 4 | + |
| 5 | +- A side file explorer with drag-and-drop PDF uploads |
| 6 | +- A fully custom top toolbar (page navigation, rotate, move/add/delete pages, search, zoom, download) |
| 7 | +- A floating, draggable **ink** toolbar with a colour grid and stroke width picker |
| 8 | +- A floating, draggable **text** toolbar (font colour, size, bold/italic, alignment) |
| 9 | +- A signing flow: signer management, drag-and-drop placement of signature/initials/auto-fill/standard fields, and a draw/type/upload/saved signature modal |
| 10 | +- A custom Form Creator property editor mounted into the SDK's slot |
| 11 | +- A shared Baseline UI dark theme applied to both the host app and the SDK iframe |
| 12 | + |
| 13 | +## Run |
| 14 | + |
| 15 | +```bash |
| 16 | +npm install |
| 17 | +npm run dev |
| 18 | +``` |
| 19 | + |
| 20 | +Open <http://localhost:5173>. |
| 21 | + |
| 22 | +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. |
| 23 | + |
| 24 | +> **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. |
| 25 | +
|
| 26 | +### License key |
| 27 | + |
| 28 | +Trial mode works out of the box. To run with a license, create `.env.development`: |
| 29 | + |
| 30 | +```bash |
| 31 | +VITE_LICENSE_KEY=your-license-key-here |
| 32 | +``` |
| 33 | + |
| 34 | +## Project layout |
| 35 | + |
| 36 | +``` |
| 37 | +src/ |
| 38 | + App.tsx Orchestrates UI state |
| 39 | + NutrientViewer.tsx SDK wiring (load, unload, setUI, theme, slot bridges) |
| 40 | + Toolbar.tsx Custom top toolbar |
| 41 | + FileExplorer.tsx Sidebar with drag-and-drop PDF uploads |
| 42 | + main.tsx React root + ThemeProvider |
| 43 | + theme.ts Baseline UI dark theme (shared with the SDK iframe) |
| 44 | + styles.css Demo shell styles |
| 45 | +
|
| 46 | + form-creator/ Custom Form Creator property editor + tooltip buttons |
| 47 | + index.ts |
| 48 | +
|
| 49 | + ink/InkToolbar.tsx Floating draw-mode toolbar |
| 50 | + text/TextToolbar.tsx Floating text-mode toolbar |
| 51 | +
|
| 52 | + signing/ |
| 53 | + SignersPanel.tsx Side panel with field tray and signer dropdown |
| 54 | + SignersModal.tsx Manage signers |
| 55 | + SigningModal.tsx Draw / type / upload / pick a saved signature |
| 56 | + storage.ts localStorage layer for signers + saved signatures |
| 57 | + signatureTarget.ts Page-space targeting for inserted signatures |
| 58 | +
|
| 59 | + lib/ |
| 60 | + selection.ts Selection-shape normalization |
| 61 | + color.ts Hex → SDK Color |
| 62 | + sdk.ts Misc SDK helpers (FORM_CREATOR detection, Immutable.List) |
| 63 | + icons.tsx Shared React SVG icons |
| 64 | +
|
| 65 | + types/ Local type declarations for the window.NutrientViewer global |
| 66 | +``` |
| 67 | + |
| 68 | +## Build |
| 69 | + |
| 70 | +```bash |
| 71 | +npm run build |
| 72 | +npm run preview |
| 73 | +``` |
0 commit comments