Clipboard API Tester - Online Read & Write Sandbox

The Clipboard API (navigator.clipboard) is a modern, asynchronous, promise-based API for reading and writing clipboard data. Unlike the older document.execCommand('copy') method, it supports reading from the clipboard, writing multiple MIME types simultaneously (text, HTML, images), and provides proper permission management. It's more secure, works with Permissions API, and doesn't require creating temporary DOM elements. The old execCommand approach is synchronous, write-only, and being deprecated.

The Clipboard API requires a secure context (HTTPS or localhost). If you're on HTTP, the API won't be available. Additionally, some older browsers don't support it at all. Chrome 66+, Edge 79+, Safari 13.1+, and Firefox 87+ support the write methods. The read methods have more limited support — Firefox currently only supports readText() in some configurations, and Safari requires user activation for all clipboard operations. Check the permissions panel above to see your browser's status.

These are Permissions API entries that control access to the clipboard. clipboard-write is typically granted automatically in secure contexts without a prompt. clipboard-read usually requires a user gesture (click, tap, or keyboard shortcut) and may show a browser permission prompt, especially for reading non-text formats like images. You can query permission state using navigator.permissions.query({name: 'clipboard-read'}).

Use navigator.clipboard.write() with a ClipboardItem containing multiple MIME types:
const item = new ClipboardItem({'text/plain': new Blob(['Plain'], {type:'text/plain'}), 'text/html': new Blob(['<b>Bold</b>'], {type:'text/html'})}); await navigator.clipboard.write([item]);
When pasting, the receiving application chooses the best format — rich editors use HTML, plain textareas use text/plain. Try the "Write Multi-Format" button in the Write tab above.

Common types include text/plain, text/html, image/png, image/jpeg, image/gif, image/webp, and text/uri-list (for URLs). Applications can also register custom MIME types for internal use. The Paste Analyzer tab above lets you inspect exactly what MIME types are currently in your clipboard — this is invaluable for debugging rich copy-paste behavior in web apps.

Yes! Use navigator.clipboard.read() to get ClipboardItem objects. Then call item.getType('image/png') to get a Blob, and use URL.createObjectURL(blob) for display or blob.arrayBuffer() for processing. This works for screenshots and copied images. Note that reading images requires the clipboard-read permission and a user gesture in most browsers.

The paste event provides access to event.clipboardData which is the data being pasted at that exact moment — it can include additional MIME types added by the source application. The clipboard.read() method reads the current system clipboard. They should generally match, but timing differences or application-specific clipboard formats can cause variations. The Paste Analyzer tab captures the paste event data, giving you a real-time snapshot.

Wrap clipboard operations in try-catch blocks. Common errors include NotAllowedError (permission denied or no user gesture), NotReadableError (clipboard empty or inaccessible), and TypeError (unsupported MIME type). Always check navigator.clipboard exists before calling methods. Provide fallback UI or clear error messages. This tool demonstrates proper error handling in the operation log.

Always initiate clipboard reads from a user gesture (button click, keyboard shortcut). Browsers automatically deny clipboard-read if not triggered by user interaction. Query the permission first using navigator.permissions.query({name:'clipboard-read'}) to check the state. If it's prompt, the next read call will trigger the browser's permission dialog. Once granted, subsequent reads from the same origin may work without re-prompting.

The Clipboard API is designed with security in mind. Reading requires a secure context (HTTPS), user activation, and explicit permission. Pages cannot silently read your clipboard — the browser will either block it or show a permission prompt. Additionally, the Permissions API allows you to revoke access. However, always be cautious: only grant clipboard access to trusted websites, and avoid copying sensitive data (passwords, tokens) when testing clipboard tools.