NarraLeaf Studio
A production editor for assets, interfaces, immersive storytelling, and collaboration.
For teams that need one place to shape the visual novel before delivery work begins.
Visual novels, built like modern software.
One project system for building, shipping, and embedding visual novels.
Choose the path that matches the work in front of you.
Use Studio to create freely, NarraLeaf Desktop to scale quickly, or NarraLeaf-React to customize completely.
NarraLeaf Desktop
A desktop application path for runtime, renderer, saves, packaging, and release work.
For projects that need to become a standalone visual novel application.
NarraLeaf-React
A React player for placing visual novel scenes inside your own interface.
For products where the story supports a larger web experience.
NarraLeaf Studio shapes the project where creators can see it.
NarraLeaf Studio brings asset management, interface editing, immersive narrative work, and team collaboration into one editor built for visual novel production.
Write the story
A prose editor that stays keyboard-first, a stage you can watch as you type, and characters that move.
Make it yours
Every surface the player sees is editable — dialogue box, menus, logic and all — and none of it is locked behind a theme.
Translate it, version it, ship it
Localization with a review pass, versions you can submit and share, live debugging, and a production build at the end.
NarraLeaf Desktop connects code and preview seamlessly.
Work in the desktop project where window lifecycle, saves, routes, menus, and packaging are wired into the same NarraLeaf runtime you preview and ship.
NarraLeaf-React stays inside the page.
The player can sit beside the rest of your React UI while the script controls backgrounds, characters, dialogue, and choices inside the frame.
1introScene.background.char("/room.jpg", new FadeIn(600)),
2
3narraImage.show({ duration: 600 }),
4narraImage.transform(
5 Transform.create()
6 .position({ yoffset: -24 })
7 .commit({ duration: 260 })
8),
9
10narrator.say`The scene starts here, inside this page.`
11
12narra.say`The line can still carry ${c("color", "#7dd3fc")}.`,
13
14Menu.prompt("Where should the scene go?")
15 .choose("Change the room", [
16 narra.say`Give me a second to step aside.`,
17 narraImage.hide({ duration: 500 }),
18 introScene.jumpTo(featureScene, new Dissolve(500)),
19 ]),
NarraLeaf-React embedded demo
A modern project shape, not a traditional editor box.
NarraLeaf separates production work, desktop runtime, and embedded playback as first-class routes in the same project. Each route has its own job, but the story never has to become a disconnected export.
NarraLeaf Studio handles production work.
Studio is the editor where production stays together: assets, interface states, narrative flow, and collaboration context live in the same workspace.
- 01Manage project assets where scenes and UI decisions are made.
- 02Edit interfaces beside the immersive story flow they belong to.
- 03Keep production context visible for teams instead of scattering work across separate tools.
A good place to start.
The project overview gives you the shape of NarraLeaf. When you want the details, the docs are ready beside it.