Tier List Maker

Build, customize, and share tier lists. Drag images and labels into S/A/B/C/D/F rows — or your own custom tiers.

What is tier list maker?

A tier list is the simplest possible visual ranking format: a stack of horizontal rows, each labeled with a tier (S, A, B, C, D, F by default — descending), and items dropped into whichever row matches their relative quality. The format originated in Japanese fighting-game communities in the early 2000s, where character “tiers” captured how viable each fighter was at the top level of competitive play. It spread to every other corner of the internet because it’s such an efficient way to communicate a take: a single image conveys “I love these, I’m meh on these, I avoid these” without a paragraph of explanation.

This tool is a fully-featured tier list maker that runs entirely in your browser. Items can be images (uploaded from your device, pasted from your clipboard, or referenced by URL) or text labels (for things you don’t have art for, or simple word-based lists). You can mix the two freely in the same list. Tier rows are fully customizable — rename them, recolor them, add new ones, remove ones you don’t need. Within a tier, items are ordered: an S-tier #1 is meaningfully ahead of an S-tier #3.

The drag-and-drop interaction works identically on touch screens and mouse. Press an item and drag — a 2-pixel insertion line shows where it’ll land. Keyboard users: focus any item with Tab, press Space to lift, arrow keys to move (Up/Down between rows, Left/Right between insert positions), Space to drop, Escape to cancel. Auto-scroll kicks in when you drag near the top or bottom of the viewport, so long lists stay reachable on mobile.

Saving and sharing. Your list auto-saves to localStorage as you build, with a 250 ms debounce so it doesn’t fire on every keystroke. Closing the tab and reopening the page restores everything (with one caveat — see “uploaded images” below). Two output paths are available:

Download PNG renders the entire list to a 1200-pixel-wide canvas, including the title (if you set one), each tier row with its colored rail, the Unranked pool, and a small sometools.com/tier-list-maker footer. The image is sized cleanly for Discord, Twitter, Slack, and similar chat clients.
Copy share link puts a URL on your clipboard that encodes the full state in the fragment (the part after #). Anyone who opens the link sees the same list — title, tiers, items, ordering. The link is capped at 8000 characters; lists that exceed the cap show a “use PNG export” message.

One important caveat about uploaded images. When you upload a file from your device, the browser turns it into a temporary blob: URL that only exists in your tab. Those URLs can’t travel to a friend’s browser, so the share-link path strips uploaded images and shows you a count of how many were dropped. If you want a fully-shareable list, two options: host your images online (Imgur, GitHub, your own server) and use the Paste URL flow, or share the PNG export, which embeds every image directly. Reloading the page also wipes uploaded blobs (their data lives only in the live tab) — re-upload them as needed.

Privacy. Everything runs locally in your browser. Your form inputs (title, tier labels and colors, items) are saved to your own browser’s localStorage so a refresh doesn’t lose them, but the data never leaves your device — there’s no server, no API, no analytics on the list contents. The storage key is tier-list-maker:state:v1. To wipe it, click Reset (twice — the second click confirms) or use your browser’s “clear site data” tool.

Keyboard shortcuts, summarized: Tab moves focus between items and controls. On a focused item, Space (or Enter) lifts it; arrow keys then move the destination indicator between rows (Up/Down) and within a row (Left/Right); Space drops it; Escape cancels. Ctrl+V (Cmd+V) anywhere on the widget pastes images from your clipboard. Inside text inputs, Enter submits and Escape cancels.

The tool is a single page. No accounts, no upload to a server, no premium tier. It pairs naturally with the Meme Generator (when your tier list is also a meme) and the Color Palette Generator (for picking custom tier-row colors that match your project).

When to use a tier list maker

Ranking characters in a franchise — Marvel heroes, Pokémon starters, Smash Bros fighters — drop a folder of art into the pool and drag each into S/A/B/C/D/F. Mixed media (images for the icons, text labels for niche picks the artwork doesn't cover) lives in the same list.
Comparing options at a decision point — Job offers, apartments, college shortlist, candidate pools. Add each option as a text item, define your own tier labels (e.g. 'Top contenders' / 'Backup' / 'Pass'), and the visual layout makes the trade-offs obvious in one glance.
Sharing a take with friends or a community — Build the list, copy the share link (everything is encoded in the URL fragment — no server, no account), and post it to Discord, Twitter, or Slack. Recipients open the same list in their browser. Or export a PNG for chat clients that don't unfurl URLs.
Quick visual rankings during a stream or class — Drag-and-drop on touch and mouse, customizable colors, and a Reset button means rebuilding a list mid-conversation takes seconds. Pair with screen-share for an instant ranking exercise.
Comparing food, music, or hobby items — Restaurants, albums, board games, coffee roasters. Mix images (album art) with text (restaurants without a logo handy). Items inside a tier are ordered, so a top-tier #1 is meaningfully ahead of #3.

How to use the Tier List Maker

Add items to the unranked pool — Click Upload images for one or many at once, Add text item to type a label, or Paste URL for an online image. Ctrl+V (Cmd+V on Mac) anywhere on the widget pastes images directly from your clipboard.
Drag items into tier rows — Press and drag an item with your mouse, finger, or stylus. Drop into any tier row; the insertion line shows where it'll land. Reorder within a row by dragging to the new spot. Keyboard users: focus an item with Tab, press Space to lift, arrow keys to move, Space again to drop.
Customize the tiers — Click any row's left rail to rename it, change its color, reorder it, or delete it. The Add tier button at the bottom appends a new row. Removing a row sends its items back to the pool — they're never deleted.
Save, export, or share — Your list auto-saves to your browser; close the tab and come back later. Download PNG produces a 1200-pixel-wide image suitable for Discord/Twitter. Copy share link puts a URL on your clipboard that anyone can open to see the same list (with one caveat — see FAQ).

Worked examples

Six-pizza taste test (text-only list)

Input:  Six text items: Margherita, Pepperoni, Hawaiian, BBQ Chicken, Mushroom, Veggie
Output: S: Margherita, Pepperoni · A: Mushroom, BBQ Chicken · B: Veggie · C: Hawaiian

Inside each tier the left-to-right order is preserved (S #1 = Margherita).

Custom 4-tier list with renamed rows

Input:  Default 6 rows trimmed to 4 and renamed: Must-have / Nice-to-have / Maybe / Skip
Output: Each row is independently colored; the two trimmed rows' items moved back to Unranked, then re-dragged into the new rows.

Removing a row never deletes its items — they rejoin the pool so you can re-rank without re-uploading.

Image+text mixed franchise list

Input:  10 image uploads (character art) + 3 text labels for variants the art doesn't cover
Output: All 13 items appear in the pool as 96×96 thumbnails (images) or labeled chips (text); drag each into a tier.

Uploaded images stay on your device. Sharing the list by link will skip them — for collaborative lists, use image URLs instead.

Frequently asked questions

How do I share a tier list with friends?

Click Copy share link. The full state is encoded into the URL fragment (the bit after #) — no server, no account. Send the link in any chat app. Note: uploaded images don't share because they only exist on your device. If you want a fully-shareable list, use online image URLs (Paste URL) instead, or share the PNG export.

Why doesn't drag-and-drop work on my phone?

It does — the tool uses Pointer Events, which work the same on touch as on mouse. If a drag isn't starting, you might be tapping a button by mistake (the rail edits a tier, items pick up). Press and hold an item, then drag — there's a 6-pixel movement threshold so a quick tap opens its edit popover instead of starting a drag.

Can I use my own tier labels and colors?

Yes. Click any row's left rail to open the editor: change the label, pick a new color, move the row up/down, or delete it. Add tier appends a new row at the bottom. The default S/A/B/C/D/F tiers are just a starting point.

What does the PNG export look like?

A 1200-pixel-wide image: optional title bar at the top, then each tier row (colored rail on the left with the row label, items as 96×96 thumbnails on the right), then the Unranked pool, then a small sometools.com/tier-list-maker footer. White background. Sized cleanly for Discord/Twitter unfurl.

Is there a limit to how many items or tiers I can have?

Practical limits only. You can add as many tiers as you like (we recommend ≤ 10 for readability), and there's no hard item cap. The share-link path is the only place you'll hit a limit: links are capped at 8000 characters, which holds roughly 30–80 items depending on label length. Large lists are best shared via the PNG export.

What happens if I close the browser tab?

Your list auto-saves to your browser's localStorage. Open the page again later and it's right where you left it. Uploaded images are the one exception — their data only exists for the current session, so re-uploading after a refresh is needed. For permanent images, paste their URL instead.

Can I share my list publicly without signing up?

Yes, that's the point. Everything is local-first; share by URL or PNG. There's no account, no server, no analytics on your list contents — the only data the site sees is the page hit itself.

Why are my uploaded images dropped from the share link?

Uploaded files become temporary blob: URLs that only exist in your tab. They can't traverse a URL to someone else's browser. Two options: host the image online (e.g. on Imgur or a similar host) and use Paste URL, or share the PNG export, which embeds every image directly.

Does this tool save my data?

Your form inputs are stored only in your own browser's localStorage so a refresh doesn't lose them. The data never leaves your device — there is no server to send it to. To wipe the saved state, click Reset (twice, to confirm), or use your browser's "clear site data" tool. The storage key is tier-list-maker:state:v1.

Can I print my tier list?

Use the PNG export and print the image — that's the cleanest path. The widget itself isn't print-styled. The exported image is 1200 pixels wide, which prints cleanly at letter or A4 size.