Ren'IDE: The Ren'Py Visual Novel Editor

Ren'IDE is a desktop application designed to streamline and enhance the development process for Ren'Py projects. It provides a dynamic canvas where your Ren'Py script files (.rpy) are represented as draggable blocks. The editor automatically analyzes your code to draw connections for jump and call statements, helping you visualize your story's flow and structure at a glance. It is intended to be a one-stop shop for editing Ren'Py projects, but still allow flexibility to use whatever tools are necessary outside the application. In other words, using this application won't prevent you from editing your project outside of it. You're not locked in.

This tool is perfect for writers, designers, and programmers who want a more intuitive and organized way to manage complex branching narratives.

Quick Startup

If you just want to install the application on your desktop and run it, you can simply do this:

1. Go to the release page and find the release zip for your operating system (Windows, Mac, Linux)
2. Download the zip file to a loction on your machine and unzip it
3. For Windows, double-click the installer file found in the zip and follow the installtion instructions
4. For Mac, open the DMG file found in the zip and copy the application to a location on your machine
5. Double-click the installed application and you're all set to go!

---

Key Features

• Visual Story Canvas: Drag, resize, and arrange blocks representing your .rpy files. Arrows are automatically drawn between blocks to show jump and call relationships.

• On-Demand Route Canvas: Generate a detailed, label-by-label graph of your story's control flow to understand complex branching. This is an opt-in feature to maintain performance on large projects. The Route Canvas automatically identifies all unique paths from start to finish. A floating panel allows you to highlight specific routes with distinct colors.

• Integrated Code Editor: A full-featured Monaco editor (the engine behind VS Code) is built-in for editing your script files directly within the app. The editor supports a split-pane layout (side-by-side or top/bottom) so you can view two files at once. Tabs can be dragged between panes. Context-aware IntelliSense provides autocomplete suggestions for labels, screens, images, characters, variables, and 28+ built-in Ren'Py code snippets.

• Comprehensive Project Management: A built-in file explorer allows you to create, rename, move, and delete files and folders in your project.

• Story Element Management: A dedicated panel to view and manage Characters, Variables, Images, Audio, Screens, and Scenes. Scan external directories for images and audio, and easily copy them into your project.

  

  Scene Composer: Visually build scenes by layering backgrounds and sprites. Scale, zoom, orient them as you like. The application generates the Ren'Py code that can be copy/pasted.

  Image Viewer:

  Audio Viewer/Player:

• Markdown Preview: Double-click any .md file in the Project Explorer to open it in a tab with GitHub-style rendered preview. Toggle to edit mode for a full Monaco editor with Ctrl+S save support.

• File System Integration: Works directly with your local project folders for a seamless development experience.

• Theme Support: Personalize your workspace with multiple themes, including Light, Dark, Solarized, and Colorful variants.

• UI State Persistence: The editor remembers your theme, sidebar layout, and open tabs between sessions for a consistent workflow.

• Customizable Layout: Sidebars are resizable, allowing you to tailor the interface to your needs.

• AI Integration: Optional feature to generate AI content using Google Gemini, OpenAI, and Anthropic models. Generated content can be copy/pasted wherever you want.

• Project Statistics: A Stats dashboard provides word count, estimated play time, per-character dialogue breakdowns, and branching complexity scores.

---

Usage Guide

Getting Started

On first launch, you'll see a welcome screen with an option to create a new project or a open an existing Ren'Py project folder. The latter option is recommended. The application maintains a list of recently opened projects, which you can open by clicking on them.

The Main Interface

The application is divided into three main sections: the Project Explorer on the left, the main view (Canvas/Editor) in the center, and the Story Elements panel on the right. The left and right sidebars can be resized by dragging the handles on their inner edges.

Toolbar

The top toolbar provides access to global actions and tools.

Button/Icon	Function	Shortcut
Undo/Redo	Reverts or re-applies changes like moving blocks, creating blocks, etc.	Ctrl+Z / Ctrl+Y
Add Block	Creates a new, blank .rpy file and adds it to the canvas.	N
Add Note	Add a sticky note to the canvas board. Notes are not included as Ren'Py code.
Tidy Up	Automatically arranges the blocks on the canvas based on the story flow to reduce clutter.
Analyze Routes	Generates and opens the Route Canvas tab, showing label-to-label connections.
Drafting Mode	Toggle drafting mode, which adds placeholders for all images and sound files that are not yet created.
Run	Launch Ren'Py and run your game as a child of the application (requires Ren'Py Launcher Path to be set in Settings
Save All	Saves all unsaved changes to your local files. Only enabled when a project folder is open.	Ctrl+S
Toggle Left	Hide/unhide the left sidebar with the Project Explorer and Search Tabs
Search	Open search tab on the left sidebar
Toggle Right	Hide/unhide the right sidebar with the Story Elements tabs
Settings	Set specific user settings, including Color Theme, Editor Appearance, Ren'Py Launcher Path, and Enabling AI

The Canvases

The central area is your main workspace for visualizing the story. It can contain multiple tabs, including two special canvas types.

Story Canvas

This is the default high-level view of your project.

• Blocks: Each block represents a single .rpy file. The title displays the file's name or the first label found within it. Blocks show summary information like labels, characters, and content types (dialogue, menus, Python code).
• Arrows: These lines connect blocks, representing jump and call statements, giving you an immediate sense of your story's structure.
• Interactions:
  • Pan: Hold Shift and drag the canvas background.
  • Zoom: Use your mouse scroll wheel.
  • Select Blocks: Click a block. Hold Shift or Ctrl/Cmd to select multiple. Drag a selection box (rubber-band) to select multiple blocks.
  • Move Blocks: Click and drag a block's header.
  • Resize Blocks: Drag the handle in the bottom-right corner.
  • Group/Ungroup: Select multiple blocks and press G to group them. Select a group and press Shift+G to ungroup.
  • Open Editor: Double-click a block to open its file in a new editor tab.

Route Canvas

The Route Canvas provides a much more granular view of your story's control flow. It is generated on-demand by clicking the "Analyze Routes" button in the toolbar.

• Label Blocks: Each label in your project is represented as a small, distinct block.
• Connections: Arrows show not only explicit jump and call statements (solid lines) but also implicit "fall-through" flow where one label follows another in a file (dotted lines).
• Route Highlighting: A floating 'View Routes' panel lists all unique paths the analysis could find. Check a box next to a route to highlight its specific path on the canvas with a unique color.

Project Explorer (Left Sidebar)

This panel shows a tree view of your project's file system.

• File Operations: Right-click on a file or folder to open the context menu, which allows you to:
  • Create new files (.rpy) or folders.
  • Rename existing files or folders.
  • Delete items (this will delete them from your disk if you have a project folder open!).
  • Cut, Copy, and Paste files and folders to reorganize your project.
• Navigation:
  • Double-click an .rpy file to open it in the editor, or a .md file to open the Markdown preview.
  • Right-click an .rpy file and select "Center on Canvas" to locate its block in the visual editor.

Search Panel (Left Sidebar)

• Search & Replace: Search all files in the project for a keyword or regular expression. Results show file and line context. You can replace matches individually or all at once, with a confirmation step before bulk replacements are applied.

Story Elements (Right Sidebar)

This powerful panel analyzes your entire project to give you an overview of all its core components.

• Characters Tab:

  • Lists all characters defined with define e = Character(...).
  • Shows their display name, code tag, color, and how many lines of dialogue they have.
  • You can Add a new character, Find Usages to highlight all blocks where a character speaks, or Edit an existing character's properties in a dedicated view.

• Variables Tab:

  • Lists all global variables defined with define or default.
  • You can Add new variables and Find Usages to see where they are used in your code.

• Images Tab:

  • Manages all your project's visual assets.
  • It automatically finds images in game/images/.
  • You can Add Directory to Scan to include images from other folders on your computer without copying them first.
  • Images not yet in your project are marked with a red border. Select them and click Copy to Project.
  • Right-click an image to copy a scene or show statement to your clipboard.
  • Double-click an image to open the Image Editor to manage its Ren'Py tags and subfolder location.

• Audio Tab:

  • Works just like the Images tab, but for your audio files (.ogg, .mp3, etc.).
  • Manages files in game/audio/ and other scanned directories.
  • Right-click an audio file to copy a play audio or queue audio statement.

• Screens Tab:

  • Lists all screens defined with the screen statement.
  • You can Add a new screen, which will create a new .rpy file with boilerplate code.
  • You can also quickly Find Definition to jump to the code where a screen is defined.

• Scene Tab:

  • Create a scene image by layering images and sprites and arranging them to suit
  • Copy/paste generated code directly into Ren'Py code file

• Snippets Tab:

  • A library of common Ren'Py code patterns for dialogue, logic, visual effects, and more. Find the snippet you need and click Copy to paste it into your code.
  • User Snippets: Create your own reusable code snippets with custom trigger prefixes. User snippets integrate with IntelliSense — type the prefix in the editor to expand them. Supports VS Code-style tab-stop placeholders for interactive expansion.

PunchList (View Menu -> Punchlist)

• A list of generated tasks is added to a list that is maintained with the project
• Includes images and audio files that are referenced in the code but don't exist in the project yet
• Project notes are included in the punchlist automatically

AI Generator (View Menu -> AI Generator)

• Opens a tab in which the user can generate AI content using Google Gemini, OpenAI, or Anthropic
• Requires an API key to be entered for each provider (Google, OpenAI, Anthropic) the first time it is used in the project
• Generated content can be copied and then pasted wherever the user wants

Stats (View Menu -> Stats)

• Displays project-wide statistics: total word count, estimated play time, lines of dialogue, and per-character breakdowns
• Shows branching complexity score and a bar chart of character dialogue distribution

Details for Developers

Local Development Setup

This project uses a standard Node.js-based toolchain with Vite for a fast and modern development experience.

Prerequisites

• Node.js (version 18.x or newer recommended)
• npm (which comes bundled with Node.js)

Running Locally

1. Clone the Repository (if you haven't already):

   git clone https://github.com/bluemoonfoundry/vangard-renpy-ide.git
   cd vangard-renpy-ide

2. Install Dependencies: Navigate to the project's root directory in your terminal and run npm install to download all the necessary packages defined in package.json.

   npm install

3. Start the development environment (recommended for active development):

   npm run electron:start   # Build and launch Electron app

   Or to use the Vite dev server only (no Electron):

   npm run dev              # http://localhost:5173

4. Run tests:

   npx vitest run           # Run all tests once
   npx vitest               # Watch mode

5. Build a distributable installer:

   npm run dist

   The output is in the release/ directory. On Windows, run the .exe installer. On Mac, open the .dmg. On Linux, run the .AppImage.

   Mac users: To run your built application without installing, use open -a /path/to/xyz.app.

---