No description
  • TypeScript 98.1%
  • CSS 1%
  • HTML 0.5%
  • JavaScript 0.4%
Find a file
Reki 39b1aa107b Add electron-builder config for Windows exe build
Portable dir target with code signing disabled. Output goes to
release/ directory (gitignored). Build with: npm run electron:build

Co-Authored-By: GLM-5.1 <noreply@z.ai>
2026-04-27 20:20:57 +03:00
docs Initial implementation of AssetViewer application 2026-04-27 17:23:43 +03:00
electron Add recursive folder mode, thumbnail progress bar and README 2026-04-27 19:24:03 +03:00
src Add recursive folder mode, thumbnail progress bar and README 2026-04-27 19:24:03 +03:00
.eslintrc.cjs Initial implementation of AssetViewer application 2026-04-27 17:23:43 +03:00
.gitignore Add electron-builder config for Windows exe build 2026-04-27 20:20:57 +03:00
AGENTS.md Initial implementation of AssetViewer application 2026-04-27 17:23:43 +03:00
electron-builder.yml Add electron-builder config for Windows exe build 2026-04-27 20:20:57 +03:00
index.html Initial implementation of AssetViewer application 2026-04-27 17:23:43 +03:00
package-lock.json Initial implementation of AssetViewer application 2026-04-27 17:23:43 +03:00
package.json Initial implementation of AssetViewer application 2026-04-27 17:23:43 +03:00
postcss.config.js Initial implementation of AssetViewer application 2026-04-27 17:23:43 +03:00
README.md Add recursive folder mode, thumbnail progress bar and README 2026-04-27 19:24:03 +03:00
tailwind.config.js Initial implementation of AssetViewer application 2026-04-27 17:23:43 +03:00
tsconfig.json Initial implementation of AssetViewer application 2026-04-27 17:23:43 +03:00
tsconfig.node.json Initial implementation of AssetViewer application 2026-04-27 17:23:43 +03:00
vite.config.ts Initial implementation of AssetViewer application 2026-04-27 17:23:43 +03:00

AssetViewer

Desktop application for browsing and previewing asset folders — 3D models, textures, PSD files and more.

version

Features

  • Folder tree navigation with lazy loading
  • Recursive mode — show all files from subdirectories in a flat list
  • 3D model preview — interactive viewer with orbit controls for glTF, GLB, FBX, OBJ, DAE, STL
  • Texture preview — PNG, JPG, BMP, GIF, SVG, TGA with zoom and pan
  • PSD viewer — layer list, visibility toggle, composite/per-layer rendering
  • Thumbnail generation — 3D models rendered to preview images with progress bar
  • Smart texture resolution — automatically finds textures in sibling textures/, .fbm/, and parent directories
  • Mouse back button support for navigation

Supported Formats

Category Extensions Preview
3D Models .gltf, .glb, .fbx, .obj, .dae, .stl Interactive 3D viewer (Three.js)
Textures .png, .jpg, .bmp, .tga, .gif, .svg, .webp Image viewer with zoom/pan
Layered .psd Layer list, visibility toggle
Unsupported .blend, .mtl, .ase and others File info only

Tech Stack

  • Electron 33+ — desktop runtime
  • React 18 + TypeScript — UI framework
  • Vite — build tool
  • Three.js + @react-three/fiber — 3D rendering
  • Zustand — state management
  • Tailwind CSS + Lucide React — styling and icons

Getting Started

Prerequisites

  • Node.js 18+
  • npm

Install

npm install

Development

npm run dev

Build

npm run build

Lint & Typecheck

npm run lint
npm run typecheck

Project Structure

AssetViewer/
├── electron/                    # Electron main process
│   ├── main.ts                  # App entry, window creation
│   ├── preload.ts               # IPC bridge (contextBridge)
│   └── services/
│       ├── fileProtocol.ts      # asset:// custom protocol
│       ├── ipcHandlers.ts       # IPC handlers (scan, tree, textures)
│       └── fileScannerShared.ts # Format detection
├── src/                         # React renderer
│   ├── App.tsx                  # Main app layout
│   ├── components/
│   │   ├── Sidebar/             # Folder tree
│   │   ├── ContentArea/         # Asset grid and cards
│   │   └── Viewers/             # 3D, image, PSD viewers
│   ├── store/                   # Zustand state
│   ├── utils/                   # Thumbnail generator, loader utils
│   └── types/                   # TypeScript types
├── docs/plan.md
└── package.json

License

Private