v133 · clipboard

Deferred Content Lab

Three distinct real-world patterns where ClipboardItem with a Promise<DOMString> solves a problem that await data; write() cannot. Each demo resolves a different kind of deferred content at write time.

checking Clipboard API… checking Promise ClipboardItem…

A — Lazy template selection

The promise resolves using the selected template at write time, not at call time. Changing the template after clicking copy still picks the right one.

Template:

—

B — Timed deferred copy

The promise resolves after a configurable delay — simulating async generation (e.g. chart render, compression). The old pattern would throw NotAllowedError because the user gesture would expire.

Delay: 800 ms

—

C — Computed diff (deferred string)

The copied content is computed from two text areas at write time. Editing the fields after pressing copy still captures the latest diff.

Before: After:

—

Old vs. new pattern comparison

Scenario	Old: await then write	New: Promise in ClipboardItem
Async content (delayed)	NotAllowedError — user gesture expired	✓ Resolves inside browser's write gate
Lazy template	Captured at `await` time, not click time	✓ Resolved at write time — always fresh
Multiple formats at once	Requires sequential awaits + separate Blob wraps	✓ Each format value can be a string or promise

Event log

Waiting for copy actions…