❯ Tier List Maker

A tier list maker is a small tool for ranking anything — characters, foods, albums, productivity apps — into ordered rows labeled S, A, B, C, D. This one runs entirely in your browser: your images never upload, your placements auto-save, and exporting is a single click.

How to use

1. Upload images. Click Upload images or drag PNG / JPG / GIF / WebP files onto the page. They land in the pool row.
2. Drag to rank. Drag each image into the S, A, B, C, or D row. Reorder within a row by dragging an image left or right of its neighbors.
3. Customize tiers. Click a tier label to rename it (“God Tier”, “Trash”, “Mid”). Click the color swatch to pick a custom hex. Use ↑/↓ to reorder rows. The × button removes a tier — its items spill back to the pool, not the trash.
4. Add more tiers. Add tier appends a new row at the bottom (defaults to the next unused letter). There is no hard cap, but going past ~10 tiers tends to feel cluttered.
5. Export. Export PNG downloads a 1200×N image containing every row exactly as displayed. Share it on Twitter, Reddit, or Discord.

Storage and persistence

Your tier list — including the actual image bytes — is stored in your browser’s IndexedDB under tier-list-maker. That means:

• Closing the tab does not lose your work. Reopen the page and the same tier list appears.
• Switching browsers or devices does lose your work. IndexedDB is per-origin, per-browser, per-profile.
• Private / incognito tabs flush IndexedDB on close. Don’t build a long tier list there.
• Clear all wipes the IndexedDB store for this tool — irreversibly.

If you want a permanent backup, Export PNG and save the file. There is currently no JSON export / import; the tool optimizes for “make one, share the image, move on.”

Drag and drop on mobile

HTML5 drag-and-drop events don’t fire reliably on touch devices, so the tool sniffs matchMedia('(hover: none)') and switches to tap-to-place: first tap an image to select (it gets a green outline), second tap on a tier drops it at the end of that row. A hint appears in the stats line whenever a selection is active.

The trade-off is that you can’t drop an image at a specific position inside a row on touch — only at the end. Reorder within a row by drag-and-drop on desktop, or by removing and re-adding on mobile.

Privacy

Every operation is local:

• Uploads use the browser’s file API — no fetch, no XMLHttpRequest, no service worker.
• Images are stored as Blob objects inside IndexedDB.
• The exported PNG is composited via OffscreenCanvas and saved with URL.createObjectURL — never sent anywhere.
• The share-link pattern used elsewhere on this site is intentionally not used here, because images can’t fit in a URL fragment.

Open DevTools → Network while you upload, arrange, and export. The only request you’ll see is the initial page load.

How it compares

Tips

• Drop many images at once. The file input accepts multiselect; drag a folder’s worth of screenshots in one go.
• Any aspect ratio is fine — the cell is 96×96 and each image is shown whole (letterboxed), so wide or tall images keep their full content visible.
• Use color to encode meaning. Default S is red (hottest), D is blue (coolest). Swap them or add a black “Banned” tier at the top for items you want to call out.
• Rename tiers as categories, not just letters. “Daily drivers”, “Beta”, “Abandoned” works just as well as S/A/B.

Related tools

• Image Compressor — shrink screenshots before adding them to a tier list.
• Background Remover — strip backgrounds so tier list items pop on the colored row.
• QR Code Generator with Logo — share a link to your exported tier list with a branded QR code.

Frequently asked questions