vite-plugin-asset-manager

Stop grepping for image paths.
See exactly where every asset is used, find duplicates, and clean up what's unused.

Installation • Usage • Features • Configuration • Shortcuts

---

Installation

npm install vite-plugin-asset-manager -D
# or
pnpm add vite-plugin-asset-manager -D
# or
yarn add vite-plugin-asset-manager -D

Usage

// 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
Nuxt 3/4	✅	Official module
Next.js 14+	✅	Official package
TanStack Start	✅	Manual setup required (playground)

Nuxt Module

npm install @vite-asset-manager/nuxt -D

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@vite-asset-manager/nuxt'],
})

Zero-config with automatic floating icon injection, Nuxt DevTools integration, and Nuxt 3/4 support. See the full Nuxt documentation for all options.

Next.js Integration

npm install nextjs-asset-manager -D

// app/api/asset-manager/[[...path]]/route.ts
import { createHandler } from 'nextjs-asset-manager'
const { GET, POST } = createHandler()
export { GET, POST }

Three-step setup: wrap config, add route handler, add client component. See the full Next.js documentation for all options.

Other SSR Frameworks

For TanStack Start, Remix, SvelteKit, and Solid Start, manual script injection is required. See the SSR Integration Guide for setup instructions.

Configuration

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.
  debug: false,                   // Enable debug logging for diagnostics
  aliases: { '@/': 'src/' },      // Path aliases for import detection
})

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

pnpm install          # Install dependencies
pnpm run build:all    # Build everything (packages + plugin)
pnpm run build        # Build main plugin only
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
pnpm run playground:tanstack
pnpm run playground:nuxt
pnpm run playground:nextjs

License

MIT