NarraLeaf-React

A React visual novel player framework

English | 简体中文

What is NarraLeaf-React?

NarraLeaf-React is a lightweight front-end visual novel player.
NL focuses on visual novel playing, so the user interface can be customized very easily.

It doesn't use any rendering libraries and can be used on any web platform (e.g. Electron)

Why NarraLeaf-React?

• Lightweight: NarraLeaf-React is a front-end framework, and it doesn't use any rendering libraries.
• Customizable: You can customize the UI as you like, even replace the whole components.
• Easy to use: It is easy to use and has a simple API that is built for developers. Based on OOP principles.

Scripting

NarraLeaf-React uses TypeScript for all scripting, so you don't have to learn a whole new language to use it.

It also has a highly abstracted and easy-to-use API, for example:

import {Character, Menu, Scene, c, b} from "narraleaf-react";

const scene1 = new Scene("Scene1: Hello World", {
  background: "/link/to/background.jpg",
});

const jS = new Character("John Smith");
const jD = new Character("John Doe");

scene1.action([
  jS`Hello, world!`,
  jS`This is my first ${b("NarraLeaf")} story.`,
  jS`Start editing ${c("src/story.js", "#00f")} and enjoy the journey!`,

  jD`Also, don't forget to check out the ${c("documentation", "#00f")}!`,

  "By the way, the documentation is available on https://react.narraleaf.com/documentation",
  "You can also visit the website for demo and more information.",

  Menu.prompt("Start the journey")

    .choose("Yes I will!", [
      jS`Great! Let's start the journey!`,
      jS`You can open issues on GitHub if you have any questions.`
    ])

    .choose("No, I'm going to check the documentation", [
      jS`Sure! Take your time!`
    ])
]);

For more information, please visit 🛠React.NarraLeaf.com

Get Started

Install

npm install narraleaf-react

Documentation

• Introduction
• Quick Start
• Installation
• Basic
  • Create a Scene
  • Add Actions
  • Show Dialog
  • Show Image
  • Play Story
  • Make Choices
  • Play Sound
  • Store Data
  • Conditional
  • Voice
  • Manage Preferences
• Solutions
  • Customizing the font
  • Migration from Ren'Py
• Core
  • Elements
    • Scene
    • Character
      • Sentence
      • Word
      • Pause
    • Image
    • Sound
    • Menu
    • Script
    • Condition
    • Control
    • Text
    • Persistent
    • Story
    • Displayable
    • Layer
    • Service
    • Video
  • Animation
  • Game
  • Plugin
  • Utils
• Player
  • Player
  • GameProviders
  • Hooks
    • useGame
    • usePreferences
    • useRouter
    • useDialog
  • Page Router
  • Dialog
  • Notification
  • Menu
• About
  • License
  • Incompatible Changes

Read more in 🛠React.NarraLeaf.com

License

NarraLeaf-React is licensed under the MPL-2.0 License.

We updated the license to MPL-2.0 on 2024-9-24.

Contributing

We welcome all contributions.
If you have any ideas, just open an issue or a pull request.