NoteHand 📝✨

High-Performance Infinite Whiteboard & Interactive Coding Workspace

NoteHand is a premium, offline-first digital whiteboard, sketchbook, and note-taking application. Designed for fluid, real-time drawing on desktop, mobile, and tablet devices, it brings a native-app-like experience to the browser. Unique to NoteHand is a side-by-side virtual container workspace IDE that lets you write code, run simulated Ubuntu terminal tasks, and cast code snippets directly onto your vector canvas pages.

---

🌐 Explore Live Demo | 🛠️ Self-Hosting Guide | 📖 Contribution Guidelines | 💬 Community Discussions

---

📸 Workspace Previews

Desktop Mode & Live IDE Workspace

Tablet Workspace

Mobile Workspace

---

🚀 Features

• 🎨 Infinite Canvas & Templates: Seamless vertical and horizontal panning. True A4 aspect-ratio pages. Supports lined, grid, dotted, and blank paper templates with customizable line coloring.
• 💻 Developer IDE & Sandbox Terminal: Simulated Ubuntu terminal runtime. Run Node, Python, and Docker composer layers in a side-by-side terminal, write configuration scripts, and cast styled snippets directly onto your drawing paper.
• ✏️ Advanced Vector Drawing Tools: Pressure-responsive stylus capabilities, custom highlighter transparency mode, proximity-based stroke eraser, and 7 vector shapes (rect, circle, triangle, star, polygon, line, arrow).
• 🗂️ Dynamic Layers & Objects Panel: Manage canvas hierarchy via drag-and-drop. Rename elements, lock/unlock editing permissions, toggle visibility, rotate, scale, flip, and crop images.
• 📱 Robust Touch & Gesture Engine: Friction-free single-finger panning, multi-touch pinch-zoom, and native-like long-press context menus. Protected by smart pointer-desync and stale gesture handlers.
• 🌐 PWA & Offline Capability: Progressive Web App supporting full offline boot, asset caching, and a service worker intercept system that deletes Permissions-Policy browser warnings.
• 🔒 Enterprise Security Sanitizer: Strict SVG Parser and DOMPurify wrapper that cleans code injections (javascript: protocols, inline events, and foreignObjects) from imported media.
• 💾 Zod Local Storage Boundary: Complete schema validator verifying local database files and options prior to hydration to avoid client corruption.

---

🌐 Deployed on Netlify

This project is deployed and hosted on Netlify. We proudly support Netlify's high-speed global edge network to deliver low-latency collaborative note-taking to developers around the world.

---

⚡ Live Demo

• Production Deployment: https://notehand.app
• Staging / Dev Server: Available locally on port 3000 during run.

---

🛠️ Technology Stack

Component	Technology	Version	Purpose
Framework	React	19.0.1	Concurrent render scheduler & state hooks
Language	TypeScript	~5.8.2	Strong compiler-safety
Styling	Tailwind CSS + CSS3	^4.1.14	Styling layout and GPU-accelerated transforms
Bundler	Vite	^6.2.3	Hot Module Replacement (HMR) and build splitting
PWA Compiler	vite-plugin-pwa	^1.3.0	Precaching manifest generation
Security Layer	DOMPurify + Zod	^3.4.8 / ^4.4.3	SVG tag cleaning & LocalStorage schema validation
Document Export	jsPDF / JSZip	^4.2.1 / ^3.10.1	Print-perfect high-DPI exports

---

📂 Project Structure

├── .env.example          # Template configuration for key bindings
├── package.json          # Build definitions, dependencies, and tool scripts
├── vite.config.ts        # Bundler configuration, CSP headers, and PWA options
├── netlify.toml          # Production deployment route redirects and security rules
├── index.html            # Main markup page template and preloaded font hooks
├── scripts/
│   └── generate-seo.js   # Dynamic builder script for robots.txt and sitemaps
├── public/
│   ├── _headers          # Custom Netlify response headers
│   ├── custom-sw.js      # Service Worker routing intercepts
│   ├── og-image.png      # Social open graph preview image card
│   └── icons/            # App icons and favicons
└── src/
    ├── main.tsx          # Client entrypoint and service worker mount
    ├── App.tsx           # App shell: file handlers, panels toggles, and layout
    ├── types.ts          # Shared TypeScript type signatures
    ├── index.css         # Custom typography and canvas templates styling
    ├── components/       # Visual interface widgets
    │   ├── A4Paper.tsx          # Canvas interaction: touch events, pen, shapes
    │   ├── WorkspaceIDE.tsx     # Simulated Ubuntu terminal sandbox panel
    │   ├── DockerConfigPanel.tsx# Local self-hosting configuration exporter
    │   ├── LayerPanel.tsx       # Layers organizer, renamer, and lock controls
    │   ├── PageSidebar.tsx      # Page thumbnails sidebar navigation
    │   └── Toolbar.tsx          # Paper style select, tool options header
    ├── hooks/            # Custom React hooks
    │   ├── useDeviceType.ts     # Screen responsive breakpoints parser
    │   └── useKeyboardHeight.ts # Calculates virtual keyboard viewport heights
    ├── security/         # Data validators and sanitization guards
    │   ├── constants.ts         # Boundary limitation sizes
    │   ├── sanitizer.ts         # SVG parser cleaner and image processor
    │   └── validation.ts        # LocalStorage validator schemas powered by Zod
    └── utils/            # Shared helper functions
        ├── analytics.ts         # Google Analytics tracking events
        └── textUtils.ts         # Simulated fonts coordinate calculations

---

⚙️ Configuration

Copy the sample environment file to configure NoteHand:

cp .env.example .env.local

Environment Variables

🔍 View Environment Variables Details

Variable	Description	Default / Example	Required
GEMINI_API_KEY	Required for server-side Gemini AI features.	YOUR_API_KEY	Optional
APP_URL	Self-referential URL where the site is hosted.	https://notehand.app	Optional
VITE_GOOGLE_SCRIPT_URL	Target Google Apps Script URL for emailing features.	https://script.google.com/...	Optional
VITE_MAIL_SECRET	Secret key used to sign email packets.	NOTEHAND_SECRET_2025	Optional
VITE_GA_MEASUREMENT_ID	Google Analytics 4 Measurement Tag ID.	G-XXXXXXXXXX	Optional

---

📦 Scripts

Run the following commands defined in the package.json:

Command	Purpose	Command Description
npm run dev	Start Dev Server	Spins up the Vite server on port 3000 with HMR enabled.
npm run build	Production Compile	Bundles static assets, compiles TypeScript, and runs generate-seo.js.
npm run preview	Preview Build	Starts a local server to test the production build directory.
npm run clean	Wipe Assets	Removes the build folder (/dist) and temporary scripts.
npm run lint	Code Linting	Runs TypeScript checking compiler in non-emitting mode (tsc --noEmit).
npm run security:check	Vulnerability check	Performs npm audit and full TypeScript type checks.

---

🏗️ Architecture

NoteHand utilizes a split, high-frequency synchronization architecture designed to handle complex sketching interactions alongside web development tooling:

graph TD
    A[App.tsx State Controller] -->|Sync Settings & Pages| B[A4Paper Canvas Engine]
    A -->|Add Code Snippet| C[WorkspaceIDE Panel]
    B -->|Direct Canvas Context Ref| D[High-DPI backing layer]
    C -->|Simulate Scripts| E[Ubuntu Sandbox Console]
    F[Zod Validation Boundary] -->|Strict Schemas| G[LocalStorage persistence]
    H[Security Sanitizer Guard] -->|MIME/SVG Purifier| B

Loading

1. State Controller Layer (App.tsx): Coordinates multi-page file structures, selects active page layouts, triggers bottom sheet navigation drawers, and handles standard clipboard events.
2. Interaction Engine (A4Paper.tsx): Hooks directly into pointer events using React Refs (currentStrokeRef, activePointersRef). High-frequency events (like drawing and lasso drawing) skip React's re-render cycle, updating the DOM and high-DPI canvas overlay directly at 60fps.
3. Security Sanitization Boundary (src/security/): LocalStorage is strictly parsed through Zod schemas before being hydrated into React state. Imported images and SVGs are cleaned with DOMPurify to eliminate Cross-Site Scripting (XSS).

---

📱 Progressive Web App & Offline

Note

NoteHand is built to function fully offline. Its offline architecture includes:

• Asset Precaching: VitePWA bundles static resources (index.html, javascript files, fonts, and stylesheets) inside cache storage.
• Custom Service Worker extension (custom-sw.js): Intercepts navigation requests to serve index.html cache-first. It dynamically strips Permissions-Policy response headers, resolving standard browser console security warnings when launching offline.
• Third-party Font caching: Font files from fonts.gstatic.com are stored using a CacheFirst strategy with a 1-year expiration date, while stylesheets use StaleWhileRevalidate.

---

🔐 Security Features

Important

• HTML & SVG Purifier: Incoming SVGs are parsed through DOMParser and fully cleaned with DOMPurify. Elements like <script>, <foreignObject>, <embed>, inline event handlers (onclick, onload), and javascript: protocol URLs are stripped.
• MIME and Dimensions constraint: Normal images are checked to ensure size does not exceed 5MB (1MB for SVGs) and dimension layout does not exceed 4096px (4K resolution).
• Strict Content Security Policy (CSP): The application contains a restrictive CSP that limits script loading to 'self' and registered endpoints (Google Analytics, Netlify insights, Google Script URL), preventing unauthorized external script execution.

---

🐳 Docker & Ubuntu Self-Hosting

NoteHand is fully optimized for local hosting using a multi-container Docker compose environment.

🐳 View Docker Self-Hosting Guide

Prerequisites

sudo apt update
sudo apt install docker.io docker-compose -y
sudo usermod -aG docker $USER

Note: Log out and log back in to apply docker user groups.

Spin up Stack

1. Create your workspace directory:

   mkdir -p ~/notehand-workspace && cd ~/notehand-workspace

2. Export docker-compose.yml and .env configs from the Docker setups panel in the app's IDE.
3. Boot the environment:

   docker-compose up -d --build

NoteHand will start running on http://localhost:3000, with a PostgreSQL database on 5432 and a Redis replication cache on 6379.

---

📊 Performance Optimizations

Tip

• 60FPS Interaction Loops: Cursor pointer move listener writes coordinates directly to React refs and canvas element context rather than updating React components state, avoiding CPU-heavy frame drops.
• Smart Code Splitting: Code compiler uses Vite's manualChunks configurations, isolating react vendor utilities, lucide icons, and framer motion layers into independent cached files.
• GPU Render Acceleration: Drawing sheets transformations utilize accelerated CSS 3D transforms (translate3d, scale) to reduce layout reflow delays.

---

🌐 SEO and Search indexing

• JSON-LD Metadata: Fully optimized structured schema on index.html detailing organization, website, and software application category schemas.
• Automated SEO compiler: The build step runs scripts/generate-seo.js which dynamically generates robots.txt and sitemap.xml based on the compiled package version.

---

💻 Browser Support

NoteHand supports modern web browsers with full HTML5 Canvas, Pointer Events, and Service Worker support.

🖥️ View Supported Browsers

Browser	Supported Versions	Notes
Google Chrome	v90+	Full support, optimal performance
Apple Safari	v15.4+	Fully supports iPad pencil pressure features
Mozilla Firefox	v90+	Full support, HWA-accelerated
Microsoft Edge	v90+	Chromium-supported

---

🗺️ Roadmap

• Multi-page A4 canvas drawing & paper styles template settings.
• Pressure-sensitive stylus stroke calculations.
• Simulated IDE remote coding container terminal panels.
• Local storage type protection schemas.
• SVG sanitize parsers.
• Collaborative whiteboard rooms using WebSockets (socket.io).
• Native drawing shapes auto-recognition logic.

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

👤 Author

Md. Ruhan Karim (mdruhankarim)

• Website: https://notehand.app
• GitHub: @mdruhankarim

---

🤝 Support & Feedback

If you encounter bugs, need help with deployment, or want to suggest new features:

• Open an issue on GitHub Issues
• Start a discussion thread under GitHub Discussions
• Check the SECURITY.md guidelines if you need to report vulnerabilities.