A lightweight, shareable online clipboard built on Cloudflare Workers + KV — no accounts, no fuss. Just visit a URL, paste your text, and share the link.

• Instant sharing — every clipboard lives at https://<your-worker>.workers.dev/<key>
• Auto-generated keys — visiting the root / redirects you to a fresh random key
• Persistent storage — content is backed by Cloudflare KV, globally distributed
• Zero infrastructure — runs entirely on Cloudflare's edge network, no servers to manage
• React SPA — fast, responsive frontend served as static assets

clipboard/
├── src/
│   ├── index.ts          # Hono worker — API routes (GET /api/:key, PUT /api/:key)
│   └── client/
│       ├── main.tsx      # React app entry point
│       ├── App.tsx       # Main clipboard component (key routing, editor, save)
│       └── index.css     # Styles
├── index.html            # Vite HTML shell
├── wrangler.jsonc        # Cloudflare Workers config (KV bindings, assets)
├── vite.config.ts        # Vite + Cloudflare plugin config
├── tsconfig.json
└── package.json

Browser (React SPA)
      │
      │  GET  /api/:key   →  read from KV
      │  PUT  /api/:key   →  write to KV
      ▼
Hono Worker (src/index.ts)
      │
      ▼
Cloudflare KV (CLIPBOARD_KV binding)

Static assets (dist/client/) are served directly by Cloudflare's asset pipeline — the Worker only handles /api/* requests.

wrangler login

This opens a browser window to authorise Wrangler against your Cloudflare account.

Cloudflare KV requires you to create namespaces before you can use them.

# Production namespace
wrangler kv namespace create CLIPBOARD_KV

# Preview namespace (used by `wrangler dev`)
wrangler kv namespace create CLIPBOARD_KV --preview

Each command prints an id. Copy both IDs into wrangler.jsonc:

// wrangler.jsonc
"kv_namespaces": [
  {
    "binding": "CLIPBOARD_KV",
    "id":         "<paste production id here>",
    "preview_id": "<paste preview id here>"
  }
]

npm install

Wrangler can auto-generate a worker-configuration.d.ts file that gives you full type-safety for your bindings:

npm run cf-typegen

npm run dev

Vite starts a local dev server (typically at http://localhost:5173). The @cloudflare/vite-plugin emulates Workers bindings locally — your KV reads/writes hit the preview namespace in real Cloudflare KV.

npm run deploy

This runs vite build (outputs to dist/) followed by wrangler deploy. Wrangler uploads:

• Worker script (src/index.ts, bundled)
• Static assets (dist/client/) — served by Cloudflare's asset pipeline

Your clipboard is now live at:

https://clipboard.<your-account>.workers.dev

Tip: To use a custom domain, add a route or custom domain in the Cloudflare dashboard under Workers & Pages → your worker → Settings → Domains & Routes.

Simply re-run:

npm run deploy

Wrangler performs an atomic deployment — the new version is live instantly with zero downtime.

• Cloudflare Workers Docs
• Cloudflare KV Docs
• Hono — Ultra-fast web framework for the Edge
• @cloudflare/vite-plugin Docs
• Wrangler CLI Reference

MIT