Current Version: 2.2
Click here to use the web version without downloading it.
This is a standalone HTML file you can open with your web browser, it lets you create tier lists.
Features
- Creatable, moveable, colorable, deletable tiers.
- Import images by file, URL, clipboard, or drag and drop. Move and sort them within tiers, can crop into squares or keep aspect ratio, can delete them, and can compress them.
- Gif support, animated in the tier list.
- Save/Load by exporting and importing a .json file that contains the entire tier list and its images.
- Create an image out of tier list with adjustable quality.
- Append descriptions to images to add any information you want.
- Adjustable layout and settings to change the workflow to your liking.
- Shuffle button to make the order you tier things in unique.
- Lightweight, bloat-free, fully offline and local.
- And more!
How to Download
- Download 'index.html' by either clicking it above in the file list and then clicking the download button, or by clicking the green 'Code' button, downloading the zip, and extracting it.
- Double-click the html file to run it directly in your web browser.
- Have fun!
Useage Guide
- You can add a title to your tier list by clicking the "Tier List Maker" title to edit it.
- Create tiers with the Add New Tier button, and edit them by clicking on their color/name. Move them with the arrows next to them.
- Click the Browse button to import image files, or click Add Image URL to instead use the image url from an image online, or right click copy an image from a webpage then press Ctrl+V, or drag and drop a file onto the page (if your browser supports it).
- Drag and drop images from the Image Bank into the tier you want to put it in, and organize them within the tier by moving them next to eachother.
- If you want to add a description to an image that shows when hovering over it, click on it to open its menu. You can also view the image in a seperate tab or delete the image within that menu using the corresponding buttons.
- To save your tier list, click Export JSON, then when you want to load it, click Import JSON. Otherwise, the tier list is lost if you refresh or close the tab.
- If you're using a lot of clipboard images, or have imported large images, file size can get quite large, causing exports and imports to be slow. Using the Compress Images button is good for keeping it fast and efficient when images get bloated. Use PNG if you want to keep transparency, make the max dimensions lower, or switch to JPEG to greatly reduce file size. GIFs are not effected. With compression, you can make even a 1500 image tier list speedy.
If you want to use existing tier list images, there's an easy way to do so using an extension I made, Media Grabber. Simply go to a tier list website (or any suitable website with images), click Media Grabber, change the shared folder path to the one that holds specifically tier list image items (ocassionally is split into 2 or more folder paths), then download it as a zip. Then you can just extract the zip holding the images, and dump those images into this tier list maker.
If you don't want to use the extension and are on Firefox (or any Firefox fork), you can just press Ctrl+I to open page info. While on a page with the images you want, you can go to the Media tab, sort by Type so you can see just 'Image' labeled media next to eachother, select the images you want and download them, then just add them into the tier list maker. Images from tier list sites often all share the same file path, making it easy to Shift+Click just what you want and not any extra stuff like GUI/page elements. Make sure that while images are downloading, you leave the Page Info menu open, otherwise it'll stop downloading if there's still more to download.
Depending on your operating system, browser, or file explorer, you may have a cap for how many images you can import into the tier list maker at once. A simple workaround is just to break up the images into groups (for example, groups of 300), then import them one group at a time.
If you are on a privacy-focused browser, you may have Canvas Data disabled, which can break certain features. A quick way in Firefox to enable it for that tab is to click the icon left of the URL (either looks like switches or like a picture), and enable it there.
Coded by Google Gemini and Claude, then edited by me.
This project is dedicated to the public domain (CC0). Feel free to copy, modify, distribute, or do whatever you want with it.