Browser-based editor for Helbreath .pak sprite files. Built with Vue 3, TypeScript, and PixiJS.
# Install dependencies
npm install
# Start dev server (http://localhost:5173)
npm run dev
# Production build
npm run build
# Preview production build
npm run preview
- Open a PAK file — Click
File > Open or press Ctrl+O to load a .pak sprite archive.
- Browse sprites — The sidebar tree lists all sprites in the archive. Click one to view it.
- Navigate frames — Use the frame list or
Left/Right arrow keys to step through frames. Home/End jump to first/last.
- Play animation — Press
Space to play/pause frame animation.
- Edit pivot points — Select a frame and adjust pivot X/Y in the properties panel. Changes apply immediately.
- Zoom & pan —
Ctrl++/Ctrl+- to zoom, Ctrl+0 to reset.
- Toggle overlays —
Ctrl+B frame borders, Ctrl+P pivot points, Ctrl+G grid.
- Save —
Ctrl+S saves in place, Ctrl+Shift+S saves to a new file. Supports PAK and PAK2 (encrypted) formats.
- Export — Export individual sprites or frames as PNG or BMP.
| Format |
Read |
Write |
| PAK (unencrypted) |
Yes |
Yes |
| PAK2 (encrypted) |
Yes |
Yes |
| OPK |
Yes |
Yes |
| BMP (1/4/8/16/24/32-bit) |
Yes |
Yes |
| PNG |
— |
Export only |
# Unit tests
npm run test
# Unit tests with UI
npm run test:ui
# E2E tests (requires Playwright browsers)
npm run test:e2e
# Type checking
npm run type-check
# Lint
npm run lint
| Shortcut |
Action |
Ctrl+O |
Open file |
Ctrl+S |
Save |
Ctrl+Shift+S |
Save as |
Ctrl+Z |
Undo |
Ctrl+Y |
Redo |
Left / Right |
Previous / Next frame |
Home / End |
First / Last frame |
Space |
Play / Pause animation |
Ctrl++ / Ctrl+- |
Zoom in / out |
Ctrl+0 |
Reset zoom |
Ctrl+B |
Toggle frame borders |
Ctrl+P |
Toggle pivot points |
Ctrl+G |
Toggle grid |