Tier List Maker

What a tier list is: and what it is not

A tier list groups comparable items into ordered bands such as S, A, B and C. A higher row usually means a stronger preference, better performance or closer fit for the criterion you chose. The tool does not calculate a score or decide what belongs where.

That makes a tier list different from two other common boards:

Use a tier list for opinions and comparative judgments: favourite albums, product options, game characters, recipes to repeat or ideas to prioritise. Use a checklist for completion and a Kanban board when items move through work stages.

Choose useful tiers before ranking

The default S–F labels are conventional, not mandatory. Rename them to match the decision: Excellent / Good / Maybe / Skip, First choice / Backup / Not suitable, or any other scale whose meaning remains clear. You can use up to 12 tier rows.

Decide the criterion before moving items. Ranking “best value” may produce a very different board from ranking “best quality.” If people will see the exported image without your notes, a precise title and descriptive row labels make the result easier to understand.

Items in the same tier can still be reordered. Use that order when you want left-to-right preference within a tier; otherwise, treat all items in the row as equivalent.

Text and local image items

The board accepts up to 100 items in total, including up to 60 images. Text items work well for names, options and ideas. Image items are normalized in the browser so different source dimensions fit predictable tiles and unnecessary image metadata is not carried into the saved project.

For images, the accepted source formats are PNG, JPEG and WebP. Each source file can be up to 8 MiB, no side can exceed 8192 pixels, and the decoded image can contain at most 16 megapixels. Accepted images are resized locally when needed to a maximum of 512 × 512 pixels. Normalized image data is capped at 32 MiB for the project.

Remote image URLs and SVG uploads are deliberately not accepted. Keeping the inputs to decoded local raster images avoids broken remote resources, cross-origin canvas errors and active SVG/XML content. OWASP recommends allowlisting necessary formats, imposing size limits, checking more than the claimed MIME type, and rewriting images as layered upload defenses in its File Upload Cheat Sheet.

Dragging is optional

Drag and drop is convenient, but it is not the only way to rank. Focus an item and use its move controls, or enter keyboard move mode with Enter or Space. Arrow keys change the proposed tier and position; Enter or Space confirms, and Escape cancels.

This also makes the editor practical on a phone, where precise dragging can be awkward. The W3C guidance for WCAG 2.2 dragging movements explains why functionality that uses dragging needs a simpler pointer alternative. Here, the same move is available by drag, keyboard and click or tap.

What is saved in this browser

The title, tiers, item text, image data and ranking stay in browser storage on this device. They are not placed in the page URL or sent to the server as editor data. The local recovery copy uses IndexedDB, so an ordinary refresh can restore your work.

Local recovery is not cloud storage. A different browser or device cannot see the project, clearing site data removes it, and someone using the same browser profile may be able to reopen it. Use Clear project when working on a shared device, and export project JSON when you need a deliberate backup.

JSON, PNG and SVG serve different purposes

JSON import is validated before it replaces the current project. A malformed, unsupported or oversized file leaves the open project unchanged. Project JSON is capped at 48 MiB.

PNG is drawn directly in the browser with the normalized local images. The browser-standard canvas.toBlob() method creates the download; because remote images are not used, the canvas remains exportable rather than becoming cross-origin tainted.

SVG export is generated from a small, non-interactive set of shapes, text and image elements. PNG, JPEG or WebP item pixels are embedded inside the SVG; they are not traced or converted to vectors. MDN documents that the SVG <image> element can display raster images. The exported file does not copy arbitrary uploaded SVG, scripts, links or HTML.

Limits that keep export reliable

Export widths are 800, 1200, 1600 or 2400 pixels. PNG can be generated at 1× or 2× when the resulting bitmap remains within 8192 pixels per side and 16 × 1024 × 1024 pixels (about 16.8 megapixels). If a 2× export would exceed a browser-safe limit, the tool explains the problem instead of silently shrinking the board. SVG export follows the same 48 MiB project and file safety boundary.

Unranked items are left out of the finished image by default. Turn on Include unranked items if you want them rendered as a final neutral row. Always review the preview: a very long title, many rows or many items can make a technically valid board less readable when shared at a small size.

Common tier-list mistakes

• Changing the criterion halfway through. Write the comparison in the title before ranking.
• Using unclear row names. Labels such as “Maybe” and “Avoid” communicate more than unexplained colors.
• Treating a tier as an exact score. Items in a band share a category; their distance from another band is not a measured quantity.
• Forgetting the unranked pool. Unranked items are not automatically part of a finished export.
• Sharing only the project file. JSON is for reopening the editor; use PNG or SVG when the recipient only needs to view the result.