A community-built companion app and freeform tabletop simulator for Riftbound TCG, the League of Legends trading card game by Riot Games.
Disclaimer: This is an unofficial fan project and is not affiliated with, endorsed by, or associated with Riot Games. Riftbound™ is a trademark of Riot Games, Inc. All card art, names, and game mechanics belong to their respective owners. This project exists solely as a fan-made tool for the community.
Browse the complete Riftbound card database
- Origins (OGN)
- Proving Grounds (OGS)
- Spiritforged (SFD)
- Arcane Box Set (ARC)
Filter by set, domain (Fury / Calm / Mind / Body / Chaos / Order), card type, and search by name. Sort by ID, name, cost, or type.
A freeform sandbox for solo playtesting — no rules enforced, full manual control. Designed to comply with Riot Games' policy on digital tools.
- Drag & drop cards freely between all zones
- Right-click context menus on any card — tap/untap, flip, move to any zone, recycle, trash, banish
- Click runes to tap them (visual rotation + dimming)
- Turn helpers — "Next Turn" button follows the official phase structure (Awaken → Channel → Draw → Action), plus individual Draw, Channel, Untap All, and Shuffle buttons
- Score tracker — visual 8-pip point bars for both players
- Hover preview — large card detail panel with full rules text
- Game log — scrollable action history
- All zones represented — Hand, Deck, Rune Deck, Runes, Base, 2 Battlefields, Legend, Champion, Trash, Banishment
11 competitive decklist profiles at S/A/B tier, sourced from community sites. Each shows the full decklist with legend, champion, main deck, rune package, and battlefields. Load any meta deck directly into the deck builder.
Build and save custom decks with domain identity validation, copy limits, and rune deck constraints. Import/export decklists, and load meta decks as starting points. Saved decks persist to your account via Firebase.
Community news feed with a CMS for admin users. Create articles with images, tags, and excerpts.
Rules reference and new player guides for getting into Riftbound.
# Clone the repository
git clone https://github.com/YOUR_USERNAME/riftbound.git
cd riftbound
# Install dependencies
npm install
# Start the development server
npm run dev
#publish to firebase
npm run build
firebase deploy --only hostingThe app will be running at http://localhost:5173.
If you get a script execution error when running npm, run this first:
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSignedCard images are expected in public/cards/ with the following folder structure:
public/cards/
├── OGN - Origins/
│ ├── OGN-001.webp
│ ├── OGN-002.webp
│ └── ...
├── OGS - Proving Grounds/
│ ├── OGS-001.webp
│ └── ...
├── SFD - Spiritforged/
│ ├── SFD-001.webp
│ └── ...
└── ARC - Arcane/
├── ARC-001.webp
└── ...
Card IDs use 3-digit zero-padded format (e.g., OGN-001, SFD-042). Images should be .webp format. A Python batch renaming/conversion script is available in rename_cards.py if your images use the older naming convention.
User accounts, saved decks, and the news CMS require a Firebase project. Create a .env file in the project root:
VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_idWithout Firebase, the gallery, meta decks, deck builder, and tabletop simulator all work fully — you just won't have account login, saved decks, or news posting.
riftbound/
├── public/
│ ├── cards/ # Card images (.webp) organized by set
│ ├── icons/ # Domain icons, card type icons
│ └── data/ # Official card JSON files (OGN, OGS, SFD, ARC)
├── src/
│ ├── App.jsx # Main application (gallery, simulator, builder, meta, news)
│ ├── contexts/
│ │ └── AuthContext.jsx # Firebase authentication context
│ ├── components/
│ │ └── AuthModal.jsx # Login/signup modal & user menu
│ └── lib/
│ └── db.js # Firestore operations (decks, news, collections)
├── rename_cards.py # Batch rename & PNG→WebP conversion script
├── package.json
└── vite.config.js
The simulator is a manual sandbox — it sets up the board and deals your opening hand, but you control everything from there, just like a physical card game.
- Go to the Play tab
- Select a deck from the meta deck list
- Click Start Game
- You'll get an opening hand of 4 cards and 2 channeled runes
| Action | How |
|---|---|
| Move a card | Drag it to any zone |
| Tap / untap | Right-click → Tap/Untap, or click a rune |
| See card details | Hover over any card |
| Send to trash | Right-click → Trash |
| Banish a card | Right-click → Banish |
| Recycle to rune deck | Right-click → Recycle |
| Return to deck | Right-click → Top/Bottom of Deck |
| Draw a card | Click the Main Deck pile, or use the Draw button |
| Channel a rune | Click the Rune Deck pile, or use the Channel button |
| Start a new turn | Click Next Turn (untaps all → channels 2 → draws 1) |
| Track score | Use the +/− buttons on the score bars |
The Next Turn button automates the start-of-turn sequence:
- Awaken — All your game objects are readied (untapped)
- Beginning — Scoring phase (hold points are scored here — track manually)
- Channel — 2 runes are channeled from your rune deck
- Draw — 1 card is drawn from your main deck
- Action — Your main phase. Play cards, move units, attack, use abilities
- React + Vite — Fast development with hot reload
- Firebase — Authentication, Firestore for saved decks and news
- Vanilla CSS-in-JS — All styles are inline, no external CSS dependencies
- HTML5 Drag and Drop — Native browser drag for the tabletop simulator
This is a fan project — contributions are welcome! If you'd like to help:
- Report bugs or suggest features via Issues
- Submit pull requests for improvements
- Help keep the card database up to date as new sets release
This project is provided as-is for the Riftbound community. All Riftbound card content, art, names, and game mechanics are the property of Riot Games. This tool is not for commercial use.