v149 · Clipboard · JavaScript

Deferred Clipboard Data Reads

Chrome 149 adds ClipboardItem.delayed() — a way to register a data-generation callback that only runs if the user actually pastes. Expensive rendering (canvas snapshots, serialization) is deferred until the data is needed.

concepts

  1. Deferred Copy Demo

    Copy the same content twice — once eagerly, once deferred. A callback counter reveals that the deferred callback is only invoked when you paste, while the eager copy runs its data generation immediately.

  2. Format Picker

    Write clipboard data in three MIME types simultaneously using deferred callbacks. Paste into different targets and observe that only the format actually consumed triggers its callback — the others stay silent.

  3. Clipboard Spy

    Side-by-side timeline of eager copy vs. ClipboardItem.delayed(). Watch the 50ms canvas render fire at copy time for eager mode, and watch it fire only on paste for deferred mode — or not at all if you never paste. Tracks renders avoided in real time.

  4. Drawing Tool Copy

    A canvas drawing tool with colour and stroke controls. Compare Eager Copy (renders PNG immediately at copy time) with Deferred Copy (registers a ClipboardItem.delayed() callback). A metrics panel tracks copies made, deferred callbacks fired, and renders avoided — zero renders when you copy then copy again without pasting.

  5. Format Matrix

    Register five MIME types at once — text/plain, text/html, text/csv, application/json, image/png — all via deferred callbacks. Paste into four typed targets. A live matrix shows which callbacks were registered, which fired, and which were consumed. Demonstrates that only the format the paste target actually accepts triggers its generation callback.

  6. Rich Text Export

    A rich-text table editor that registers four clipboard formats — text/html, text/plain, text/csv, and application/json — all via ClipboardItem.delayed(). Paste into a rich-text area, plain-text area, or JSON target and watch the callback log: only the format each target consumes triggers its serialization callback. Counts copies made, callbacks fired, and callbacks avoided in real time.

why it shipped

Before deferred clipboard, any call to navigator.clipboard.write() had to supply the data up-front — even if the user never pasted. This forced expensive work at copy time: rendering a canvas to PNG, serializing a large graph, computing a diff. ClipboardItem.delayed() inverts the model: you register a callback keyed to a MIME type, and Chrome calls it only when the paste actually happens. If the user copies but never pastes, the callback never fires. This is especially useful for productivity apps (drawing tools, spreadsheets, rich text editors) that want to offer multiple formats (PNG + SVG + plain text) without paying the generation cost for formats the paste target won't accept.

references