Plantillas

You can generate a new project from a template by running:

npm create pixi-vn@latest

Interactive demo

How to use a template

If you are reading this page, you likely already have a project generated from a template. The following sections will guide you through the first steps to get it up and running.

Initial setup

Open the project folder with your IDE. The examples below use Visual Studio Code.

Once the project is open, VS Code will automatically suggest a few things:

• Install recommended extensions — a notification will appear asking you to install the workspace-recommended extensions. It is strongly advised to accept. If the notification does not appear, you can install them manually from the Extensions panel by filtering for recommended extensions.
• Run startup tasks — VS Code may prompt you to run the configured startup tasks, which will install all project dependencies. If you prefer to do it manually, run:

npm install

Run the project

The template includes a set of pre-configured launch configurations for VS Code. If you are not familiar with them: launch configurations are shortcuts that tell VS Code how to start your project (and optionally attach a debugger), so you do not need to type commands in the terminal every time. You can access them from the Run and Debug panel (the play-button icon in the left sidebar, or press F5). Select the configuration you want from the dropdown at the top of the panel and press the green play button.

The following configurations are available:

• Debug Game: his is the configuration you will use most often during development — every time you save a file, the browser refreshes automatically. Keep in mind that in this mode animations may not be perfectly smooth and asset loading can be slower than in the final published build.
• Debug Game Preview: which closely simulates how the game will behave once published: animations are fluid, loading times are realistic, and optimisations are active. Use this configuration when you want to verify that everything looks and feels correct before publishing.
• Run as Desktop App (Dev): it compiles the Rust/Tauri backend and launches the game as a native desktop window. If your template does not target desktop or mobile platforms, this configuration will not be present.

Customise the style

The template UI is built entirely with shadcn/ui, which means you can customise the colour theme without touching any component code.

Open the shadcn/ui theme builder, adjust the colours to your taste, then navigate to the Copy section of the page to copy the generated CSS command. Run that command from the root of your project:

npx shadcn@latest add <paste-the-generated-command-here>

Once applied, it is recommended to reformat the source files:

npm run format

For further customisation — fonts, global styles, and more — see Styles & font.

Project structure

Template screens

The template comes with a set of pre-built screens that cover the essential parts of a visual novel. Each screen is a React component connected to a route managed by TanStack Router.

• Main menu (/) — the first screen the player sees when they launch the game. It provides the entry point to start a new game, continue a saved one, and open the settings.
• Narration screen (/game/narration) — the core gameplay screen where the story is displayed. It renders dialogue, character sprites, backgrounds, and choices.
• Settings — the settings panel does not have its own dedicated route. Instead it uses Search Params to overlay itself on top of whatever screen is currently active. This approach keeps the URL clean while still allowing the player to open settings from anywhere in the game, and to navigate between settings sections (audio, display, language, etc.) without losing track of where they were.
• Navigation screen (/game/navigation) — Point & Click only. It lets the player navigate between rooms and perform the various actions available in the current location.
• Map screen (/game/map) — Point & Click only. It shows the map and lets the player move from one location to another. It also supports managing multiple maps.