PSPDFKit · sashamilenkovic · Oct 27, 2025 · Oct 28, 2025 · Oct 29, 2025 · Oct 30, 2025
diff --git a/.gitignore b/.gitignore
@@ -42,4 +42,17 @@ Chart.lock
 # Ignore CLI configuration files
 .terraformrc
 terraform.rc
+
+# Node.js
 node_modules/
+
+# Lock files - users generate their own based on package manager
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+
+# Compiled TypeScript output (we use Vite, which compiles in-memory)
+# Ignore .js files in web examples where there's a corresponding .ts file
+web/**/index.js
+web/**/vite.config.js
+web/**/app.js
diff --git a/dws/index.html b/dws/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
-</html>
+</html>
diff --git a/dws/playground.mdx b/dws/playground.mdx
@@ -0,0 +1,7 @@
+---
+category: data-extraction
+title: Secure PDF Viewer with Table Extraction
+description: Secure PDF viewing and table extraction to Excel format using Nutrient DWS APIs with server-side API key management.
+keywords:
+  [table extraction, excel export, dws api, secure viewer, data conversion]
+---
diff --git a/dws/src/main.tsx b/dws/src/main.tsx
@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./app.tsx";
+
+const rootElement = document.getElementById("root");
+if (!rootElement) throw new Error("Root element not found");
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/dws/tsconfig.json b/dws/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/dws/tsconfig.node.json b/dws/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/dws/vite.config.js → dws/vite.config.ts b/dws/vite.config.js → dws/vite.config.ts
diff --git a/install-web-examples.sh b/install-web-examples.sh
@@ -0,0 +1,46 @@
+#!/bin/bash
+
+# Script to install dependencies in all web example directories
+
+set -e  # Exit on error
+
+echo "🚀 Installing dependencies for all web examples..."
+echo ""
+
+# Color codes for output
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+RED='\033[0;31m'
+NC='\033[0m' # No Color
+
+# Counter for success/failure
+SUCCESS_COUNT=0
+FAIL_COUNT=0
+TOTAL_COUNT=0
+
+# Find all directories with package.json under web/, excluding node_modules
+find web -name "package.json" -type f -not -path "*/node_modules/*" | while read -r package_file; do
+    dir=$(dirname "$package_file")
+    TOTAL_COUNT=$((TOTAL_COUNT + 1))
+
+    echo -e "${BLUE}📦 Installing in: $dir${NC}"
+
+    if (cd "$dir" && npm install --loglevel=error); then
+        echo -e "${GREEN}✅ Success: $dir${NC}"
+        SUCCESS_COUNT=$((SUCCESS_COUNT + 1))
+        echo ""
+    else
+        echo -e "${RED}❌ Failed: $dir${NC}"
+        FAIL_COUNT=$((FAIL_COUNT + 1))
+        echo ""
+    fi
+done
+
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo -e "${GREEN}Installation complete!${NC}"
+echo "Total directories: $TOTAL_COUNT"
+echo -e "${GREEN}Successful: $SUCCESS_COUNT${NC}"
+if [ $FAIL_COUNT -gt 0 ]; then
+    echo -e "${RED}Failed: $FAIL_COUNT${NC}"
+fi
+
diff --git a/package.json b/package.json
@@ -1,18 +1,34 @@
 {
-  "devDependencies": {
-    "@biomejs/biome": "^2.2.4",
-    "@eslint/js": "^9.18.0",
-    "husky": "^9.1.7",
-    "lint-staged": "^15.4.1"
-  },
+  "name": "awesome-nutrient",
+  "version": "1.0.0",
+  "description": "A curated list of awesome Nutrient code samples, libraries, and resources",
+  "main": "index.js",
   "scripts": {
-    "format": "biome check --unsafe --write .",
-    "prepare": "husky",
-    "lint-staged": "lint-staged"
+    "install-web-examples": "./install-web-examples.sh",
+    "typecheck": "./typecheck-web-examples.sh",
+    "typecheck:web": "./typecheck-web-examples.sh",
+    "lint-staged": "lint-staged",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "lint-staged": {
-    "*": [
+    "*.{js,ts,tsx,jsx,json,css,html}": [
       "biome check --write --no-errors-on-unmatched"
     ]
-  }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nutrient-io/awesome-nutrient.git"
+  },
+  "keywords": [
+    "nutrient",
+    "pspdfkit",
+    "pdf",
+    "examples"
+  ],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/nutrient-io/awesome-nutrient/issues"
+  },
+  "homepage": "https://github.com/nutrient-io/awesome-nutrient#readme"
 }
diff --git a/typecheck-web-examples.sh b/typecheck-web-examples.sh
@@ -0,0 +1,80 @@
+#!/bin/bash
+
+# Color codes for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+echo -e "${BLUE}========================================${NC}"
+echo -e "${BLUE}🔍 TypeChecking All Web Examples${NC}"
+echo -e "${BLUE}========================================${NC}\n"
+
+# Initialize counters
+TOTAL=0
+PASSED=0
+FAILED=0
+FAILED_PROJECTS=()
+
+# Find all directories with tsconfig.json in the web directory
+while IFS= read -r -d '' tsconfig_path; do
+    # Get the directory containing tsconfig.json
+    dir=$(dirname "$tsconfig_path")
+
+    # Skip node_modules directories
+    if [[ "$dir" == *"node_modules"* ]]; then
+        continue
+    fi
+
+    # Get a nice relative path for display
+    relative_path=$(echo "$dir" | sed "s|$(pwd)/||")
+
+    TOTAL=$((TOTAL + 1))
+
+    echo -e "${YELLOW}📦 Checking: ${NC}$relative_path"
+
+    # Run TypeScript compiler in noEmit mode
+    cd "$dir" || continue
+
+    if npx tsc --noEmit 2>&1 | tee /tmp/tsc_output_$$.txt | grep -q "error TS"; then
+        echo -e "${RED}❌ FAILED${NC}\n"
+        FAILED=$((FAILED + 1))
+        FAILED_PROJECTS+=("$relative_path")
+
+        # Show the errors
+        cat /tmp/tsc_output_$$.txt
+        echo ""
+    else
+        echo -e "${GREEN}✅ PASSED${NC}\n"
+        PASSED=$((PASSED + 1))
+    fi
+
+    # Clean up temp file
+    rm -f /tmp/tsc_output_$$.txt
+
+    # Return to original directory
+    cd - > /dev/null || exit
+
+done < <(find web -name "tsconfig.json" -type f -print0)
+
+# Print summary
+echo -e "${BLUE}========================================${NC}"
+echo -e "${BLUE}📊 TypeCheck Summary${NC}"
+echo -e "${BLUE}========================================${NC}"
+echo -e "Total projects checked: ${BLUE}$TOTAL${NC}"
+echo -e "Passed: ${GREEN}$PASSED${NC}"
+echo -e "Failed: ${RED}$FAILED${NC}"
+
+if [ $FAILED -gt 0 ]; then
+    echo -e "\n${RED}Failed projects:${NC}"
+    for project in "${FAILED_PROJECTS[@]}"; do
+        echo -e "  ${RED}•${NC} $project"
+    done
+    echo -e "\n${RED}❌ TypeCheck failed with errors${NC}"
+    exit 1
+else
+    echo -e "\n${GREEN}🎉 All projects passed TypeCheck!${NC}"
+    exit 0
+fi
+
diff --git a/web/annotation/comment-annotations/global.d.ts b/web/annotation/comment-annotations/global.d.ts
@@ -0,0 +1,10 @@
+import type NutrientViewer from "@nutrient-sdk/viewer";
+
+declare global {
+  interface Window {
+    // Nutrient Web SDK loaded via CDN
+    NutrientViewer: typeof NutrientViewer;
+  }
+}
+
+export {};
diff --git a/web/annotation/comment-annotations/index.html b/web/annotation/comment-annotations/index.html
@@ -8,7 +8,7 @@
   <body>
     <h1>Annotation Comments Example</h1>
     <div id="nutrient-viewer" style="width: 100%; height: 100vh"></div>
-    <script type="module" src="index.js"></script>
-    <script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.5.0/nutrient-viewer.js"></script>
+    <script type="module" src="index.ts"></script>
+    <script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.8.0/nutrient-viewer.js"></script>
   </body>
 </html>