Clipboard Copy Button

Example from hyperscript.org landing page
The "Install" script tag copy button demonstrates using the Clipboard API with hyperscript. Copy text to clipboard, show feedback, and restore the button text.

Demo 1: Script Tag Copy (Exact Landing Page Example)

Install: <script src="https://unpkg.com/hyperscript.org"></script>

Demo 2: Copy Different Content Types

npm install hyperfixi

Copy color codes:

#667eea #28a745

Test Area

Paste here to verify the copy worked (Ctrl+V / Cmd+V):

The Exact Code

Simplified Version

<code class="install-code">npm install hyperfixi</code> <button class="copy-btn" _="on click writeText(my previous.innerText) on navigator.clipboard put 'copied!' into me add .copied to me wait 1s put 'copy' into me remove .copied from me">copy</button>

Features Demonstrated

writeText(...) on navigator.clipboard - Clipboard API access
my previous - Reference to previous sibling element
my previousElementSibling's innerText - Possessive property access
put [text] into me - Update button text
add/remove .class - Visual feedback with CSS
wait [duration] - Delay before restoring text