RenPy Visual Editor

A web-based visual editor for creating and editing interactive scenarios using RenPy syntax.

Project Overview

This tool helps scenario writers create branching narratives visually without needing to write RenPy code directly. It features:

• Visual node-based editor for RenPy scripts
• Two-way conversion between visual representation and RenPy code
• Real-time collaborative editing
• User-friendly interface for non-technical writers

Development Roadmap

Phase 1: Core Parser Implementation ✓

• Implement RenPy parser to convert scripts to tree structure
• Create data model for dialogue nodes
• Support basic RenPy elements (labels, dialogue, menus, conditionals)

Phase 2: Backend API Setup

• Set up FastAPI basic structure
• Create endpoint for script parsing (text → tree)
• Implement direct script editing (instead of tree → text conversion)
• Implement file upload/download functionality
• Add basic error handling

Phase 3: Frontend Visual Editor

• Set up React application with basic routing
• Implement node-based editor using ReactFlow
• Create node types for different RenPy elements
• Add drag-and-drop functionality for connecting nodes
• Implement direct node content editing

Phase 4: Synchronization & Persistence

• Add database integration for project storage
• Implement user authentication system
• Create project management screens
• Add file versioning capability

Phase 5: Real-time Collaboration

• Implement WebSocket connections for real-time updates
• Add user presence indicators
• Create conflict resolution mechanisms
• Implement edit history and undo/redo functionality

Phase 6: Better Implementation & Features

• basic WYSIWYG-dialog editor for node content
• Add support for more complex RenPy features (transitions, images, etc.)
• Seamless node graph updates

Architecture Notes

The editor uses a direct reference approach where visual nodes point to specific line ranges in the original script. This:

• Preserves the original script formatting
• Reduces conversion errors
• Better supports collaborative editing
• Maintains a consistent source of truth

Branch creation workflow

Use the Branch tool in the editor sidebar to add new menu or conditional branches directly to a script:

1. Activate the tool (arrow-into-bar icon) and click a node in the graph.
2. Choose between inserting a menu or an if/elif/else block.
3. Fill out the dialog form, preview the generated Ren'Py snippet, and save.
4. The script is updated through the insert-node API and the graph reloads to show the new branch.

If the selected node is not a valid target (for example, an End node), the tool shows a warning and remains ready for another selection.

Tech Stack

Backend

• Language: Python 3.12+
• Framework: FastAPI
• Database: SQLite

Frontend

• Framework: React
• UI Library: Material-UI or Chakra UI
• Graph Visualization: ReactFlow

Getting Started

Option 1: Using Docker (Recommended)

See the Configuration section below for Docker setup instructions.

Option 2: Without Docker (PowerShell Scripts)

If you cannot use Docker due to company policy or other restrictions, you can run the application using PowerShell scripts instead. All scripts and documentation are in the PowerShell folder.

Quick start:

# First-time setup
.\PowerShell\setup-all.ps1

# Run both backend and frontend
.\PowerShell\start-dev.ps1

Full documentation: See PowerShell/DOCKER_ALTERNATIVE.md

Configuration

The frontend expects API and WebSocket base URLs defined at build time via VITE_API_URL and VITE_WS_URL environment variables. When using docker compose, create a .env file in the project root with your backend URL:

VITE_API_URL=https://renpy.asind.online/api
VITE_WS_URL=wss://renpy.asind.online

After updating the file, rebuild the frontend service:

docker compose build frontend
docker compose up -d

This ensures the React application correctly calls the backend on port 9000 and establishes WebSocket connections using the same host.