NarraLeaf-React Basic
Learn the core NarraLeaf-React workflow for writing scenes, actions, dialog, choices, media, data, and preferences.
The Basic guide is the first place to go after you have a running NarraLeaf-React project. It walks through the story-writing workflow: define scenes, add actions, show dialog and images, connect scenes together, and then layer in interactivity, audio, data, voice, and player preferences.
These examples target NarraLeaf React 0.13.0 and React 19. Older projects may still contain removed options such as Sound.sync or dialog font defaults in GameConfig.
Prerequisites
Before starting this section, create or prepare a NarraLeaf-React project:
Quick Start
Create a new NarraLeaf-React project from the starter template.
Installation
Install NarraLeaf-React in an existing React application.
Core Workflow
Create a scene
Start by defining a Scene. A scene gives a named section of your visual novel its own background and story context.
Add actions
Use actions to describe what happens inside the scene. Actions are the ordered instructions NarraLeaf-React executes while the story is playing.
Present story content
Show dialog, display images, and then play the story through the player so the scene can be experienced interactively.
Add interaction and state
Use choices, conditions, and stored data to make the story react to player decisions and previous events.
Polish the experience
Add sound, voice, and preferences so the visual novel feels complete and gives players control over playback.
Tutorials
Create a Scene
Define the basic unit of story structure and visual context.
Add Actions
Build the ordered action list that drives a scene.
Show Dialog
Display character lines and narration.
Show Image
Place visual assets in the scene.
Play Story
Connect scenes to the player and run the story.
Make Choices
Let players choose between branches.
Sound
Add audio cues and playback behavior.
Store Data
Save values that influence later story events.
Conditional
Run actions only when the current game state matches.
Voice
Attach voice playback to story presentation.
Manage Preferences
Expose and update player-facing settings.
Next Steps
After the Basic guide, use Solutions for complete patterns, Core for the underlying story APIs, and Player for the React components and hooks that render the experience.
For 0.13 projects, the Show Image page includes layered sprites, and Sound shows the current non-blocking audio pattern with Control.doAsync().