{"id":42448079,"url":"https://github.com/ejirocodes/vite-plugin-asset-manager","last_synced_at":"2026-02-16T13:13:40.998Z","repository":{"id":334914031,"uuid":"1143219289","full_name":"ejirocodes/vite-plugin-asset-manager","owner":"ejirocodes","description":"Static asset management plugin for Vite projects","archived":false,"fork":false,"pushed_at":"2026-02-10T20:56:17.000Z","size":17611,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-10T23:48:13.814Z","etag":null,"topics":["static-assets","vite","vite-plugin","vitejs"],"latest_commit_sha":null,"homepage":"https://npm.im/vite-plugin-asset-manager","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ejirocodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-27T10:04:38.000Z","updated_at":"2026-02-10T20:56:21.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ejirocodes/vite-plugin-asset-manager","commit_stats":null,"previous_names":["ejirocodes/vite-plugin-asset-manager"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/ejirocodes/vite-plugin-asset-manager","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejirocodes%2Fvite-plugin-asset-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejirocodes%2Fvite-plugin-asset-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejirocodes%2Fvite-plugin-asset-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejirocodes%2Fvite-plugin-asset-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ejirocodes","download_url":"https://codeload.github.com/ejirocodes/vite-plugin-asset-manager/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejirocodes%2Fvite-plugin-asset-manager/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29508746,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T09:05:14.864Z","status":"ssl_error","status_checked_at":"2026-02-16T08:55:59.364Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["static-assets","vite","vite-plugin","vitejs"],"created_at":"2026-01-28T08:34:10.294Z","updated_at":"2026-02-16T13:13:40.984Z","avatar_url":"https://github.com/ejirocodes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./.github/assets/banner.png\" alt=\"Vite Plugin Asset Manager\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003evite-plugin-asset-manager\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  Stop grepping for image paths.\u003cbr/\u003e\n  See exactly where every asset is used, find duplicates, and clean up what's unused.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vite-plugin-asset-manager\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vite-plugin-asset-manager.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\" alt=\"Version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vite-plugin-asset-manager\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/vite-plugin-asset-manager.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\" alt=\"Downloads\"\u003e\u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/node-%3E%3D22-brightgreen?style=flat\u0026colorA=18181B\" alt=\"Node\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/vite-%E2%89%A55.0.0-646CFF?style=flat\u0026colorA=18181B\" alt=\"Vite\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/license-MIT-blue?style=flat\u0026colorA=18181B\" alt=\"License\"\u003e\n  \u003ca href=\"https://deepwiki.com/ejirocodes/vite-plugin-asset-manager\"\u003e\u003cimg src=\"https://deepwiki.com/badge.svg\" alt=\"Ask DeepWiki\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e •\n  \u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e •\n  \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e •\n  \u003ca href=\"#configuration\"\u003eConfiguration\u003c/a\u003e •\n  \u003ca href=\"#keyboard-shortcuts\"\u003eShortcuts\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## Installation\n\n```bash\nnpm install vite-plugin-asset-manager -D\n# or\npnpm add vite-plugin-asset-manager -D\n# or\nyarn add vite-plugin-asset-manager -D\n```\n\n## Usage\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport AssetManager from 'vite-plugin-asset-manager'\n\nexport default defineConfig({\n  plugins: [AssetManager()],\n})\n```\n\nStart your dev server and access the Asset Manager in three ways:\n- Visit `/__asset_manager__/` directly in your browser\n- Press **`⌥⇧A`** (Option+Shift+A) to toggle the floating panel\n- Click the floating icon button injected into your app (drag to reposition)\n\n## Features\n\n| Feature | Description |\n|---------|-------------|\n| **Fully Responsive** | Mobile-first design that works seamlessly from 320px to 4K+ displays |\n| **Asset Discovery** | Automatically scans and catalogs images, videos, audio, fonts, documents, and data files |\n| **Real-time Updates** | File changes reflected instantly via Server-Sent Events |\n| **Floating Icon** | Draggable \u0026 resizable overlay panel with keyboard shortcuts (⌥⇧A), snaps to all 4 edges |\n| **Mobile Optimized** | Touch-friendly UI with 44×44px tap targets, bottom sheet preview, drawer navigation |\n| **Automatic Theming** | Light/dark mode support based on system preferences |\n| **Thumbnail Generation** | Sharp-powered thumbnails with dual-tier caching |\n| **Import Tracking** | See which files import each asset with click-to-open-in-editor |\n| **Duplicate Detection** | Content-based deduplication using MD5 hashing |\n| **Advanced Filtering** | Filter by size, date modified, and file extension |\n| **Bulk Operations** | Multi-select for batch download (ZIP), copy paths, or delete |\n| **Keyboard Navigation** | Full keyboard support with vim-style bindings |\n| **Context Menu** | Right-click for quick actions (copy, reveal in Finder, delete, etc.) |\n| **Performance** | Code splitting reduces main bundle to 75 KB, lazy loading for optimal speed |\n| **Accessibility** | WCAG 2.1 Level AAA compliant with reduced motion support |\n\n## Framework Support\n\n| Framework | Status | Notes |\n|-----------|--------|-------|\n| Vanilla | ✅ | Fully automatic |\n| Vue | ✅ | Fully automatic |\n| React | ✅ | Fully automatic |\n| Preact | ✅ | Fully automatic |\n| Lit | ✅ | Fully automatic |\n| Svelte | ✅ | Fully automatic |\n| Solid | ✅ | Fully automatic |\n| Qwik | ✅ | Fully automatic |\n| **Nuxt 3/4** | ✅ | [Official module](#nuxt-module) |\n| **Next.js 14+** | ✅ | [Official package](#nextjs-integration) |\n| **TanStack Start** | ✅ | [Manual setup required](./docs/SSR_INTEGRATION.md#tanstack-start-setup) ([playground](./playgrounds/tanstack/)) |\n\n### Nuxt Module\n\nFor Nuxt 3/4 projects, use the official module for automatic integration:\n\n```bash\nnpm install @vite-asset-manager/nuxt -D\n```\n\n```ts\n// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['@vite-asset-manager/nuxt'],\n})\n```\n\nFeatures:\n- Automatic floating icon injection (no manual setup)\n- Nuxt DevTools integration\n- Supports Nuxt 3 and 4 directory structures\n- Dev-only (zero production footprint)\n\n### Next.js Integration\n\nFor Next.js 14+ projects, use the official integration package:\n\n```bash\nnpm install nextjs-asset-manager -D\n```\n\n**Step 1:** Wrap your Next.js config to suppress dev server request logging:\n\n```ts\n// next.config.ts\nimport type { NextConfig } from \"next\"\nimport { withAssetManager } from \"nextjs-asset-manager\"\n\nconst nextConfig: NextConfig = {}\nexport default withAssetManager(nextConfig)\n```\n\n**Step 2:** Create an API catch-all route:\n\n```ts\n// app/api/asset-manager/[[...path]]/route.ts\nimport { createHandler } from 'nextjs-asset-manager'\n\nconst { GET, POST } = createHandler()\nexport { GET, POST }\n```\n\n**Step 3:** Add the client component to your root layout:\n\n```tsx\n// app/layout.tsx\nimport { AssetManagerScript } from 'nextjs-asset-manager'\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    \u003chtml lang=\"en\"\u003e\n      \u003cbody\u003e\n        {children}\n        \u003cAssetManagerScript /\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  )\n}\n```\n\nFeatures:\n- Dev-only (returns 404 in production)\n- Automatic floating icon injection via client component\n- Suppresses asset manager request logging in dev server\n- Default base path: `/api/asset-manager`\n- Singleton management for HMR stability\n- Composable with other `withX` plugins (`withSentryConfig`, `withBundleAnalyzer`, etc.)\n\n### Other SSR Frameworks\n\nFor SSR frameworks (Remix, SvelteKit, Solid Start), manual script injection is required. See the **[SSR Integration Guide](./docs/SSR_INTEGRATION.md)** for setup instructions.\n\n## Configuration\n\n```ts\nassetManager({\n  base: '/__asset_manager__',     // Dashboard URL path\n  include: ['src', 'public'],     // Directories to scan\n  exclude: ['node_modules', '.git', 'dist'],\n  thumbnailSize: 200,             // Thumbnail dimensions (px)\n  floatingIcon: true,             // Show toggle button in host app\n  watch: true,                    // Enable real-time updates\n  launchEditor: 'code',           // Editor: code, cursor, webstorm, vim, etc.\n  debug: false,                   // Enable debug logging for diagnostics\n  aliases: { '@/': 'src/' },      // Path aliases for import detection\n})\n```\n\n## Asset Types\n\n| Type | Extensions |\n|------|------------|\n| Image | `png` `jpg` `jpeg` `gif` `svg` `webp` `avif` `ico` `bmp` `tiff` `heic` |\n| Video | `mp4` `webm` `ogg` `mov` `avi` |\n| Audio | `mp3` `wav` `flac` `aac` |\n| Document | `pdf` `doc` `docx` `xls` `xlsx` `ppt` `pptx` |\n| Font | `woff` `woff2` `ttf` `otf` `eot` |\n| Data | `json` `csv` `xml` `yml` `yaml` `toml` |\n| Text | `md` `txt` |\n\n## Keyboard Shortcuts\n\n| Action | Shortcut |\n|--------|----------|\n| Navigate grid | `←` `↑` `→` `↓` or `j`/`k` |\n| Focus search | `/` |\n| Close preview | `Escape` |\n| Toggle selection | `Space` |\n| Open preview | `Enter` |\n| Select all | `⌘A` / `Ctrl+A` |\n| Copy paths | `⌘C` / `Ctrl+C` |\n| Open in editor | `⌘O` / `Ctrl+O` |\n| Reveal in Finder | `⌘⇧R` / `Ctrl+Shift+R` |\n| Delete | `Delete` / `Backspace` |\n\n## API Endpoints\n\nThe plugin exposes REST endpoints at `{base}/api/`:\n\n\u003cdetails\u003e\n\u003csummary\u003eView all endpoints\u003c/summary\u003e\n\n| Endpoint | Method | Description |\n|----------|--------|-------------|\n| `/assets` | GET | List all assets |\n| `/assets/grouped` | GET | Assets grouped by directory |\n| `/search?q=` | GET | Search by name/path |\n| `/thumbnail?path=` | GET | Get image thumbnail |\n| `/file?path=` | GET | Serve original file |\n| `/stats` | GET | Asset statistics |\n| `/importers?path=` | GET | Files importing the asset |\n| `/duplicates?hash=` | GET | Assets with matching content hash |\n| `/open-in-editor` | POST | Open file in editor |\n| `/reveal-in-finder` | POST | Reveal in system file explorer |\n| `/bulk-download` | POST | Download as ZIP |\n| `/bulk-delete` | POST | Delete multiple assets |\n| `/events` | GET | SSE stream for real-time updates |\n\n\u003c/details\u003e\n\n## Development\n\n```bash\npnpm install          # Install dependencies\npnpm run build:all    # Build everything (packages + plugin)\npnpm run build        # Build main plugin only\npnpm run dev          # Watch mode\n\n# Testing\npnpm run test         # Run all tests\npnpm run test:watch   # Watch mode\npnpm run test:coverage\n\n# Playgrounds\npnpm run playground:react\npnpm run playground:vue\npnpm run playground:vanilla\npnpm run playground:preact\npnpm run playground:lit\npnpm run playground:svelte\npnpm run playground:solid\npnpm run playground:qwik\npnpm run playground:tanstack\npnpm run playground:nuxt\npnpm run playground:nextjs\n```\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fejirocodes%2Fvite-plugin-asset-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fejirocodes%2Fvite-plugin-asset-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fejirocodes%2Fvite-plugin-asset-manager/lists"}