ABOUT

Tier List Builder is a modern HTML5 app for creating visual ranking boards, similar in concept to TierMaker and other popular tier-list maker websites. It is packaged as a customizable standalone project that you can install on your own hosting. Users can upload images, drag items into colored tier rows, customize the board, and export the final result for sharing or backup. It is suitable for game rankings, character rankings, product comparisons, personal lists, community content, and similar visual tier-list use cases.

IMPORTANT NOTE

This product is a frontend-only static HTML5 application. It does not require a backend server, database, admin panel, or online account system. Uploaded images, board settings, and the current tier list are handled in the browser and saved with local storage. This makes the app lightweight, easy to install, and suitable for shared hosting, static hosting, cPanel hosting, VPS, or a subfolder inside an existing website.

The images shown in screenshots and previews are AI-generated demo images. They are used for presentation purposes only and are not included in the package files.

FEATURES

Interactive Tier List Builder
Upload Multiple Images
Drag-and-Drop Ranking
Move Items Between Tier Rows and Image Gallery
Reorder Items Inside Rows
Editable Board Title
Custom Tier Row Labels
Custom Tier Row Colors
Add New Rows Above or Below Existing Rows
Delete Rows
Clear Images From a Row
Move Rows Up and Down
Image Shape Selector
Common Image Ratios: Square, Free, 16:9, 4:5, 1:2, and More
Browser Autosave with Local Storage
Export Tier List as PNG
Export Tier List as JSON Backup
Import Tier List from JSON
First-Run Onboarding Tour
Responsive Layout for Desktop and Mobile
Modern Dark UI
No Backend Required

TECHNOLOGIES

TypeScript (typescript)
React (react)
React Router (react router)
Vite (vite)
Tailwind CSS (tailwind css)
Radix UI / shadcn-style UI components (radix ui)
dnd-kit Drag and Drop (dnd-kit)
html-to-image PNG Export (html-to-image)

FILES INCLUDED

Source Code (tsx, ts, css, json, svg)
Build Configuration for Generating the Production HTML5 Files
Documentation HTML File

REQUIREMENTS

Node.js 22.22.0 or newer for development and production builds
npm, included with Node.js
Modern Browser: Chrome, Edge, Firefox, Safari, or Similar
Shared Hosting, Static Hosting, cPanel Hosting, VPS, or Any Hosting That Can Serve Static Files
Domain, Subdomain, or Website Subfolder

DOCUMENTATION

Full documentation is included in docs/README.html. It explains installation, customization, branding, colors, deployment, troubleshooting, and project architecture.

SUPPORT

If you need help with installation, customization, or deployment, please contact support through the item support page.

Tier List Builder - Drag & Drop Ranking App | React, TypeScript