Case file
August 10, 2025 ★ Featured REF/TIERLIST

Steam Tierlist Maker

A web application for creating custom tier lists of Steam game library.

Next.jsTypeScript

Steam Tierlist Maker

A browser application for ranking Steam games into tiers. It imports a game library through the Steam Web API and provides tier editing and PNG export.

Features

  • Library import — two methods:
    • Standard: public Steam profile URL or Steam ID.
    • Family sharing: Steam Web API token, which also covers shared libraries.
  • Drag and drop — move games between tiers and reorder them within a tier.
  • Tier customization — rename tiers, change tier colors, add and remove tiers.
  • Library filtering — sort by name or playtime, or hide unplayed titles.
  • Image export — render the current tier list to a PNG.
  • Local storage — tier lists persist in browser local storage; nothing is written server-side.

Technology Stack

Frontend

  • Next.js
  • React 19
  • TypeScript
  • Tailwind CSS

External APIs

  • Steam Web API — game metadata and library data

Usage

Importing games

  1. Select Import Steam Games.
  2. Choose an import method:
    • Standard — enter a Steam profile URL or Steam ID. The profile must be public.
    • Family sharing — enter a Steam Web API token, obtained from the points shop configuration endpoint.

Building a tier list

  1. Drag games from the library panel into a tier row.
  2. Reorder games within a tier by dragging.
  3. Rename tiers and change their colors in the settings panel.
  4. Add or remove tiers as needed.

Exporting

Select Export as Image to render the tier list to a PNG. The export reflects the current state of all tiers and their contents.

Data Handling

  • Tier list data is written to browser local storage only.
  • The Steam Web API token is held in memory for the duration of the session and is not persisted.
  • API requests are issued client-side to Steam’s endpoints; no data is sent to any server operated by this project.
  • Game artwork is loaded directly from Steam’s CDN.