DEV Community

Cover image for I Built Clip10: A Real-time Clipboard with "Terminal" Commands
Ketut Dana
Ketut Dana

Posted on

I Built Clip10: A Real-time Clipboard with "Terminal" Commands

*Hi everyone! *

I want to share a project I’ve been working on called Clip10. It’s basically a web-based clipboard where you can drop links, notes, or images, and they sync across all your devices in real-time.

But there’s a twist: everything disappears in 10 minutes unless you tell it not to!

Why I built this?

Sometimes I just need to move a link or a photo from my laptop to my phone quickly. I don't want to email myself or use a bloated messaging app. I wanted something "frictionless"—just open, type, and done.

The Cool Part: Commands in the Editor

Instead of clicking many buttons, I built a Command-Line Interface (CLI) directly inside the text editor. You just type a command and hit Enter.

Type these commands in the editor and press Enter to execute:

Command Action Description
:help Open UI Menu Displays the English command reference modal.
:show-qr Share Link Generates a QR Code modal for the current session.
:image Share Image Upload images to the content.
:save Download Exports the current text as a .txt file.
:clear Wipe Data Deletes all text in the editor and syncs with DB.
:stop-time Freeze Timer Activates ∞ INFINITY mode (Saved to DB).
:start-time Resume Timer Restores the 10-minute countdown logic.

How I made it? (The Tech Stack)

I kept the stack simple but powerful:

  • Frontend: Plain HTML and Tailwind CSS (I love Dark Mode!).

  • Database & Real-time: Supabase. This is the MVP here. It handles the live syncing perfectly. When I type on my PC, the text appears on my phone instantly.

  • Link Engine: I wrote a custom Regex to detect URLs. If you type google.com, it automatically turns blue and clickable.

  • Previews: I used the Microlink API so that links show a nice visual card (like on Discord or Slack).

Features at a glance:

  • Smart Detection: It knows if you're typing a link or just text.

  • Ephemeral by Default: Great for privacy. Your data vanishes after 10 minutes.

  • Local Export: You can save your notes as a .txt file using the :save command.

  • QR Handoff: No need to type long URLs on your mobile browser.

What I learned

Building this project taught me a lot about handling real-time data and how to build a "command processor" in JavaScript. Sometimes, the best UI is actually just a simple text box that can do everything.

What do you think? Is a 10-minute timer too short, or just right for privacy? I'd love to hear your feedback!

Check out the documentation in my README for more details.

https://github.com/dnysaz/clip10

https://clip10.vercel.app

Top comments (0)