Tier list maker
Add text or image tiles, then sort them into S–F rows. Click or tap a tile to pick it up and click or tap where it goes — or do the whole thing from the keyboard. Rename, recolour, add, and remove rows freely, then export the finished board as a PNG.
How to use this tier list maker
Click or tap a tile to pick it up, then click or tap a tier, the tray, or another tile to drop it there (dropping it on a tile places it just before that tile). Click or tap the picked-up tile again to cancel.
Keyboard: Tab to a tile, press Enter or Space to pick it up. While it’s picked up, ↑/↓ move it between tiers and the tray, ←/→ reorder it in place, and Enter, Space, or Esc set it down.
Tier names, colours, order, and text tiles save automatically in this browser. Image tiles are not saved — export a PNG before closing the tab if you want to keep one.
How this tier list maker works
The board is six rows by default — S, A, B, C, D, F — plus an Unranked tray at the bottom where every new tile starts out. You add tiles two ways: type a label and press Add for a text tile, or use Upload images to add one or more picture files as image tiles. Both kinds land in the tray, ready to be sorted.
Placing a tile is a two-step gesture rather than a drag: pick it up, then choose where it goes. That single decision is what makes the whole tool work identically with a mouse, a touch screen, or a keyboard — there is exactly one interaction model underneath all three input methods, not a mouse-only drag with a keyboard afterthought bolted on.
Editing the rows themselves
- Rename a tier by clicking its letter and typing — it is a real text field.
- Recolour a tier from the small palette behind its colour swatch.
- Reorder rows with the up/down arrow buttons in each tier’s header.
- Add or remove rows with the toolbar button and each row’s ✕ button — removing a tier sends its tiles back to the tray rather than deleting them, and the board always keeps at least one row.
Saving and exporting
Your tier layout and any text tiles are written to this browser’s local storage every time you change something, so reloading the page or coming back later restores exactly where you left off. Image tiles are the one thing that does not survive a reload — see the FAQ below for why — so Export as PNG exists specifically to let you keep a finished board that includes images. The export is drawn directly onto a canvas element: every tier band, label, and tile is placed by the script itself, then downloaded as a single PNG file.
Use cases & honest limitations
Where a tier list is genuinely the right shape
- Ranking a large, roughly-equal-tier set — game characters, weapons, strategies, or team compositions where deciding "this group is clearly stronger than that group" is easy but ranking every single entry against every other one is not.
- Comparing options as a group — foods, movies, songs, tools — when you want a quick visual read on where things land relative to each other, not a precise ordinal ranking.
- Sharing an opinion as an image. A tier list is a format people recognise instantly, and exporting it as a PNG makes it easy to post or send without asking anyone to open a tool themselves.
- Sorting a big pile of options at your own pace. Add everything to the tray first, then work through it — you are never forced to place a tile the moment you add it.
What this tool is not
- Not a gallery of pre-made templates. It gives you a working board with sensible defaults (S/A/B/C/D/F, six functional row colours), not a library of ready-made character sets or background art to pick from.
- Not a place to store images long-term. Image tiles live only in this page’s memory for the current visit — export a PNG if you want to keep the result, and keep the original image files yourself if you want to rebuild the board later.
- Not a multi-user or shared-link board. There is no account and no live collaboration; the board lives in your own browser's local storage, on your own device.
- Not a substitute for actual expertise. The tool sorts what you tell it to sort — it has no opinion of its own about where anything belongs.
Frequently asked questions
What exactly is a tier list?
A tier list is a ranking laid out as rows instead of a single ordered line. Each row (commonly labelled S, A, B, C, D, F from best to worst) holds every item you consider roughly equal, so you only have to decide which band something belongs in, not its exact rank against every other item. That is what makes tier lists faster to make and easier to read than a strict 1-to-N ranking, and why they show up constantly for ranking game characters, strategies, foods, movies, or anything else with more entries than you want to rank one by one.
How do I move a tile without a mouse?
Tab to a tile and press Enter or Space to pick it up. While it is picked up, Arrow Up and Arrow Down move it between tiers (and the unranked tray at the bottom), Arrow Left and Arrow Right reorder it within its current row, and Enter, Space, or Escape sets it back down. Every placement a mouse can make, the keyboard can make too — nothing on this board requires drag-and-drop.
Does the click-to-place method work the same on a phone?
Yes. Tapping is the same gesture as clicking: tap a tile to pick it up, then tap a tier, the tray, or another tile to drop it there. This tool deliberately does not rely on drag gestures, because HTML5 drag-and-drop does not fire on touch screens at all — a tap-to-place model was built instead so the same interaction works everywhere.
Can I use my own images as tiles?
Yes. Use Upload images to add one or more picture files as tiles; each is shown as a small square thumbnail you can place exactly like a text tile. The image never leaves your device — it is decoded locally in your browser to build the preview.
Will my tier list still be here if I close the tab?
Your tier row names, colours, order, and any text tiles are saved automatically in this browser’s local storage, so they come back on your next visit to this page in the same browser. Image tiles do not survive a reload: the previews are built from a temporary in-memory reference that only lasts for the current page load, and storing the images themselves would need far more space than local storage reasonably allows. Export a PNG before you close the tab if you want to keep an image-based board.
What is the unranked tray for?
Every new tile starts in the tray at the bottom, labelled Unranked. It is not a tier — it is just holding space for anything you have not sorted yet, so you can add a whole batch of items first and rank them at your own pace afterward. Removing a tier also sends its tiles back to the tray rather than deleting them, so restructuring your rows never loses a tile.
Can I rename S/A/B/C/D/F or add more rows?
Yes to both. Click directly on a tier’s letter to rename it — it is a normal text field, not a fixed label — and use Add tier to append a new row, which you can then rename, recolour from the palette, and move up or down with the arrow buttons. At least one tier always has to remain, so the board can never be left with nowhere to put a tile.
Does this tool store or upload what I type or the images I add?
No server ever sees it. Everything — adding tiles, sorting them, drawing the exported PNG — runs in your browser. Text tiles and your tier layout are kept in this browser’s local storage purely so the board is still here next time; images are held only in this page’s memory for the current visit. Nothing you add is transmitted anywhere.
How does the PNG export work?
Export as PNG draws the entire board — every tier band, label, and tile — onto a canvas element by hand, sized to fit however many tiles wrap onto each row, then downloads it as an image file. It is a snapshot of your board at that moment, produced entirely on your device; nothing is sent to a server to render it.