A self-contained, browser-based VTT token maker for Roll20, Foundry VTT, OwlBear Rodeo, and any other virtual tabletop platform.
- Upload any portrait — PNG, JPG, or WEBP
- 10 built-in borders — Iron Ring, Celtic Gold, Vine Serpent, Blood Ruby, Runic Amethyst, Sapphire Knot, Dragon Coil, Dwarven Rune, Iron Barb, Copper Vine
- Drag to reposition — click and drag the portrait inside the token frame
- Scroll to zoom — mousewheel over the preview to scale
- Independent X/Y scaling — stretch horizontally or vertically with separate sliders
- Image adjustments — brightness, contrast, saturation sliders; flip horizontal; rotate 90°
- Custom borders — upload your own 512×512 PNG border at any time
- Safe area overlay — toggle a ring to see what the border clips
- Export — downloads a 512×512 transparent PNG ready for any VTT
Online: visit the Cloudflare Pages deployment (no install required).
Local dev:
git clone https://github.com/Sectr99/Tokenizer.git
cd Tokenizer
npm install
npm run dev # watch mode — rebuilds CSS on change
npx serve . -l 3000Or just open index.html directly after running npm run build:css once.
To use your own border art:
- Create a 512×512 PNG with a transparent background
- Design your border ring in the center, leaving the middle clear for the portrait
- Click + Add custom border in the app to load it
Tokenizer/
├── index.html # App shell
├── css/
│ ├── input.css # Tailwind v4 source
│ └── main.css # Built output (committed)
├── js/
│ ├── app.js # Canvas logic + event handlers
│ └── borders.js # Border definitions
├── assets/ # Border images
├── package.json # Build scripts (Tailwind CLI)
├── wrangler.jsonc # Cloudflare Pages config
├── README.md # This file
├── LICENSE # MIT License
└── CHANGELOG.md # Version history
- Color tint overlay per border
- Token size presets (Small / Medium / Large / Huge)
- Text label beneath token
- Batch export
MIT — free to use, modify, and distribute. See LICENSE for details.