Skip to content
/ boxy Public

Boxy is a powerful, offline-first clipboard manager built for power users. It helps you organize text snippets, code templates, and canned responses in a hierarchical structure that's always availableโ€”even without an internet connection.

License

Notifications You must be signed in to change notification settings

sadidft/boxy

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

51 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Boxy

Boxy Logo

Your Offline Clipboard Manager

Features โ€ข Installation โ€ข Usage โ€ข Shortcuts โ€ข Tech Stack โ€ข License

Version License PWA Ready Offline


๐ŸŽฏ What is Boxy?

Boxy is a powerful, offline-first clipboard manager built for power users. It helps you organize text snippets, code templates, and canned responses in a hierarchical structure that's always availableโ€”even without an internet connection.

Why Boxy?

  • ๐Ÿ”’ 100% Offline - Your data never leaves your device. Complete privacy guaranteed.
  • โšก Lightning Fast - Zero network latency. Everything runs locally in your browser.
  • ๐Ÿ“ Markdown Ready - Full Markdown support for rich text formatting.
  • ๐ŸŽจ Chrome-like UI - Familiar tab-based interface that feels native.
  • โŒจ๏ธ Keyboard First - Complete keyboard navigation for power users.
  • ๐Ÿ“ฑ PWA Support - Install as a standalone app on any device.

โœจ Features

๐Ÿ“ฆ Hierarchical Organization

Boxy uses a three-level hierarchy to organize your content:

๐Ÿ“ฆ Box (Workspace)
 โ””โ”€โ”€ ๐Ÿ“ Tab (Category)
      โ””โ”€โ”€ ๐Ÿ“„ Card (Content)
  • Boxes: Top-level containers like "Work", "Personal", or "Projects"
  • Tabs: Categories within a box, like folders
  • Cards: Individual snippets with Markdown content

๐ŸŽฏ Core Features

Feature Description
One-Click Copy Copy card content instantly with a single click
Template Variables Use {{name}}, {{date}}, {{time}} for dynamic content
Custom Variables Define your own variables that prompt for input when copying
Search & Filter Find cards by text or filter by tags
Tag System Organize cards with tags for easy discovery
Pin Cards/Tabs Keep important items at the top
Undo/Redo 7-step undo history for all actions
Export/Import Backup and restore your data as JSON
Dark/Light Theme System-aware theme with manual override
Multi-Box View View multiple boxes simultaneously

๐Ÿ“Š Table Support

Cards can include tables with two modes:

  1. History Table: Auto-records when a card was created, edited, or copied
  2. Custom Table: Create your own tables with formula support

๐Ÿงฎ Formula System

Custom tables support powerful formulas:

Category Formulas
Numeric sum//all, avg//3, max//all, min//all, cnt//all, diff//1
Time mnt//all, hrs//all, dur//all (smart duration)
Date days//all, weeks//all
Special last//1, first//1, pct//2, inc//1, streak//all

๐Ÿ”ค Template Variables

Use variables in your card content for dynamic replacement:

Built-in Variables:

  • {{date}} - Current date (YYYY-MM-DD)
  • {{time}} - Current time (HH:mm)
  • {{datetime}} - Date and time combined
  • {{weekday}} - Day name (Monday, Tuesday, etc.)
  • {{month}} - Month name
  • {{year}} - Current year
  • {{timestamp}} - Unix timestamp
  • {{random}} - Random 6-digit number
  • {{uuid}} - Random UUID v4

Custom Variables: Any other {{variableName}} will prompt for input when copying.


๐Ÿš€ Installation

Option 1: Use Online (Recommended)

Visit the hosted version and install as a PWA:

  1. Open Boxy in your browser
  2. Click the install icon in the address bar (or use browser menu)
  3. Click "Install" to add Boxy to your device

Option 2: Self-Host

# Clone the repository
git clone https://github.com/yourusername/boxy.git
cd boxy

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Option 3: Docker

# Build and run with Docker
docker build -t boxy .
docker run -p 8080:80 boxy

๐Ÿ“– Usage

Getting Started

  1. Create a Box: Click "Create First Box" or press Ctrl+B
  2. Add a Tab: Click the + button in the tab bar or press Ctrl+T
  3. Create Cards: Click "New Card" or press Ctrl+N
  4. Copy Content: Click the copy button or press C on a selected card

Managing Content

  • Edit: Click the edit button or press E on a selected card
  • Delete: Click the trash icon or press Delete
  • Pin: Click the pin icon or press P to pin cards/tabs
  • Search: Press Ctrl+K to focus search, type to filter
  • Tags: Add tags to cards for organization, filter with tag:tagname

Multi-Box View

  • Minimize: Click โ€” to collapse a box to a bar
  • Maximize: Click โ–ก to expand a box to full screen
  • Switch: Click on any box header to make it active

โŒจ๏ธ Keyboard Shortcuts

Global

Shortcut Action
Ctrl+K Focus search
Ctrl+N New card
Ctrl+T New tab
Ctrl+B New box
Ctrl+Z Undo
Ctrl+Shift+Z Redo
Ctrl+, Settings
Escape Close modal / Clear search
? Show shortcuts

Navigation

Shortcut Action
Ctrl+1-9 Switch to tab 1-9
Ctrl+Tab Next tab
Ctrl+Shift+Tab Previous tab
โ†‘โ†“โ†โ†’ Navigate cards
Tab Cycle through cards
Enter Copy selected card

Card Actions

Shortcut Action
C Copy card
E Edit card
P Toggle pin
Delete Delete card

๐Ÿ›  Tech Stack

  • Frontend: React 18 + TypeScript
  • Styling: Tailwind CSS + CSS Variables
  • Build: Vite
  • Storage: localStorage (IndexedDB planned)
  • Icons: Custom SVG (Lucide-style)

Browser Support

Browser Support
Chrome โœ… Full
Edge โœ… Full
Firefox โœ… Full
Safari โœ… Full
Mobile Chrome โœ… Responsive
Mobile Safari โœ… Responsive

๐Ÿ“ Project Structure

boxy/
โ”œโ”€โ”€ public/
โ”‚   โ”œโ”€โ”€ logo.svg          # App logo
โ”‚   โ”œโ”€โ”€ manifest.json     # PWA manifest
โ”‚   โ””โ”€โ”€ sw.js             # Service worker
โ”œโ”€โ”€ src/
โ”‚   โ”œโ”€โ”€ components/
โ”‚   โ”‚   โ”œโ”€โ”€ cards/        # Card components
โ”‚   โ”‚   โ”œโ”€โ”€ icons/        # SVG icons
โ”‚   โ”‚   โ”œโ”€โ”€ layout/       # Layout components
โ”‚   โ”‚   โ””โ”€โ”€ modals/       # Modal dialogs
โ”‚   โ”œโ”€โ”€ config/           # App configuration
โ”‚   โ”œโ”€โ”€ store/            # State management
โ”‚   โ”œโ”€โ”€ types/            # TypeScript types
โ”‚   โ”œโ”€โ”€ utils/            # Utility functions
โ”‚   โ”œโ”€โ”€ App.tsx           # Main app component
โ”‚   โ””โ”€โ”€ main.tsx          # Entry point
โ”œโ”€โ”€ index.html
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ tailwind.config.js
โ”œโ”€โ”€ tsconfig.json
โ””โ”€โ”€ vite.config.ts

๐Ÿ” Privacy

Boxy is designed with privacy as a core principle:

  • โœ… No tracking - Zero analytics or telemetry
  • โœ… No network requests - Works 100% offline
  • โœ… Local storage only - Data stays on your device
  • โœ… No accounts - No sign-up required
  • โœ… Open source - Audit the code yourself

๐Ÿค Contributing

Contributions are welcome! Please read our contributing guidelines before submitting a PR.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

๐Ÿ“œ License

This project is licensed under the MIT License - see the LICENSE file for details.


๐Ÿ™ Acknowledgments

  • Icons inspired by Lucide Icons
  • UI patterns inspired by Google Chrome
  • Built with โค๏ธ for the developer community

Boxy - Your offline clipboard manager
Made with โค๏ธ by the community

About

Boxy is a powerful, offline-first clipboard manager built for power users. It helps you organize text snippets, code templates, and canned responses in a hierarchical structure that's always availableโ€”even without an internet connection.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors