A web-based theme editor for the Hak5 WiFi Pineapple Pager. Create, customize, and export themes without needing to manually edit JSON files or manage image assets.
This should be considered a beta, and although its functional in my testing, you can very easily mess up your theme. I highly suggest having an SSH connection to your pager so you can change the theme in case it crashes when you to load your custom one.
Created by GainSec
- Visual Theme Editor — Real-time preview of your theme as you make changes
- Color Palette Editor — Customize all 30+ theme colors with visual color pickers
- Asset Management — Upload and manage dashboard icons, status bar icons, spinners, boot animations, and dialog backgrounds
- Interactive Layout Editor — Drag and resize dashboard elements directly in the preview
- Component Editor — Edit component JSON files with a visual property editor or raw JSON mode
- Deep Validation — Validate asset paths, coordinates, and color palettes before export
- Theme Import — Import existing themes from ZIP files to use as a starting point
- Theme Browser — Browse and load themes from a local folder
- Color Extraction — Extract color palettes from any image automatically
- Batch Upload — Upload multiple assets at once with smart filename auto-detection
- Image Processing — Automatic resizing with crop, fit, or stretch options
- Template Presets — Start with pre-configured color schemes (Cyberpunk, Retro, Ocean, etc.)
- Global Search — Quickly find any asset, component, or color with
Ctrl+F - Export to ZIP — Export complete, ready-to-install theme packages
Manage all theme assets in one place. Upload custom icons, backgrounds, and animations with automatic format conversion and resizing.
Customize all theme colors and see live previews of dialogs, alerts, and UI elements.
Edit component JSON files with a visual property editor or switch to raw JSON mode for full control.
Drag and resize dashboard elements directly in the preview. Adjust icon positions and sizes visually.
Set your theme name, author info, and customize the boot animation sequence.
Visit the hosted version at: Coming soon
- Clone or download this repository
- Open
index.htmlin a web browser - No server required — runs entirely in the browser
git clone https://github.com/GainSec/PineapplePager-Themer.git
cd PineapplePager-Themer
open index.html # or just double-click the file- Set Metadata — Enter your theme name, author, version, and description in the Metadata tab
- Customize Colors — Adjust the color palette in the Colors tab, or extract colors from an image
- Upload Assets — Replace default icons with your own custom artwork in the Assets tab
- Edit Components — Fine-tune component properties or raw JSON in the Components tab
- Adjust Layout — Click "Edit Layout" to drag and resize dashboard elements
- Export — Click "Export Theme" to download a ready-to-install ZIP file
- Click "Load ZIP" in the header
- Select a theme ZIP file
- The theme will be loaded with all assets, colors, and component customizations
- Make your modifications and export as a new theme
- Export your theme from the editor (downloads as ZIP)
- Extract the ZIP file
- Copy the theme folder to your Pineapple Pager's
/root/themes/directory - Select the theme from Settings > Display > Theme
| Shortcut | Action |
|---|---|
Ctrl/Cmd + S |
Export theme |
Ctrl/Cmd + O |
Import theme ZIP |
Ctrl/Cmd + F |
Global search |
Ctrl/Cmd + B |
Browse themes |
Ctrl/Cmd + N |
New theme from template |
Escape |
Close modals |
For best results, use these dimensions for your custom assets:
| Asset | Dimensions |
|---|---|
| Background | 480 × 222 px |
| Icons (alerts, payloads, etc.) | 33 × 29 px |
| Item Background | 63 × 62 px |
| Selection Highlight | 71 × 72 px |
| Asset | Dimensions |
|---|---|
| Battery/Volume/Brightness | 20 × 20 px |
| GHz Band Indicators | 20 × 20 px |
| Asset | Dimensions |
|---|---|
| Boot Animation Frames | 480 × 222 px |
| Spinner Frames | 220 × 156 px |
| Asset | Dimensions |
|---|---|
| Full Screen Backgrounds | 480 × 222 px |
| Dialog Backgrounds | 400 × 180 px |
Tip: The editor automatically resizes uploaded images. You can choose between crop (fill), fit (letterbox), or stretch modes.
- Chrome/Edge (recommended)
- Firefox
- Safari
- JSZip — ZIP file handling
- FileSaver.js — File downloads
Theme data is automatically saved to browser localStorage. Your work persists between sessions until you clear browser data.
This project is licensed under the MIT License — see the LICENSE file for details.
Attribution Required: If you use or modify this tool, please include credit to GainSec and a link to https://gainsec.com/
- Created by GainSec
- Built for the Hak5 WiFi Pineapple Pager
This is an unofficial community tool and is not affiliated with or endorsed by Hak5. WiFi Pineapple and Pineapple Pager are trademarks of Hak5 LLC.
