Story Editor

Naninovel has its own standalone app that you can use to author scenario scripts with a visual editor and manage the story structure via a node graph while working on your game inside the Unity Editor. You can also use it to create a scenario draft and preview it in a web browser using procedurally generated assets, without even opening Unity.

Sandbox Mode

Sandbox mode is completely independent of the Unity editor. It provides tools to author the scenario and preview (play) the game right in the browser, using the latest engine specs, available commands, and runtime features. Under the hood, it produces standard .nani text files, which you can seamlessly reuse in Unity or edit directly with VS Code.

Main use cases for sandbox mode:

• Try Naninovel's scripting system and runtime features before purchasing;
• Draft the scenario using generated assets before starting development in Unity.

Navigate to naninovel.com/editor ↗ and start using the app right inside your web browser. Optionally, accept the browser prompt to install the app as a PWA ↗, so that it has its own dedicated icon on the taskbar and runs in a native OS window, like a regular desktop app.

Placeholder Assets

When drafting the story, it may be useful to use temporary versions of the media assets, such as audio clips, backgrounds, and character textures. At the same time, it's helpful to keep track of which asset is currently active while previewing the scenario.

Sandbox mode allows creating placeholder assets, where you describe the asset traits, and the editor generates distinguishable previews to be displayed when the asset is used.

To create a placeholder asset, right-click under either the Backgrounds, Characters, or Audio directories in the file browser and select the option to add the associated asset.

You can then select the created asset to inspect and edit available traits.

The created assets are automatically added to the dropdown lists in the scenario editor.

The assets are instantly displayed in the game preview when selected.

Embedded Mode

Story Editor is fully integrated with the Unity Editor and can be started by either inspecting a scenario script asset or via the Naninovel -> Story Editor Unity Editor menu.

Internet connection is required to download the editor application binaries when you launch the Story Editor for the first time; the binaries are cached, so network won't be required for the consequent runs in the same project.

Workspace

The editor workspace has a flexible and customizable layout. You can resize or reposition any tab by drag-dropping dividers between tabs, tab sets, or the tabs themselves. You can also maximize any tab by clicking the button at the end of the associated tab set.

There are default layout templates to choose from, and you can add custom layouts via the dropdown on the control panel.

File Browser

The file browser tab allows you to interact with the files and directories under the current project root. You can create new scenario scripts or placeholder assets (in sandbox mode), manage, and organize files.

When you rename or move scenario script files via the file browser, the editor will automatically update navigation commands (such as @goto and @gosub) to keep the paths relevant.

Inspector

The interaction model of the Naninovel editor is similar to the Unity editor: you select an asset, such as a file in the file browser or a node in the story graph, and the associated editors are displayed in the inspector tab. This allows for a clean separation between structural and direct editing contexts, resulting in a more productive UX.

The inspector employs a focus trap — you can use Tab and Shift+Tab to switch between the input fields and controls efficiently, without using the mouse.

Scenario Editor

The scenario editor is the app's main authoring tool. It's an alternative to writing .nani files in text or code editors such as VS Code.

Each scenario editor tab represents a .nani script, with text lines visualized as rows. You can add lines using the + button at the bottom of the tab, via the context menu (right-click existing content), or with the Enter hotkey (configurable in settings).

You can reorder lines by drag-dropping, delete or duplicate lines via the context menu or with the Backspace and Ctrl+D keys.

The changes are applied immediately and reflected in the game view in case the edited script is currently playing. To persist the changes, you need to save the modified file.

While the game is running, the currently played line is highlighted with a green or yellow outline depending on whether it's waiting for input. To automatically open the currently played script and select the active line, click the dedicated button on the control panel or press Ctrl+X.

Story Graph

The story graph helps visualize, track, and organize the scenario structure, and also allows editing the scripts themselves.

By default, each node represents either a scenario script or a directory. Edges represent navigation between scripts. Conditional navigations (e.g., @goto under @choice or @if) appear as dashed edges, with conditions listed on the associated ports.

You can create scripts and directories by right-clicking the graph pane, and move or rename them via the node context menu. To navigate directory nodes, double-click or choose "Enter Folder" from the context menu.

You can also enter script nodes, in which case the graph works as a visual scenario editor. Instead of script and directory nodes, you'll see label nodes, which host scenario lines that can be edited just as in the scenario editor.

Dirty-Save

When you modify an asset, such as a scenario script or the graph, it becomes "dirty" — meaning the changes are in memory but not yet saved to disk. To persist the changes, you need to save the asset.

When at least one asset is dirty, the save button becomes active. Click it to see which assets are modified, and save them all or individually. You can also save all dirty assets by pressing Ctrl+S.

Undo-Redo

Most modifications in the editor are tracked and can be reverted using the undo-redo system. When a change is made, the undo button becomes active — click it to view a list of changes and undo/redo them individually.

You can also undo and redo with Ctrl+Z and Ctrl+Y, respectively.

Global Search

As your project grows, it may be useful to search across all scenario scripts. Double-press the Shift key or click the "Search" button on the control panel to open the global search.

Results update as you type and include both scenario script names and content. Selecting a result opens it and highlights the associated line in the scenario editor.

Settings

You can customize both the editor and project via the settings tab, which has two main categories: user and project. Open the tab via the menu on the control panel or by pressing Ctrl+Alt+S.

User Settings

User settings are stored in the directory you picked during the first-time setup in sandbox mode or under the Unity's persistent directory in the embedded mode. They're not shared with the project and apply to all projects on the device. This includes preferences like the editor color scheme, keymap, and UI element visibility.

Project Settings

Project settings are user-agnostic, stored under the project directory, and shared with all users working on the project. These include project-specific properties like the project title.

Keymap

The keymap is part of the user settings and lets you configure key bindings for various editor features, such as appending lines, duplicating nodes, entering play mode, etc.

To bind a key, find the desired action and enter the key code. Modifiers can be prepended using +. Refer to the MDN reference ↗ for valid key codes and modifiers.

On macOS, modifiers map as follows:

Code	macOS
Ctrl	⌘
Alt	⌥
Shift	⇧