Personal Project

Summoner

A champion design tool with the feel of Riot's own client. Write a champion's identity and lore, tune per-level base stats that grow the way the game's do, build a five-slot ability kit with per-rank scaling and modular blocks, give the champion a theme song, theorycraft item builds against live patch data, then present the result on a showcase page. Everything is stored locally — no server, no account.

Electron React + TypeScript Vite SQLite Zustand Data Dragon
Download for Windows → Android app View source on GitHub

Latest release: v0.4.0

The champion gallery: a New champion bar above eight champion tiles with completion rings, class and lane icons
Gallery
The showcase page for Akali with class and lane icons, lore, an ability icon row and the base stats
Showcase page
The Story panel with splash art framing, lore, and a champion theme player with a volume slider
Story: splash framing and theme music

Gallery & showcase

Every champion lives in a gallery with a New champion bar, search, filters and favorites, and class and lane icons on each tile. Open one for the showcase page: splash art, lore, an ability icon row and base stats with expandable level tables. In the editor's Story panel you frame the splash art and give the champion a theme song.

The suggested-stats pop-up offering class averages
Suggested stats from Data Dragon
The showcase stats panel with the Health and Attack Speed level tables expanded
Stats that level like the game's
The win-rate bar showing 47.3% with its details open: what drives the number and how each ability is counted at level 13
Win-rate projection
The item build panel with six items and the details of Trinity Force
Build theorycrafting

Stats page

Base stats grow the way the game's do: attack speed as a percentage, level tables that follow the real curve. Start from class averages or a real champion in Data Dragon, then theorycraft up to four item builds against the live catalog. A win-rate projection moves as you tune. It is a projection from the numbers you entered, not match data, and it says so.

The ability editor for Gnar's Q with a description tooltip, effects with per-rank numbers, and the journal column
Ability editor, effects and a permanent journal
Akali's Five Point Strike on the showcase page: the description reads like the game's tooltip, with magic damage in its own color and the numbers underneath
Ability text like the game's tooltip
An alternate-form ability block for Boulder Toss under Gnar's Q
Modular ability blocks

Abilities page

Five keys, each with cooldown, cost and effects chosen by what they do (damage, buff, debuff, state) and scaled per rank from a stat picker. Write {Damage} in a description and it reads like the game's tooltip, with the numbers underneath. Extra passives, alternate forms and recasts sit under the same key as blocks, and a permanent journal beside each ability holds the ideas that aren't ready.

Screenshots show sample champions (Aatrox, Gnar, Akali and a few more) loaded from Riot's public Data Dragon feed. The ability numbers, journal notes and the silent theme track are made up for the demo. Scroll each window sideways for more, and click a screenshot to open it full size.

What it does

Identity, lore & splash art

Name, title, lore, classes, lane, resource type and playstyle. Splash art has a drag-to-reposition focal point, and a gold frame shows exactly what the gallery tile will keep. Class and lane icons from the game mark each tile.

Modular kits & a journal

Passive plus Q/W/E/R, each with cooldown, cost, and effects that scale per rank, plus custom icons. Any key can take "+" blocks: extra passives, alternate forms like Gnar's Mega spells, or recasts like Akali's. A permanent journal beside every ability keeps scrapped mechanics and rough ideas.

Champion themes

Attach a theme song to a champion and play it from the editor or the showcase page. The player uses a hextech-mist progress bar with a gold hover slice for exact seeking, and has its own volume control.

Stats that behave like the game

Whole-number and decimal stats are kept apart, attack speed grows as a percentage of its base, and level tables follow the game's own growth curve rather than a straight line. One set of stat icons is used everywhere.

Live Data Dragon sync

The full item catalog and champion roster sync from Riot's public feed, with no API key. Suggest base stats from class averages or a real champion, or look up any champion and compare a stat or two without copying anything.

Build theorycrafting

Up to four named item builds per champion, with stacking rules read from the data, pinnable item details, and a real-time stat comparison against the champion's base stats. Lethality and penetration on items are read and priced.

Showcase & poster

A splash-art-forward view page with an icon-row and spotlight ability display and expandable stat tables, plus a one-click downloadable poster of the whole kit.

Win-rate projection

A slim bar above the editor projects a win rate as you tune: one number with a plus-or-minus band, what is driving it, and what would sharpen it. Stats are scored against real champions of the same class; the ability weights are hand-tuned, and it says so. It prices shred, penetration, stat buffs, taunts and roots too.

Effects by what they do

Add an effect by kind (damage, buff, debuff, state or your own), then which one: physical, magic or true damage, healing, shielding, armor shred, slow, taunt and more. Then the numbers per rank, scaled from a stat picker with base, bonus and total, per-N scalers like +1% per 80 bonus armor, the target's health, or values such as stacks. Raise or lower a stat for a duration.

Text like the game's tooltip

Write {Damage} in a description and it reads as "magic damage" in its own color with a small icon, with the numbers and scalings in rows underneath. Rename or remove an effect and the tokens move with it, so the sentence can't drift from the kit. The showcase and poster show the finished text.

Numbers are optional

The first launch asks whether you want the story and abilities only, or the full picture. Settings has a switch each for ability numbers, stats and items, and the win-rate projection. Hiding is never deleting, so nobody is locked out of the other side.

Local, tested, self-updating

One SQLite file on your machine, with JSON export and import. The installer (about 75 MB) checks GitHub Releases for updates, and every release runs a test suite first.

How it's built

Shell Electron, with contextIsolation on and a narrow preload bridge as the only path between the renderer and the main process.
UI React 18 + TypeScript, styled with a semantic design-token layer for dark and light themes. Domain types and logic are plain TypeScript, imported by both the main process and the renderer.
Persistence SQLite via better-sqlite3 with additive migrations, compiled against Electron's Node ABI.
Stats model One spec per stat records whether it is whole or decimal, its precision, and its growth unit. Inputs, Data Dragon suggestions, the showcase level tables and the build comparison all read it, so they can't disagree. Precision was checked against every champion in Data Dragon.
Data source Riot Data Dragon, fetched in the main process and cached into SQLite with version tracking, so the app works offline after the first sync.
Routing React Router with a hash router, because the packaged app loads from file:// where path-based routes 404.
Poster export Canvas 2D composites splash art, lore, and every ability, measuring text first so the image is sized to fit the whole kit.
Packaging electron-builder producing an NSIS Windows installer, published as a GitHub Release with the update feed electron-updater reads.
Testing Vitest: logic tests under Node, plus database tests against real SQLite. better-sqlite3 is built for Electron's ABI and won't load in plain Node, so those run inside Electron's own Node. npm run release runs both suites first.

Roadmap

Where Summoner has been and where it's headed. Shipped means released; everything else is direction, not a promise.

Shipped
  • v0.4.0 Effects chosen by what they do (a kind, then which one) with the rest tucked under a collapsed More, ability text drawn like the game's tooltip with the numbers underneath, numbers you can switch off for a story-only experience, shred and penetration in the win-rate projection, and a smaller, quicker installer.
  • v0.3.0 A win-rate projection beside every champion, a far more capable effects editor (custom effects, a stat picker with base / bonus / total, per-N scalers, custom values), numbers that fill into ability descriptions, a launch loading screen, and a New champion bar above the gallery.
  • Summoner Mobile v0.2.0 An Android companion for the concept side of a champion: story, identity, lore and abilities with their alternate forms, plus a chrome-free showcase mode. Also installable as an offline web app. Champions move to and from the desktop as JSON.
  • v0.2.3 Champion themes with a mist player and volume, a roomier Story / Identity / Items editor, a permanent ability journal, game-accurate stat curves, splash framing, and a test suite.
  • v0.2.2 A readable type scale, per-class stat presets, item pinning, and fullscreen navigation.
  • v0.2.1 Champion deletion, click-to-toggle stat suggestions, and the brand header.
  • v0.2.0 The first auto-updating installer.
Next
  • Advanced ability mode Formula fields for fine-tuned stat interactions, to be shaped by how people actually use the new effects editor. The switch exists today; the mode itself is a placeholder.
Exploring
  • Sharper splash framing Show the showcase banner's crop too, and handle portrait artwork properly.

Try it

Windows 10/11 installer with built-in update checks. No account, and no internet needed except for the optional Data Dragon sync and update check.

Download for Windows → Read the full write-up

Latest release: v0.4.0

Summoner Mobile

A phone companion for the concept side of a champion: story, identity, lore, and abilities with their alternate forms. Champions move between the two as JSON, and importing updates what it recognises without overwriting the other side's data. It stores everything on your phone and works offline.

Summoner Mobile v0.2.0 · Android 6 or newer

The PC version does more. Per-level base stats that grow like the game's, ability numbers with per-rank scaling, item build theorycrafting, champion theme music, and live Data Dragon patch data all live in the Windows app. The phone app is for the ideas.

The Windows installer isn't code-signed, so Windows SmartScreen may warn you: choose "More info", then "Run anyway". The Android app isn't in the Play Store, so Android will ask you to allow installing from your browser or Files app, and Play Protect may warn about an unknown developer; both are expected. Summoner is an unofficial fan project and isn't endorsed by Riot Games. League of Legends and its champion names and art are trademarks and property of Riot Games, Inc.