Gamer-Tech Lifestyle
NIKKE Tierlist Maker: Build and Share Custom Tier Lists with Drag-and-Drop and PNG Export
TL;DR
- Drag-and-drop tier list builder: All 164+ NIKKE units with portraits, organized in a unit pool you drag into custom tiers
- Custom tiers and colors: Add, remove, rename, and recolor tiers. Color picker stays open with live preview and OK button for precise customization
- One-click PNG export: Export your tier list as a clean PNG image with proper borders, badges, and uniform tier label widths
- Element-colored portraits: Unit cards show element colors as portrait borders for quick visual identification
- Draft persistence: Your work-in-progress tier list is saved to localStorage and restored when you return
How It Works
The tierlist maker is a self-contained page on nikkers.cc that gives you a unit pool at the bottom containing every NIKKE unit and a set of customizable tiers above. Drag units from the pool into tiers, rearrange them within tiers, or drag them back to the pool.
Unit Cards
Each unit card displays the character's portrait with an element-colored border for quick visual identification. Fire units get red borders, water gets blue, electric gets yellow, and so on. The card also shows the unit name in a styled label bar. When exported to PNG, these borders and badges render exactly as they appear on screen.
Custom Tiers
Start with the default tier set (S, A, B, C, D) or build your own from scratch. Each tier supports:
- Rename: Double-click the tier label to rename it. Labels auto-wrap for long text (up to 120px width)
- Recolor: Click the color swatch to open a color picker with preset colors (including purple, magenta, and black) and live preview. The picker stays open until you click OK, so you can try multiple colors before committing
- Add/remove: Add new tiers or remove empty ones with dedicated buttons
- Reset: Reset buttons let you clear individual tiers or the entire board
PNG Export
The export function generates a clean PNG image of your complete tier list. The export pipeline clones the live DOM cards to ensure correct rendering of borders, badges, and element colors. Tier labels are measured to find the widest label, then all labels are set to uniform width for a clean, aligned look. Portrait images use crossOrigin=anonymous to satisfy canvas taint restrictions.
The exported image is suitable for sharing on Discord, Reddit, Twitter, and other platforms. It includes all your tier labels, colors, and unit placements exactly as they appear in the builder.
SEO/AI Metadata
The tierlist maker page includes structured SEO and AI-friendly metadata, making it discoverable through search engines and AI assistants. If you search for "NIKKE tier list maker" or "custom NIKKE tierlist," this tool should surface alongside the major tier list sites.
Part of the NIKKE Toolkit
The tierlist maker joins the existing suite of NIKKE community tools on nikkers.cc:
- Endgame Tierlist & Investment Guide: Data-driven rankings from top 50 union and top 200 solo raid data
- Core Dust Breakpoints: Optimal outpost levels for maximum core dust production
- CP Deficit Calculator: Combat power deficit and stat penalty calculations
- SR Doll Calculator: Resource planning for SR doll leveling
Use the endgame tierlist as a reference for investment priorities, then build your own custom tier list in the maker to share your personal rankings with your union or community.
Ask Celeste
Q: Does the tierlist maker include all current NIKKE units?
A: Yes, all 164+ units currently in the game are included with their official portraits. New units are added as they're released. The unit data comes from the same database that powers the endgame tierlist, so it stays current with game updates.
Q: Can I save my tier list and come back to it later?
A: Your work-in-progress is automatically saved to your browser's localStorage. When you return to the page, your draft is restored exactly where you left off - tiers, colors, unit placements, and all. Note that clearing your browser data will also clear your saved draft.
Q: Why can't I export - the PNG comes out blank or broken?
A: The most common cause is ad blockers or browser extensions that block cross-origin image loading. The export needs to draw unit portraits onto a canvas element, which requires the images to load with CORS headers. Try disabling extensions temporarily, or use an incognito window. If images still won't load, it may be a network issue with the portrait CDN.