Description
Turn any ranking debate into a clean, shareable visual with Tier List Builder, a modern drag-and-drop ranking app built with React and TypeScript. Upload your own images, sort them into colourful tier rows, fine-tune the order, and export the finished board in seconds — no server, database, or complicated setup required.
Rank anything, your way
Whether you are ranking games, movie characters, products, songs, sports teams, or personal favourites, this single-page app gives you a flexible canvas for visual comparisons. Start with a blank board, give it a title, add rows, and drag items from the image gallery straight into place. Move items between rows, reorder them inside a row, and adjust the board until the ranking feels exactly right.
Built for easy customisation
Every board can look different. Rename rows, pick custom colours for each tier, add rows above or below existing ones, move rows up or down, delete rows you no longer need, and clear images from a single row without starting over. The image shape selector supports square, free-form, 16:9, 4:5, 1:2, and other common ratios, so posters, photos, and game art all sit neatly in the layout.
Save, share, and pick up where you left off
Work is saved automatically in the browser with local storage, so you can close the tab and return to your board later. When you are ready to share, export a high-quality PNG for social media, blogs, and community posts, or save a JSON backup. You can also import a JSON file to restore a previous board, making it simple to reuse templates and revisit popular rankings.
A smooth first experience
A guided first-run onboarding tour walks new users through adding items, dragging and ranking, customising rows, and saving and exporting. Combined with a modern dark interface and a responsive layout for desktop and mobile, the app feels polished whether you are building a quick list on your phone or a detailed ranking on a large screen.
Key features
- Interactive drag-and-drop tier list builder with an image gallery
- Upload multiple images and reorder items within rows and between rows
- Editable board title, custom row labels, and custom row colours
- Add, delete, move, and clear rows with ease
- Image shape selector including square, free, 16:9, 4:5, and 1:2
- Automatic browser autosave using local storage
- Export as PNG and export or import JSON backups
- First-run onboarding tour for new users
- Responsive layout for desktop and mobile with a modern dark UI
- Frontend-only app — no backend, database, or admin panel required
Modern tech, simple deployment
The app is built with React, TypeScript, React Router, Vite, Tailwind CSS, Radix-style UI components, and dnd-kit drag and drop, with html-to-image powering PNG exports. Because the finished build is a static HTML5 app, you can host it on shared hosting, static hosting, cPanel hosting, or a VPS — any host that can serve static files. Full documentation is included to help with installation, customisation, branding, colours, deployment, and troubleshooting.
Who will enjoy it most?
Website owners can add engaging interactive rankings to their content, gamers can settle debates about favourite titles and characters, and content creators can spark discussion with community polls and shareable lists. It is also ideal for product comparisons, book and film rankings, and personal preference lists that are fun to build and easy to share.
For a fast, visual, and highly customisable way to create tier lists, Tier List Builder offers everything you need in one lightweight React and TypeScript app — drag, rank, customise, and export, all from your browser.
Reviews
There are no reviews yet.