UTags is a comprehensive tagging ecosystem that revolutionizes how you organize and manage web content across multiple platforms. This monorepo contains two complementary applications that work together to provide a complete solution for digital content organization.
The UTags ecosystem follows a dual-component architecture designed for maximum flexibility and seamless integration:
Location: packages/extension/
The browser extension enables real-time tagging of web content across 50+ supported websites. It operates through a sophisticated content script system that intelligently identifies and enhances web elements.
Key architectural features:
Location: packages/webapp/
A modern Progressive Web Application built with Svelte that provides advanced bookmark management with powerful filtering and organization capabilities.
Core architectural components:
The system uses a unified data model that ensures consistency across both components:
type BookmarkTagsAndMetadata = {
tags: string[] // Hierarchical tags
meta: BookmarkMetadata // Comprehensive metadata
hilights?: [...] // Text highlights
deletedMeta?: {...} // Soft delete tracking
importedMeta?: {...} // Import source tracking
}Tags support hierarchical organization using slash notation (parent/child/grandchild) and include special system tags with filtering effects:
| Special Tag | Effect | Use Case |
|---|---|---|
block | Hides content completely | Content filtering |
hide | Collapses content | Space optimization |
favorite | Highlights content | Quick access |
visited | Tracks interaction | Usage analytics |
The ecosystem supports multi-provider synchronization ensuring data consistency across devices:
utags/
├── packages/
│ ├── extension/ │ │ ├── src/
│ │ │ ├── content.ts # Main content script
│ │ │ ├── sites/ # Site-specific adapters
│ │ │ ├── storage/ # Local storage management
│ │ │ └── modules/ # Core functionality modules
│ │ └── package.json
│ └── webapp/ # Web-based bookmark manager
│ ├── src/
│ │ ├── services/ # Business logic layer
│ │ ├── stores/ # State management
│ │ ├── sync/ # Synchronization system
│ │ └── components/ # UI components
│ └── package.json
├── docs/ # Documentation
├── assets/ # Screenshots and media
└── custom-style-examples/ # CSS customization examples
The project uses a pnpm workspace with unified tooling:
For beginners, we recommend following this progression:
The modular architecture allows you to start with either component and gradually adopt the full ecosystem as your needs grow.