vite-plugin-asset-manager

A visual asset management dashboard for Vite projects.

Discover, browse, and manage all your media assets through a real-time web UI.

Installation •
Usage •
Features •
Configuration •
Shortcuts

---

Installation

``bash
npm install vite-plugin-asset-manager -D


or

pnpm add vite-plugin-asset-manager -D

or

yarn add vite-plugin-asset-manager -D
`

Usage

`ts
// vite.config.ts
import { defineConfig } from 'vite'
import AssetManager from 'vite-plugin-asset-manager'

export default defineConfig({
plugins: [AssetManager()],
})
`

Start your dev server and access the Asset Manager in three ways:
- Visit /__asset_manager__/ directly in your browser
- Press ⌥⇧A (Option+Shift+A) to toggle the floating panel
- Click the floating icon button injected into your app (drag to reposition)

Features

| Feature | Description |
|---------|-------------|
| Fully Responsive | Mobile-first design that works seamlessly from 320px to 4K+ displays |
| Asset Discovery | Automatically scans and catalogs images, videos, audio, fonts, documents, and data files |
| Real-time Updates | File changes reflected instantly via Server-Sent Events |
| Floating Icon | Draggable & resizable overlay panel with keyboard shortcuts (⌥⇧A), snaps to all 4 edges |
| Mobile Optimized | Touch-friendly UI with 44×44px tap targets, bottom sheet preview, drawer navigation |
| Automatic Theming | Light/dark mode support based on system preferences |
| Thumbnail Generation | Sharp-powered thumbnails with dual-tier caching |
| Import Tracking | See which files import each asset with click-to-open-in-editor |
| Duplicate Detection | Content-based deduplication using MD5 hashing |
| Advanced Filtering | Filter by size, date modified, and file extension |
| Bulk Operations | Multi-select for batch download (ZIP), copy paths, or delete |
| Keyboard Navigation | Full keyboard support with vim-style bindings |
| Context Menu | Right-click for quick actions (copy, reveal in Finder, delete, etc.) |
| Performance | Code splitting reduces main bundle to 75 KB, lazy loading for optimal speed |
| Accessibility | WCAG 2.1 Level AAA compliant with reduced motion support |

Framework Support

| Framework | Status | Notes |
|-----------|--------|-------|
| Vanilla | ✅ | Fully automatic |
| Vue | ✅ | Fully automatic |
| React | ✅ | Fully automatic |
| Preact | ✅ | Fully automatic |
| Lit | ✅ | Fully automatic |
| Svelte | ✅ | Fully automatic |
| Solid | ✅ | Fully automatic |
| Qwik | ✅ | Fully automatic |
| TanStack Start | ✅ | Manual setup required |

$3

For SSR frameworks (Next.js, Remix, Nuxt, SvelteKit, Solid Start), manual script injection is required. See the SSR Integration Guide for setup instructions.

Configuration

`ts
assetManager({
base: '/__asset_manager__', // Dashboard URL path
include: ['src', 'public'], // Directories to scan
exclude: ['node_modules', '.git', 'dist'],
thumbnailSize: 200, // Thumbnail dimensions (px)
floatingIcon: true, // Show toggle button in host app
watch: true, // Enable real-time updates
launchEditor: 'code', // Editor: code, cursor, webstorm, vim, etc.
})
`

Asset Types

| Type | Extensions |
|------|------------|
| Image | png jpg jpeg gif svg webp avif ico bmp tiff heic |
| Video | mp4 webm ogg mov avi |
| Audio | mp3 wav flac aac |
| Document | pdf doc docx xls xlsx ppt pptx |
| Font | woff woff2 ttf otf eot |
| Data | json csv xml yml yaml toml |
| Text | md txt |

Keyboard Shortcuts

| Action | Shortcut |
|--------|----------|
| Navigate grid | ← ↑ → ↓ or j/k |
| Focus search | / |
| Close preview | Escape |
| Toggle selection | Space |
| Open preview | Enter |
| Select all | ⌘A / Ctrl+A |
| Copy paths | ⌘C / Ctrl+C |
| Open in editor | ⌘O / Ctrl+O |
| Reveal in Finder | ⌘⇧R / Ctrl+Shift+R |
| Delete | Delete / Backspace |

API Endpoints

The plugin exposes REST endpoints at {base}/api/:

View all endpoints

| Endpoint | Method | Description |
|----------|--------|-------------|
| /assets | GET | List all assets |
| /assets/grouped | GET | Assets grouped by directory |
| /search?q= | GET | Search by name/path |
| /thumbnail?path= | GET | Get image thumbnail |
| /file?path= | GET | Serve original file |
| /stats | GET | Asset statistics |
| /importers?path= | GET | Files importing the asset |
| /duplicates?hash= | GET | Assets with matching content hash |
| /open-in-editor | POST | Open file in editor |
| /reveal-in-finder | POST | Reveal in system file explorer |
| /bulk-download | POST | Download as ZIP |
| /bulk-delete | POST | Delete multiple assets |
| /events | GET | SSE stream for real-time updates |

Development

`bash
pnpm install # Install dependencies
pnpm run build # Build UI + plugin
pnpm run dev # Watch mode

Testing

pnpm run test # Run all tests
pnpm run test:watch # Watch mode
pnpm run test:coverage

Playgrounds

pnpm run playground:react
pnpm run playground:vue
pnpm run playground:vanilla
pnpm run playground:preact
pnpm run playground:lit
pnpm run playground:svelte
pnpm run playground:solid
pnpm run playground:qwik
``

License

MIT