Clip Stream

Clip Stream is a VS Code extension that tracks your clipboard history in a dedicated sidebar panel. Every time you copy text, it is automatically captured and stored so you can revisit, re-insert, pin, or remove any previous clip — all without leaving your editor.

Features

• Automatic clipboard capture — polls the clipboard every second and records any new text you copy, keeping the most recent 20 entries.
• Persistent history — clipboard entries survive VS Code restarts; history is saved to global extension storage.
• Pin clips — pin important entries to the top of the list so they are never pushed out by new copies.
• Delete clips — remove individual entries from the history; deleted items are ignored if copied again.
• Insert into editor — click or press Enter on any clip to insert it at the current cursor position in the active editor.
• Copy to clipboard — copy any historical clip back to the system clipboard with a single action.
• Search / filter — use the built-in search bar (Ctrl/Cmd+F) to filter clips by content in real time.
• Keyboard navigation — navigate the list with arrow keys, press Enter to insert, P to pin/unpin, and Delete to remove without touching the mouse.
• Clear all — a toolbar button wipes the entire history in one click.

Tech Stack

Project Structure

clip-stream/
├── src/
│   ├── extension.ts          # Extension activation, command registration, clipboard polling
│   ├── ClipboardManager.ts   # Core clipboard history logic (add, get, clear)
│   └── ClipboardViewProvider.ts  # Sidebar webview provider and message bus
├── media/
│   ├── main.js               # Webview client-side behaviour (rendering, keyboard nav, search)
│   └── style.css             # Webview styling
├── .vscode/
│   └── launch.json           # Debug configuration for Extension Development Host
├── package.json              # Extension manifest and npm scripts
└── tsconfig.json             # TypeScript compiler settings

Getting Started

Prerequisites

• Node.js v18 or later
• VS Code v1.80 or later

Installation (development)

# 1. Install dependencies
npm install

# 2. Start the TypeScript watch compiler
npm run watch

Then press F5 in VS Code to launch a new Extension Development Host window with Clip Stream loaded.

Running a production build

npm run compile

Usage

1. Open VS Code and activate the extension (it starts automatically on launch).
2. Copy any text as you normally would — Clip Stream captures it instantly.
3. Open the Clip Stream panel in the Activity Bar to view your history.
4. Use the toolbar search box to filter entries.
5. Click an entry (or navigate with arrow keys and press Enter) to insert it at the cursor.
6. Press P on a selected entry to pin it; press Delete to remove it.
7. Click the Clear All Clips button in the panel title bar to reset the entire history.

Commands

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT