@reform-digital/copy-flow

v1.2.1

Published

23 days ago

A small library that turns any button into a copy action for Webflow JSON, Figma HTML, or plain text.

0High
0Medium
0Low

reform-digital

CopyKit

One-click copy functionality for Webflow components.

Overview

CopyKit lets you instantly copy and paste ready-to-use Webflow components with one click. It intelligently detects the content format (JSON, HTML, or plain text) and copies it to the clipboard in the appropriate format. Perfect for component libraries, design systems, and code showcases.

Features

Smart format detection — Automatically detects and copies content as JSON, HTML, or plain text
One-click copying — Simple button click to copy any content
Success interactions — Optional visual feedback when content is copied
Zero dependencies — Lightweight and fast-loading
Webflow-friendly — Works seamlessly with Webflow's interaction system

Quick Start

1. Add the Script

Add to your Webflow project's global settings, inside the <head> tag:

<script 
  src="https://cdn.jsdelivr.net/npm/@reform-digital/[email protected]/prod/index.js"
  defer
></script>

That's it! CopyKit initializes automatically and is ready to use.

2. Set Up Your Copy Component

Structure your component with the required data attributes:

<div rd-copyflow="wrapper">
  <div rd-copyflow="copy-this">
    <!-- Content to be copied goes here -->
    <div class="my-component">
      <h2>Example Component</h2>
      <p>This will be copied to the clipboard</p>
    </div>
  </div>
  <button rd-copyflow="button">Copy Component</button>
  <div rd-copyflow="success-interaction">Copied!</div>
</div>

Usage

Basic Structure

Every copy component needs three essential parts:

Wrapper (rd-copyflow="wrapper") — Contains the entire copy component
Content source (rd-copyflow="copy-this") — The element whose content will be copied
Button (rd-copyflow="button") — The element that triggers the copy action

Optional: Success Interaction

Add a success interaction element (rd-copyflow="success-interaction") to trigger a Webflow interaction when content is successfully copied. This is useful for showing "Copied!" messages or visual feedback.

The success interaction will be automatically clicked when content is copied, and clicked again after 2 seconds to reset (perfect for toggle-style interactions).

Data Attributes

rd-copyflow="wrapper" — Required wrapper element that contains all copy-related elements
rd-copyflow="copy-this" — Required element whose text content will be copied
rd-copyflow="button" — Required element that triggers the copy action (clickable)
rd-copyflow="success-interaction" — Optional element that triggers on successful copy (typically a Webflow interaction trigger)

How It Works

On page load, CopyKit scans for all buttons with rd-copyflow="button"
When a button is clicked, it finds the nearest wrapper (rd-copyflow="wrapper")
Inside the wrapper, it locates the content source (rd-copyflow="copy-this")
It intelligently detects the content format:
- JSON — If the content is valid JSON (object or array), it copies as formatted JSON
- HTML — If the content contains HTML tags, it copies as HTML
- Plain text — Otherwise, it copies as plain text
The content is added to the clipboard in the appropriate format
If a success interaction element exists, it's triggered to provide visual feedback

Example: Copying a Component

<div rd-copyflow="wrapper">
  <!-- The component code to copy -->
  <div rd-copyflow="copy-this">
    <div class="card">
      <h3>Card Title</h3>
      <p>Card description goes here.</p>
      <button>Action</button>
    </div>
  </div>
  
  <!-- Copy button -->
  <button rd-copyflow="button">Copy Code</button>
  
  <!-- Success message (optional) -->
  <div rd-copyflow="success-interaction" class="success-message">
    Copied!
  </div>
</div>

When the "Copy Code" button is clicked, the HTML inside rd-copyflow="copy-this" will be copied to the clipboard as HTML format, and the success message will appear (if you've set up a Webflow interaction on that element).

Example: Copying JSON

<div rd-copyflow="wrapper">
  <pre rd-copyflow="copy-this">
{
  "name": "Example",
  "value": 123
}
  </pre>
  <button rd-copyflow="button">Copy JSON</button>
</div>

The JSON will be copied in a properly formatted way, making it easy to paste into code editors or share with developers.

Support

Need help? Join our Slack community.

Product Tracking

CopyKit includes an extremely lightweight telemetry module that helps us understand product adoption patterns. This information allows us to focus our support efforts and prioritize product enhancements where they matter most.

What We Track:

Product Identifier: The name of the product (e.g., "COPY_KIT")
Domain: The public hostname where the product is installed (e.g., "example.com")

Privacy & Performance:

No cookies, fingerprinting, or personally identifiable information
Only runs on live, public domains (never on localhost or development environments)
Single lightweight request sent once per page load
Data is aggregated for internal analytics only
Not used for advertising, marketing, or tracking