Solutions
Complete patterns for UI, routing, saves, notifications, galleries, and migration.
Solutions combine the core story API with React UI. Each page starts from a working pattern and shows where to extend it.
Player UI
Custom Dialog
Replace ADV dialog layout, text defaults, and motion.
Dialog Avatar
Resolve and render character portraits next to dialog.
Custom NVL Dialog
Replace the NVL container or only its row renderer.
Custom Menu
Style choices, disabled states, and keyboard shortcuts.
Custom Notification
Render timed and persistent game notifications.
Custom Fonts
Load fonts and apply dialog and menu defaults.
Pages and game features
Quick Menu
Add undo, auto, save, load, and settings actions.
Page Overlay
Build settings, save, and gallery overlays with the page router.
localStorage Saves
Implement multiple slots, quick save, and quick load.
Persistent Gallery
Build a Service-backed gallery with permanent unlocks.
Moving from Ren'Py
Map labels, sprites, menus, variables, and screens.
Common questions
Is Game a global singleton?
No. useGame() returns the Game instance owned by the nearest GameProviders. Passing the same instance to multiple consumers shares state; separate providers may own separate games.
const game = useGame();
const liveGame = game.getLiveGame();Does NarraLeaf include save slots?
NarraLeaf serializes and restores runtime state through liveGame.serialize() and liveGame.deserialize(). Your application chooses localStorage, IndexedDB, files, or a server and supplies the slot UI. See localStorage Saves.
Where does custom UI go?
Use Game configuration for dialog, menu, NVL, and notification slots. Put settings, history, gallery, and save pages inside Player using Page and Layout.