Log inSign up
stevekrouse
stevekrouseclipboard-inspector
Public
Like
clipboard-inspector
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
Search
README.md

Clipboard Debugger

A React-based single-page application that helps debug and inspect clipboard contents in detail.

Project Structure

├── backend/
│   └── index.ts             # Hono server for serving files
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main application component
│   │   ├── ClipboardReader.tsx       # Read/Clear buttons
│   │   ├── ClipboardResults.tsx      # Results container
│   │   ├── ClipboardItemDisplay.tsx  # Individual item display
│   │   ├── ClipboardDataDisplay.tsx  # Data type router
│   │   ├── TextDataDisplay.tsx       # Text content display
│   │   ├── ImageDataDisplay.tsx      # Image preview
│   │   ├── BinaryDataDisplay.tsx     # Binary hex dump
│   │   ├── ErrorMessage.tsx          # Error display
│   │   └── PermissionWarning.tsx     # Permission warning
│   ├── types/
│   │   └── clipboard.ts     # TypeScript interfaces
│   ├── index.html           # Main HTML template
│   └── index.tsx            # React entry point
└── README.md

Features

  • Multi-format Support: Reads all available MIME types from clipboard items
  • Text Analysis: Shows character count, line count, and full content for text data
  • Image Preview: Displays images directly in the browser with format information
  • Binary Data: Shows hex dump of binary data (first 256 bytes)
  • Permission Handling: Clear feedback about clipboard permissions
  • Error Handling: Comprehensive error messages and troubleshooting
  • React Architecture: Modular component structure with TypeScript

How to Use

  1. Copy something to your clipboard (text, image, or other data)
  2. Click "📖 Read Clipboard" button
  3. Grant permission when prompted by your browser
  4. View detailed information about your clipboard contents

Technical Details

  • Frontend: React 18.2.0 with TypeScript
  • Backend: Hono server for static file serving
  • Styling: Tailwind CSS via CDN
  • API: Modern Clipboard API (navigator.clipboard.read())
  • Security: Requires HTTPS or localhost
  • Architecture: Component-based with proper separation of concerns

Browser Compatibility

  • Chrome/Edge: Full support
  • Firefox: Limited support (text only in most versions)
  • Safari: Requires user gesture and may have limitations

Security Notes

  • Requires explicit user permission to access clipboard
  • Only works on HTTPS sites (or localhost for development)
  • No data is sent to any server - everything runs client-side
HTTP
Code