\n 📋 Clipboard Debugger\n

\n\n

\n \n 📖 Read Clipboard\n \n \n 🗑️ Clear Results\n \n

\n\n

\n\n \n

\n ⚠️ Permission Required: This app needs clipboard\n access. Please click \"Allow\" when prompted, or check your browser's\n permission settings.\n

\n\n \n

\n \n\n

\n \n\n \n \n",[149],"202775cc-60e7-11f0-80b3-0224a6c84d84","README.md","2027768a-60e7-11f0-80b3-0224a6c84d84",["D",1752520624159],"# Clipboard Debugger\n\nA single-page application that helps debug and inspect clipboard contents in detail.\n\n## Features\n\n- **Multi-format Support**: Reads all available MIME types from clipboard items\n- **Text Analysis**: Shows character count, line count, and full content for text data\n- **Image Preview**: Displays images directly in the browser with format information\n- **Binary Data**: Shows hex dump of binary data (first 256 bytes)\n- **Permission Handling**: Clear feedback about clipboard permissions\n- **Error Handling**: Comprehensive error messages and troubleshooting\n\n## How to Use\n\n1. Copy something to your clipboard (text, image, or other data)\n2. Click \"📖 Read Clipboard\" button\n3. Grant permission when prompted by your browser\n4. View detailed information about your clipboard contents\n\n## Technical Details\n\n- Uses the modern Clipboard API (`navigator.clipboard.read()`)\n- Requires HTTPS or localhost for security\n- Shows all available MIME types for each clipboard item\n- Handles multiple clipboard items if supported by the browser\n- Responsive design with Tailwind CSS\n\n## Browser Compatibility\n\n- Chrome/Edge: Full support\n- Firefox: Limited support (text only in most versions)\n- Safari: Requires user gesture and may have limitations\n\n## Security Notes\n\n- Requires explicit user permission to access clipboard\n- Only works on HTTPS sites (or localhost for development)\n- No data is sent to any server - everything runs client-side",[156],"89ca9ebe-60e7-11f0-8adb-0224a6c84d84","frontend","ab3bce3e-aa98-4ed4-8a19-990516ed78ba",10,["D",1752520801389],[162],"pulls","branches",1,"forks","envVars",{"_175":68,"_177":68},"connections",{"_175":68,"_176":68},"count","unfilledCount","emptyCount",{"_49":161,"_32":162,"_30":163,"_139":-5,"_40":41,"_39":164,"_141":64,"_37":315,"_13":68,"_34":35,"_36":-5,"_24":25,"_146":-5,"_198":316,"_27":317},{"_49":311,"_32":238,"_30":232,"_139":163,"_40":41,"_39":306,"_141":64,"_37":312,"_13":68,"_34":35,"_36":-5,"_24":25,"_146":-5,"_198":313,"_27":314},{"_49":303,"_32":304,"_30":305,"_139":232,"_40":41,"_39":306,"_141":64,"_37":307,"_13":68,"_34":46,"_36":308,"_24":25,"_146":-5,"_198":309,"_27":310},{"_49":295,"_32":296,"_30":297,"_139":232,"_40":41,"_39":298,"_141":64,"_37":299,"_13":68,"_34":46,"_36":300,"_24":25,"_146":-5,"_198":301,"_27":302},{"_49":287,"_32":288,"_30":289,"_139":232,"_40":41,"_39":290,"_141":64,"_37":291,"_13":68,"_34":46,"_36":292,"_24":25,"_146":-5,"_198":293,"_27":294},{"_49":279,"_32":280,"_30":281,"_139":232,"_40":41,"_39":282,"_141":64,"_37":283,"_13":68,"_34":46,"_36":284,"_24":25,"_146":-5,"_198":285,"_27":286},{"_49":271,"_32":272,"_30":273,"_139":232,"_40":41,"_39":274,"_141":64,"_37":275,"_13":68,"_34":46,"_36":276,"_24":25,"_146":-5,"_198":277,"_27":278},{"_49":263,"_32":264,"_30":265,"_139":232,"_40":41,"_39":266,"_141":64,"_37":267,"_13":68,"_34":46,"_36":268,"_24":25,"_146":-5,"_198":269,"_27":270},{"_49":255,"_32":256,"_30":257,"_139":232,"_40":41,"_39":258,"_141":64,"_37":259,"_13":68,"_34":46,"_36":260,"_24":25,"_146":-5,"_198":261,"_27":262},{"_49":247,"_32":248,"_30":249,"_139":232,"_40":41,"_39":250,"_141":64,"_37":251,"_13":68,"_34":46,"_36":252,"_24":25,"_146":-5,"_198":253,"_27":254},{"_49":239,"_32":240,"_30":241,"_139":232,"_40":41,"_39":242,"_141":64,"_37":243,"_13":68,"_34":46,"_36":244,"_24":25,"_146":-5,"_198":245,"_27":246},{"_49":229,"_32":230,"_30":231,"_139":232,"_40":41,"_39":233,"_141":64,"_37":234,"_13":68,"_34":46,"_36":235,"_24":25,"_146":-5,"_198":236,"_27":237},{"_49":225,"_32":33,"_30":31,"_139":163,"_40":41,"_39":14,"_141":64,"_37":226,"_13":68,"_34":35,"_36":-5,"_24":25,"_146":-5,"_198":227,"_27":228},{"_49":221,"_32":45,"_30":44,"_139":31,"_40":41,"_39":14,"_141":64,"_37":222,"_13":68,"_34":46,"_36":47,"_24":25,"_146":-5,"_198":223,"_27":224},{"_49":215,"_32":149,"_30":216,"_139":163,"_40":41,"_39":164,"_141":64,"_37":217,"_13":68,"_34":21,"_36":218,"_24":25,"_146":-5,"_198":219,"_27":220},{"_49":207,"_32":208,"_30":209,"_139":163,"_40":41,"_39":210,"_141":64,"_37":211,"_13":68,"_34":46,"_36":212,"_24":25,"_146":-5,"_198":213,"_27":214},{"_49":155,"_32":156,"_30":157,"_139":-5,"_40":41,"_39":143,"_141":25,"_37":204,"_13":68,"_34":21,"_36":159,"_24":25,"_146":-5,"_198":205,"_27":206},{"_49":148,"_32":149,"_30":150,"_139":-5,"_40":41,"_39":151,"_141":25,"_37":201,"_13":143,"_34":46,"_36":153,"_24":25,"_146":-5,"_198":202,"_27":203},{"_49":136,"_32":137,"_30":138,"_139":-5,"_40":41,"_39":140,"_141":25,"_37":197,"_13":143,"_34":144,"_36":145,"_24":25,"_146":-5,"_198":199,"_27":200},["D",1752520698715],"children",[],[137],["D",1752520661140],[],[149],["D",1752520624159],[],[156],"8ce0b11a-60e7-11f0-b88f-0224a6c84d84","index.tsx","8ce0b1ce-60e7-11f0-b88f-0224a6c84d84",11,["D",1752520806568],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[162,208],"89ca90ea-60e7-11f0-8adb-0224a6c84d84","89ca920c-60e7-11f0-8adb-0224a6c84d84",["D",1752520801389],"\n\n\n \n \n Clipboard Debugger\n \n \n\n\n

\n \n\n",[],[162,149],"cb07fd18-60e7-11f0-9b05-0224a6c84d84",["D",1752520910843],[],[162,33,45],"cb0806c8-60e7-11f0-9b05-0224a6c84d84",["D",1752520910843],[191],[162,33],"b57cfa5c-60e7-11f0-8e28-0224a6c84d84","TextDataDisplay.tsx","b57cfb2e-60e7-11f0-8e28-0224a6c84d84","4099e460-9dc1-46ce-8aeb-9eb0791ab6ce",17,["D",1752520874700],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ninterface TextDataDisplayProps {\n blob: Blob;\n type: string;\n}\n\nexport default function TextDataDisplay({ blob, type }: TextDataDisplayProps) {\n const [text, setText] = useState('');\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n const readText = async () => {\n try {\n const textContent = await blob.text();\n setText(textContent);\n } catch (error) {\n setText(`Error reading text: ${error}`);\n } finally {\n setLoading(false);\n }\n };\n\n readText();\n }, [blob]);\n\n const copyToClipboard = async () => {\n try {\n await navigator.clipboard.writeText(text);\n } catch (error) {\n console.error('Failed to copy text:', error);\n }\n };\n\n if (loading) {\n return

Loading text content...

;\n }\n\n return (\n

\n Content:\n \n 📋 Copy\n \n

\n \n \n \n

\n Length: {text.length} characters\n {text.includes('\\n') && (\n <>\n
\n Lines: {text.split('\\n').length}\n \n )}\n

\n );\n}",[],[162,238,230],"components","c8b2a202-60e7-11f0-bef0-0224a6c84d84","PermissionWarning.tsx","c8b2a28e-60e7-11f0-bef0-0224a6c84d84",21,["D",1752520906928],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\nexport default function PermissionWarning() {\n return (\n

\n ⚠️ Permission Required: This app needs clipboard access. \n Please click \"Allow\" when prompted, or check your browser's permission settings.\n

\n );\n}",[],[162,238,240],"bb7098ba-60e7-11f0-8fb5-0224a6c84d84","ImageDataDisplay.tsx","bb7099a0-60e7-11f0-8fb5-0224a6c84d84",18,["D",1752520884684],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ninterface ImageDataDisplayProps {\n blob: Blob;\n type: string;\n}\n\nexport default function ImageDataDisplay({ blob, type }: ImageDataDisplayProps) {\n const [imageUrl, setImageUrl] = useState('');\n\n useEffect(() => {\n const url = URL.createObjectURL(blob);\n setImageUrl(url);\n\n // Cleanup\n return () => {\n URL.revokeObjectURL(url);\n };\n }, [blob]);\n\n return (\n

Preview:

\n \n

\n Format: {type}
\n Size: {blob.size} bytes\n

\n );\n}",[],[162,238,248],"c461aad6-60e7-11f0-81dd-0224a6c84d84","ErrorMessage.tsx","c461ac70-60e7-11f0-81dd-0224a6c84d84",20,["D",1752520899685],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ninterface ErrorMessageProps {\n message: string;\n}\n\nexport default function ErrorMessage({ message }: ErrorMessageProps) {\n return (\n

{message}

\n );\n}",[],[162,238,256],"a397f5d0-60e7-11f0-b028-0224a6c84d84","ClipboardResults.tsx","a397f6c0-60e7-11f0-b028-0224a6c84d84",14,["D",1752520844678],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport ClipboardItemDisplay from \"./ClipboardItemDisplay.tsx\";\nimport { ClipboardItem } from \"../types/clipboard.ts\";\n\ninterface ClipboardResultsProps {\n items: ClipboardItem[];\n}\n\nexport default function ClipboardResults({ items }: ClipboardResultsProps) {\n if (items.length === 0) {\n return null;\n }\n\n return (\n

\n {items.map((item) => (\n \n ))}\n

\n );\n}",[],[162,238,264],"a08102f6-60e7-11f0-a09a-0224a6c84d84","ClipboardReader.tsx","a08103aa-60e7-11f0-a09a-0224a6c84d84",13,["D",1752520839495],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ninterface ClipboardReaderProps {\n onRead: () => void;\n onClear: () => void;\n isLoading: boolean;\n isSupported: boolean;\n}\n\nexport default function ClipboardReader({ onRead, onClear, isLoading, isSupported }: ClipboardReaderProps) {\n return (\n

\n \n {isLoading ? '⏳ Reading...' : '📖 Read Clipboard'}\n \n \n \n 🗑️ Clear Results\n \n

\n );\n}",[],[162,238,272],"a8385062-60e7-11f0-9148-0224a6c84d84","ClipboardItemDisplay.tsx","a8385116-60e7-11f0-9148-0224a6c84d84",15,["D",1752520852439],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport ClipboardDataDisplay from \"./ClipboardDataDisplay.tsx\";\nimport { ClipboardItem } from \"../types/clipboard.ts\";\n\ninterface ClipboardItemDisplayProps {\n item: ClipboardItem;\n}\n\nexport default function ClipboardItemDisplay({ item }: ClipboardItemDisplayProps) {\n return (\n

\n Clipboard Item {item.id + 1}\n

\n \n

Available MIME Types:

\n {item.types.join(', ')}\n

\n \n {item.types.map((type) => (\n \n ))}\n

\n );\n}",[],[162,238,280],"ae0f13cc-60e7-11f0-9fe3-0224a6c84d84","ClipboardDataDisplay.tsx","ae0f1480-60e7-11f0-9fe3-0224a6c84d84",16,["D",1752520862237],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport TextDataDisplay from \"./TextDataDisplay.tsx\";\nimport ImageDataDisplay from \"./ImageDataDisplay.tsx\";\nimport BinaryDataDisplay from \"./BinaryDataDisplay.tsx\";\nimport { ClipboardData } from \"../types/clipboard.ts\";\n\ninterface ClipboardDataDisplayProps {\n type: string;\n data: ClipboardData;\n}\n\nexport default function ClipboardDataDisplay({ type, data }: ClipboardDataDisplayProps) {\n if ('error' in data) {\n return (\n

Error reading {type}:

\n {data.error}\n

\n );\n }\n\n const { blob, size, mimeType } = data;\n\n return (\n

Type: {type}

\n \n

\n Size: {size} bytes
\n MIME Type: {mimeType}\n

\n \n {type.startsWith('text/') ? (\n \n ) : type.startsWith('image/') ? (\n \n ) : (\n \n )}\n

\n );\n}",[],[162,238,288],"c0cc029a-60e7-11f0-bef0-0224a6c84d84","BinaryDataDisplay.tsx","c0cc034e-60e7-11f0-bef0-0224a6c84d84",19,["D",1752520893673],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ninterface BinaryDataDisplayProps {\n blob: Blob;\n type: string;\n}\n\nexport default function BinaryDataDisplay({ blob, type }: BinaryDataDisplayProps) {\n const [hexData, setHexData] = useState('');\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n const readBinary = async () => {\n try {\n const arrayBuffer = await blob.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n \n // Show first 256 bytes as hex\n const hexBytes = Array.from(uint8Array.slice(0, 256))\n .map(b => b.toString(16).padStart(2, '0'))\n .join(' ');\n \n setHexData(hexBytes + (uint8Array.length > 256 ? '...' : ''));\n } catch (error) {\n setHexData(`Error reading binary data: ${error}`);\n } finally {\n setLoading(false);\n }\n };\n\n readBinary();\n }, [blob]);\n\n if (loading) {\n return

Loading binary data...

;\n }\n\n return (\n

Binary Data (first 256 bytes as hex):

\n {hexData}\n

\n Total Size: {blob.size} bytes\n

\n );\n}",[],[162,238,296],"99aa1efe-60e7-11f0-a09a-0224a6c84d84","App.tsx","99aa1f9e-60e7-11f0-a09a-0224a6c84d84",12,["D",1752520828019],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport ClipboardReader from \"./ClipboardReader.tsx\";\nimport ClipboardResults from \"./ClipboardResults.tsx\";\nimport ErrorMessage from \"./ErrorMessage.tsx\";\nimport PermissionWarning from \"./PermissionWarning.tsx\";\nimport { ClipboardItem } from \"../types/clipboard.ts\";\n\nexport default function App() {\n const [clipboardItems, setClipboardItems] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const [showPermissionWarning, setShowPermissionWarning] = useState(false);\n const [status, setStatus] = useState(\"\");\n const [isSupported, setIsSupported] = useState(true);\n\n useEffect(() => {\n checkClipboardSupport();\n }, []);\n\n const checkClipboardSupport = () => {\n if (!navigator.clipboard) {\n setError('Clipboard API not supported in this browser. Try using HTTPS or a modern browser.');\n setIsSupported(false);\n return false;\n }\n \n if (location.protocol !== 'https:' && location.hostname !== 'localhost') {\n setError('Clipboard API requires HTTPS or localhost.');\n setIsSupported(false);\n return false;\n }\n \n return true;\n };\n\n const readClipboard = async () => {\n if (!isSupported) return;\n\n setError(null);\n setShowPermissionWarning(false);\n setIsLoading(true);\n setStatus('Reading clipboard...');\n \n try {\n // Check permission\n const permission = await navigator.permissions.query({ name: 'clipboard-read' as PermissionName });\n \n if (permission.state === 'denied') {\n setShowPermissionWarning(true);\n setStatus('Permission denied');\n setIsLoading(false);\n return;\n }\n \n // Read clipboard items\n const items = await navigator.clipboard.read();\n \n if (items.length === 0) {\n setStatus('Clipboard is empty');\n setClipboardItems([]);\n setIsLoading(false);\n return;\n }\n \n // Process items\n const processedItems: ClipboardItem[] = [];\n \n for (let i = 0; i < items.length; i++) {\n const item = items[i];\n const clipboardItem: ClipboardItem = {\n id: i,\n types: item.types,\n data: {}\n };\n \n // Read data for each type\n for (const type of item.types) {\n try {\n const blob = await item.getType(type);\n clipboardItem.data[type] = {\n blob,\n size: blob.size,\n mimeType: blob.type || 'unknown'\n };\n } catch (err) {\n clipboardItem.data[type] = {\n error: err instanceof Error ? err.message : 'Unknown error'\n };\n }\n }\n \n processedItems.push(clipboardItem);\n }\n \n setClipboardItems(processedItems);\n setStatus(`Found ${processedItems.length} clipboard item(s)`);\n \n } catch (error) {\n console.error('Clipboard read error:', error);\n \n if (error instanceof Error) {\n if (error.name === 'NotAllowedError') {\n setShowPermissionWarning(true);\n setStatus('Permission denied');\n } else {\n setError(`Error reading clipboard: ${error.message}`);\n setStatus('Error occurred');\n }\n } else {\n setError('Unknown error occurred');\n setStatus('Error occurred');\n }\n } finally {\n setIsLoading(false);\n }\n };\n\n const clearResults = () => {\n setClipboardItems([]);\n setError(null);\n setShowPermissionWarning(false);\n setStatus('Results cleared');\n };\n\n return (\n

📋 Clipboard Debugger

\n \n

\n \n \n {status && (\n

{status}

\n )}\n \n {showPermissionWarning && }\n {error && }\n

\n\n \n

\n );\n}",[],[162,238,304],"99aa2c50-60e7-11f0-a09a-0224a6c84d84",["D",1752520828019],[180,181,182,183,184,185,186,187,188,189],[162,238],["D",1752520801389],[179,190,192,193],[162],["D",1752520551165],{"_102":101,"_109":105},{"_102":101,"_103":-5,"_104":105,"_18":60,"_106":107,"_108":25},{"_13":91,"_32":92,"_49":41,"_93":50,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":51,"_100":101},"ctx",{"_84":-5,"_129":355,"_356":357,"_358":359,"_360":25,"_361":25,"_362":25,"_363":64,"_364":-5,"_365":-7,"_366":-7,"_367":68,"_368":25,"_369":25,"_370":-5,"_371":25,"_372":25,"_373":25,"_374":-5},"ENV",{"_326":327,"_328":329,"_330":92,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v22