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

├── 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

• 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

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

• 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

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

• 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