MLBB Codex

A complete, statically generated Mobile Legends: Bang Bang companion: every hero, item, emblem and patch, with verified data and working build tools.

Built with Next.js 16 (App Router), React 19 and Tailwind CSS v4. Exported as a static site and deployed to GitHub Pages.

Routes

Route	Description
/	Editorial home: live meta board, hero of the day, roster overview, patch highlights, tools
/meta	Live ranked meta: win, pick and ban rates, tier letters, filters and sorting
/patches	Recent patch notes with highlights and expandable sections
/heroes	Hero catalogue with search, combined role/lane/favourite filters, sorting and grid/compact views
/hero/[id]	Hero dossier: stats, ratings, live ranked rates, skills with cooldowns, 9:16 skins, matchups
/items	Item catalogue grouped by category with search
/items/[slug]	Item detail with stats and build context
/emblems	Emblems and talents
/tools	Tool index
/tools/compare	Side-by-side hero stat comparison (shareable ?a=&b=)
/tools/counters	Counter/synergy explorer
/tools/favourites	Local favourites
/tools/random	Random hero picker with role/lane constraints

/builders and /knowledge are kept as static meta-refresh redirects to /items and /emblems so old links keep working.

Data pipeline

The site has no runtime data fetching. Two sources are merged at build time:

• MLBBDex API (https://mlbbdex.com/api/v1) — base stats, skills, skins, splash art, items and patches. Wiki-derived content, licensed CC BY-SA.
• Moonton GMS API — skill icons, cooldowns/costs, skill tags, English lore and hero relations.
• Mobile Legends Wiki (Fandom) — vertical 9:16 skin posters (CC BY-SA) and patch-note wikitext.
• MythicLab (mythiclab.app) — official ranked win/pick/ban rates and tier letters, republished from mobilelegends.com/rank. Credited in the UI.

python scripts/fetch_mlbbdex.py    # cached fetch -> scripts/.cache/mlbbdex/
python scripts/build_dataset.py    # merge + download art -> src/data/*.json, public/
python scripts/fetch_skin_art.py   # 9:16 skin art URLs -> src/data/skin_art.json
python scripts/fetch_meta.py       # live ranked rates -> src/data/meta.json
python scripts/fetch_patches.py    # recent patch notes -> src/data/patch_notes.json

fetch_skin_art.py resolves the Wiki's vertical poster for each skin and falls back to the local 240×390 thumbnail when the Wiki has no 9:16 render. Artwork is hotlinked from static.wikia.nocookie.net with the original dimensions recorded.

fetch_mlbbdex.py caches every response on disk and backs off on HTTP 429, so the pipeline is safe to re-run. build_dataset.py writes:

src/data/heroes.json      134 heroes, 586 skills, 1062 skins, relations, lore
src/data/items.json       102 items with stats and icons
src/data/patches.json     276 patch links
src/data/skin_art.json    9:16 skin posters that exist on the Wiki
src/data/meta.json        133 ranked hero rate rows + snapshot
src/data/patch_notes.json 6 most recent patches, flattened sections
public/heroes/          <slug>.webp portraits (240x390)
public/splash/          <slug>.webp splash art (1280x720)
public/assets/items/    <slug>.webp item icons

Emblems and talents come from src/data/builders_data.json, generated by:

python scripts/scrape_emblems.py
python scripts/finalize_builders_data.py

Typed accessors (getHero, resolveHero, getRelatedHeroes, getHeroOfTheDay, formatStat, statRange, …) live in src/data/index.ts. The JSON is cast through unknown once there; everything above it is typed.

Development

npm install
npm run dev      # http://localhost:3000
npm run lint
npm run build    # static export -> out/
npm start        # serve out/ on http://localhost:3000

Because the project uses output: "export", next build writes a fully static out/ directory and next start is replaced by a static file server.

Deployment (GitHub Pages)

.github/workflows/deploy.yml builds and deploys on every push to main:

• NEXT_PUBLIC_BASE_PATH=/mlbb-codex — project-site base path
• NEXT_PUBLIC_SITE_URL=https://nooryoosuf.github.io/mlbb-codex — canonical URLs, sitemap and robots

Local artwork is loaded through asset() in src/lib/base-path.ts so plain <img> paths also receive the base path. public/.nojekyll keeps Next's _next directory from being ignored by Jekyll.

To preview the exact Pages build locally:

$env:NEXT_PUBLIC_BASE_PATH="/mlbb-codex"
npm run build

Attribution

Unofficial fan project. Hero data and artwork belong to Moonton. Wiki-derived data and 9:16 skin posters are used under CC BY-SA via MLBBDex and the Mobile Legends Wiki. Ranked statistics are republished from Moonton's official rank data through MythicLab. Not affiliated with Moonton or Mobile Legends.