An open-world visual novel engine and AI-powered story generator — design branching narratives with a visual block-based editor, or let AI generate entire interactive adventures in real time. Runs 100% in your browser.
Dream-E is two things at once:
-
A visual novel generator and block-based programming language that introduces beginners to programming concepts like if-then decisions, variables, loops, and state management — all through the intuitive metaphor of building interactive stories.
-
An open-world visual novel engine powered by AI (Google Gemini, OpenAI, or any compatible LLM) that generates scenes, images, music, and voiceover dynamically based on player choices — creating infinite, open-ended narratives that never run out of content.
Dream-E runs as a self-hosted web application with a built-in Express server. Projects are stored server-side in SQLite. Multi-user support with Google OAuth, admin panel for managing users and AI provider configuration, and per-user quotas.
Quick start: npm install, set your admin email, npm run dev, and configure AI providers in the admin panel (/admin). Dream-E ships with a Vite + React frontend and an Express API backend. All AI calls (image gen, TTS, LLM, ASR) are proxied through the server using admin-configured API keys — users never see or handle API credentials.
- What Can Dream-E Do?
- Key Features
- How It Works
- Tech Stack
- Prerequisites
- Installation & Startup
- AI Configuration
- Running a Production Build
- Remote Access
- Project Structure
- The Editor in Detail
- Keyboard Shortcuts
- NPM Scripts
- Browser Compatibility
- Troubleshooting
- License
Dream-E bridges the gap between creative storytelling and programming education. Whether you're a teacher introducing students to logic, a writer prototyping an interactive novel, or a hobbyist who wants to play AI-generated adventures, Dream-E has you covered.
- Learn programming visually: Instead of writing code, you connect blocks (nodes) on a canvas. Each block type teaches a programming concept:
- Scene nodes = functions (they execute and display content)
- Choice nodes = if-then-else decisions (check a condition, branch to success or failure)
- Modifier nodes = variable assignment and arithmetic (set HP = 100, add Gold + 50, random 1-6)
- Connections = program flow (the order in which blocks execute)
- Variables = state (integers, floats, booleans, strings, collections)
- Instant feedback: Hit Play and watch your "program" run as an interactive story
- No syntax errors: You can't have a typo in a visual editor — the blocks always connect correctly
- Full visual novel engine: Background images, music, voiceover, typewriter text, choice buttons, save/load slots, HUD with health bars and stats
- Entity system: Create characters, locations, objects, and concepts with profiles, reference images, and relationships
- Three built-in themes: Fantasy (medieval RPG), Cyberpunk (neon sci-fi), Modern (clean visual novel)
- Export and share: Download projects as
.dream-e.zipfiles
- Open World mode: An AI writer generates scenes dynamically based on player input — infinite branching with no predefined script
- AI image generation: Every scene gets a unique background image generated by FLUX 2 (Black Forest Labs) or Google Gemini, with entity reference images for visual consistency
- AI voiceover: Gemini TTS narrates every scene with configurable voices and narrator style
- AI music: Automatic mood-based music selection from a 2,500+ track RPG library
- AI entity management: The AI creates new characters, locations, and objects as the story evolves
| Feature | Description |
|---|---|
| Visual Node Editor | Infinite pan-and-zoom canvas with drag-and-drop node placement (React Flow) |
| 4 Node Types | Scene (content), Choice (if-then branching), Modifier (variable math), Comment (notes) |
| Open World Mode | AI-generated scenes with images, music, TTS, and entity tracking |
| Entity System | Characters, locations, objects, concepts — each with profiles, reference images, and links |
| AI Image Generation | BFL FLUX 2 (with reference images) or Google Gemini (Nano Banana) |
| AI Text-to-Speech | Gemini TTS with 9 voices and custom narrator instructions |
| AI Voice Input | Speak your actions instead of typing (Gemini ASR) |
| Variable System | Integer, float, boolean, string, and collection types with HUD display |
| Variable Interpolation | {{variableName}} in story text displays live values |
| 3 Themes | Fantasy, Cyberpunk, Modern — each with distinct fonts, colors, and UI style |
| Audio System | Background music (crossfade), voiceover (autoplay), per-channel volume |
| HUD & Stats | Health bars, counters, badges, floating damage numbers |
| Save/Load | Multiple save slots per project with auto-save |
| Undo/Redo | Full edit history with memory-optimized snapshots |
| Export/Import | Download as .dream-e.zip, share with others, backup your work |
| Co-Writing Mode | Structured story development with lifecycle assertions, entity tracking, and AI co-author |
| In-App Chat | AI assistant that can modify your project via 56+ game state commands |
| Offline-First | All data in browser IndexedDB — works without internet after first load |
| Memory Optimized | Blob URL asset offloading, thumbnail caching, concurrent limits — handles 100+ scene projects |
Dream-E's editor teaches programming through interactive storytelling:
┌──────────┐ ┌──────────────┐ ┌──────────────┐
│ Scene │────▶│ Choice │────▶│ Modifier │
│ "You │ │ if HP > 50 │ │ Gold += 100 │
│ find a │ │ ┌────┐ │ │ │
│ chest" │ │ │Yes │ │No│ │ └──────┬───────┘
└──────────┘ └──┴────┴─┴──┴─┘ │
│ │ ▼
▼ ▼ ┌──────────┐
┌────────┐ ┌────────┐ │ Scene │
│ Scene │ │ Scene │ │ "You now │
│"Treas!"│ │"Trap!" │ │ have │
└────────┘ └────────┘ │ {{Gold}} │
│ gold" │
└──────────┘
Programming concepts you'll learn:
- Sequential execution: Nodes execute in order, following connections
- Conditional branching: Choice nodes evaluate expressions (if-then-else)
- Variables and state: Track HP, Gold, inventory, quest flags across the story
- Operators: Greater than, less than, equals, not equals, contains
- Arithmetic: Add, subtract, multiply, divide, set, random
- String interpolation:
{{variableName}}renders live values in text - Collections: Arrays that can be added to, removed from, and checked for membership
In Open World mode, there is no predefined story. An AI writer (Google Gemini or OpenAI-compatible) generates each scene dynamically:
- You type an action (or speak it via voice input)
- The AI analyzes your action, the story so far, all entities, variables, and world state
- A new scene is generated with narrative text, choices, and metadata
- An image is generated matching the scene description (FLUX 2 or Gemini)
- Music is selected based on the scene's mood and location
- Voiceover is generated with Gemini TTS
- The world updates: new characters appear, variables change, relationships evolve
The AI maintains consistency across hundreds of scenes by tracking:
- Entity profiles (appearance, personality, relationships)
- Variable state (HP, reputation, inventory)
- Story timeline with scene summaries
- Character arcs and plot threads
Co-Writing Mode is a structured story development environment where an AI co-author guides you through building a complete narrative — from concept to scenes — using a rigorous lifecycle process:
Story Root → Plots → Acts/Episodes → Scenes → Shots (optional)
Key features of Co-Writing Mode:
- Lifecycle Assertion System: Automated checks verify completeness at every phase — missing entity profiles, absent reference images, empty descriptions, disconnected scenes. The AI co-author is notified of gaps and suggests fixes before advancing.
- Entity State Tracking: Every node (story root, plot, act, scene) tracks how characters, locations, and objects evolve via
entityStateChanges— a dictionary mapping entity IDs to detailed change descriptions. - Mandatory Entity Profiles: Characters require 17 profile fields (appearance, personality, OCEAN profile, arc, etc.), locations require 9, objects require 8. The lifecycle system flags incomplete profiles.
- Visual Consistency Protocol: When generating images for any node, entity reference images are attached as visual constraints via the
entityIdsparameter, ensuring characters maintain correct hair color, clothing, and features across all images. - Phase Gates: Before advancing from Story Root to Plots, Plots to Acts, or Acts to Scenes, the system verifies prerequisites are met (profiles complete, images generated, state changes recorded).
- Plot Connections: Every scene must connect to at least one plot — no orphan scenes allowed. Act-plot relationships track which parts of each plot unfold in each act.
- Turning Points & Cliffhangers: Acts have a dedicated
turningPointfield (labelled "Cliffhanger" for episode-structure projects) that is separate from the description.
The lifecycle specification is documented in detail in CO_WRITING_LIFECYCLE.md.
| Technology | Purpose |
|---|---|
| React 18 | UI framework |
| TypeScript 5 | Type-safe JavaScript |
| Vite 5 | Build tool & dev server |
| React Flow (@xyflow/react) 12 | Visual node editor canvas |
| Zustand 4 + Immer | State management with immutable updates |
| Dexie.js 3 | IndexedDB wrapper (client-side cache) |
| Tailwind CSS 3 | Utility-first styling |
| Howler.js 2 | Cross-browser audio playback |
| Lucide React | Icon library |
| JSZip | Project export/import |
Server-Side:
| Technology | Purpose |
|---|---|
| Express 4 | REST API server (embedded in Vite dev server) |
| sql.js | SQLite database (users, projects, config, usage) |
| bcryptjs | Password hashing |
| jsonwebtoken | JWT access tokens |
| uuid | Unique ID generation |
AI Providers (configured in admin panel):
| Provider | Used For | API |
|---|---|---|
| HyprLab | LLM, Image gen, TTS, ASR (default) | api.hyprlab.io |
| Black Forest Labs | Image generation (FLUX 2) | api.bfl.ai |
| Google Gemini | Image gen, TTS, Writer LLM, ASR | Generative Language API |
| Any OpenAI-compatible | Writer LLM, Image gen | /chat/completions, /images/generations |
Node.js 18+ and npm (bundled with Node.js).
node --version # Should be v18.x.x or higher
npm --version # Should be 9.x.x or higher| Platform | Install Node.js |
|---|---|
| Windows | Download LTS from nodejs.org |
| Ubuntu/Debian | curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash - && sudo apt install -y nodejs |
| macOS | brew install node or download from nodejs.org |
# 1. Clone and install
git clone https://github.com/LAION-AI/Dream-E.git
cd Dream-E
npm install
# 2. Start the server with your admin email
# Replace with the email you'll use to log in (Google OAuth or local account)
DREAME_ADMIN_EMAIL=your@email.com npm run devThe app opens at http://localhost:5173.
- Register or log in — create an account with the email you set as
DREAME_ADMIN_EMAIL - Open the Admin Panel at
http://localhost:5173/admin - Configure AI providers in the "AI Config" tab:
- Set your API keys for image generation, LLM, TTS, and ASR
- Default provider is HyprLab (
api.hyprlab.io) — works with FLUX 2, Gemini models, Whisper - You can also use direct Google Gemini, BFL, or any OpenAI-compatible API
- Manage users in the "Users" tab — set quotas, promote admins, activate/deactivate accounts
| Variable | Description | Default |
|---|---|---|
DREAME_ADMIN_EMAIL |
Email auto-promoted to admin on registration | (none) |
PORT |
Server port | 5173 |
DREAME_MASTER_KEY |
Encryption key for stored API keys (auto-generated if missing) | random |
$env:DREAME_ADMIN_EMAIL="your@email.com"
npm run devDREAME_ADMIN_EMAIL=your@email.com npm run devThe admin panel is at /admin. Only users whose email matches DREAME_ADMIN_EMAIL (or who have been manually promoted) can access it.
Press Ctrl+C to stop the server.
All AI features are configured through the Admin Panel (/admin → AI Config tab). API keys are stored encrypted server-side — users never see or handle them. Regular users see a read-only summary of the active configuration in the AI Settings modal (gear icon).
| Tab | Config Keys | What It Controls |
|---|---|---|
| Image Generation | Provider, model, API key, endpoint | Scene backgrounds, entity portraits |
| LLM / Writer | Provider, model, API key, endpoint | Chat agent, Open World writer |
| TTS | Model, API key, endpoint, voice | Voiceover narration |
| ASR | Model, API key, endpoint | Speech-to-text (Whisper) |
| Defaults | Default image style | Style appended to all image prompts |
| Provider | LLM | Images | TTS | ASR | Endpoint |
|---|---|---|---|---|---|
| HyprLab (default) | gemini-3-flash, gpt-4o | flux-2-pro, nano-banana-2 | gemini-3.1-flash-tts | whisper-1 | api.hyprlab.io |
| Google Gemini | gemini-3-flash, gemini-2.5-pro | imagen-3.0 | gemini-2.5-flash-preview-tts | — | generativelanguage.googleapis.com |
| BFL | — | flux-2-pro, flux-2-max | — | — | api.bfl.ai |
| OpenAI-Compatible | gpt-4o, any model | dall-e-3 | — | whisper-1 | Any /v1 endpoint |
All model fields are editable dropdown+text combos — select from presets or type a custom model name.
Admins can set per-user daily limits for each AI service:
- LLM tokens: Daily token budget for chat and Open World
- Images: Daily image generation count
- TTS seconds: Daily text-to-speech audio seconds
- Max projects: Maximum number of projects per user
Dream-E includes automatic mood-based background music powered by a 2,580-track RPG music library with BM25 keyword search. The music data is hosted separately on Hugging Face due to its size.
| Component | Size | Required? |
|---|---|---|
| BM25 search indices | ~276 MB | Yes (for music search) |
| SQLite metadata DB | ~19 MB | Yes (track info) |
| Audio files (3 tar archives) | ~13.2 GB | Yes (the actual music) |
| FAISS vector indices | ~117 MB | Optional (for semantic search via rpg_server.py) |
| Total | ~13.6 GB |
1. Install Python dependencies:
cd rpg-music-server
# Create a virtual environment (recommended)
python -m venv venv
source venv/bin/activate # Linux/macOS
# venv\Scripts\activate # Windows
pip install fastapi uvicorn numpy scipy2. Download the dataset from Hugging Face:
The music data, indices, and metadata are hosted at laion/laion-tunes-rpg-music.
# Option A: Clone the full dataset with Git LFS (requires git-lfs installed)
# Install git-lfs: https://git-lfs.com
git lfs install
git clone https://huggingface.co/datasets/laion/laion-tunes-rpg-music
# Copy the required files into the rpg-music-server directory:
cp -r laion-tunes-rpg-music/indices/ rpg-music-server/indices/
cp -r laion-tunes-rpg-music/tars/ rpg-music-server/tars/
cp laion-tunes-rpg-music/rpg_annotated.parquet rpg-music-server/
# Option B: Download individual files via the Hugging Face web UI
# Go to https://huggingface.co/datasets/laion/laion-tunes-rpg-music/tree/main
# Download the indices/ folder and place it in rpg-music-server/indices/
# Download the tars/ folder and place it in rpg-music-server/tars/3. Extract the audio files:
cd rpg-music-server
mkdir -p audio
# Extract all tar archives into the audio directory
for f in tars/*.tar; do tar xf "$f" -C audio/; done4. Start the BM25 server:
python bm25_server.py --port 7862
# → http://localhost:7862
# → API docs: http://localhost:7862/docsThe Vite dev server automatically proxies /api/music/* requests to localhost:7862.
| Endpoint | Method | Description |
|---|---|---|
/api/stats |
GET | Dataset statistics (track count, genres) |
/api/genres |
GET | List all 18 RPG genres |
/api/search |
POST | BM25 keyword search (query, search_field, top_k) |
/api/track/{id} |
GET | Full track metadata + audio URL |
- BM25 server (
bm25_server.py): ~28 MB RAM — lightweight keyword search only - Full server (
rpg_server.py): ~610 MB RAM — adds FAISS vector search + sentence embeddings - With Whisper (audio fingerprinting): ~2.1 GB RAM
For most use cases, the BM25 server is sufficient and recommended.
Music is fully optional. If the music server is not running, Dream-E works normally — scenes simply won't have background music assigned automatically. You can still manually add music files to scenes in the editor.
Dream-E uses an Express server embedded in the Vite dev server, mounted at /api/v2:
/api/v2/
├── auth/ — Register, login, Google OAuth, token refresh
│ ├── POST /register
│ ├── POST /login
│ ├── POST /google
│ └── POST /refresh
├── projects/ — CRUD for projects (per-user)
├── assets/ — Binary asset storage (images, audio)
├── ai/ — AI service proxies (all use admin-configured keys)
│ ├── POST /chat — Editor chat agent (SSE streaming, stateful)
│ ├── POST /open-world — Open World scene gen (SSE streaming, stateless)
│ ├── POST /generate-image — Image generation
│ ├── POST /generate-tts — Text-to-speech
│ ├── POST /transcribe-audio — Speech-to-text (Whisper)
│ ├── POST /config/test — Test API connection
│ └── GET /config — Public config (no secrets)
├── admin/ — Admin panel APIs (admin-only)
│ ├── GET/PATCH /users/:id/limits
│ ├── PUT /config — Set AI config (encrypts secrets)
│ ├── GET /config — Read config (masks secrets)
│ ├── GET /stats — System statistics
│ └── GET /usage — Usage analytics
└── exports/ — Temporary ZIP downloads
Database: SQLite via sql.js (server-data/dream-e.db). Tables: users, user_limits, projects, assets, admin_config, usage_log.
Authentication: JWT access tokens (short-lived) + httpOnly refresh token cookies. Google OAuth supported.
API Key Security: All AI API keys are stored AES-256-GCM encrypted in admin_config. They never reach the browser. The master encryption key is auto-generated on first run and stored in server-data/master.key.
# Build for production (type-checks, then bundles and minifies)
npm run build
# Preview the production build locally
npm run preview
# → http://localhost:4173The dist/ folder contains a complete static website. Serve it with any HTTP server:
npx serve dist # Node.js
python3 -m http.server 8080 # Python (run from dist/)npx vite --host
# → Network: http://192.168.x.x:5173/Open the Network URL on any device on the same WiFi.
# On your server:
npm install && npm run build
npx serve dist -l 80For production use, configure nginx with SPA routing:
server {
listen 80;
server_name your-domain.com;
root /var/www/dream-e;
index index.html;
location / { try_files $uri $uri/ /index.html; }
location /assets/ { expires 1y; add_header Cache-Control "public, immutable"; }
}Add HTTPS with Let's Encrypt: sudo certbot --nginx -d your-domain.com
npm run dev
# In another terminal:
npx cloudflared tunnel --url http://localhost:5173Dream-E/
├── src/
│ ├── main.tsx # App entry point, database init
│ ├── App.tsx # Root component with routing
│ ├── index.css # Global styles + Tailwind
│ │
│ ├── types/ # TypeScript interfaces
│ │ ├── nodes.ts # Scene, Choice, Modifier, Comment nodes
│ │ ├── project.ts # Project structure, settings, entities
│ │ ├── variables.ts # Variable types, HUD config
│ │ ├── gamestate.ts # Runtime state, save slots, sessions
│ │ └── themes.ts # Fantasy, Cyberpunk, Modern themes
│ │
│ ├── stores/ # Zustand state management
│ │ ├── useProjectStore.ts # Project data, undo/redo, auto-save
│ │ ├── useEditorStore.ts # Editor UI state, panels, clipboard
│ │ ├── usePlayerStore.ts # Game runtime, saves, audio
│ │ ├── useImageGenStore.ts # Legacy AI settings (being migrated to server)
│ │ ├── useAuthStore.ts # Authentication state (JWT, user info)
│ │ └── useAdminStore.ts # Admin panel state (users, config, usage)
│ │
│ ├── i18n/ # Internationalization (EN/DE)
│ │ ├── translations.ts # ~200 translation keys per language
│ │ └── useTranslation.ts # React hook + Zustand language store
│ │
│ ├── db/ # IndexedDB persistence (Dexie.js)
│ │ ├── database.ts # Schema and migrations
│ │ └── projectsDB.ts # Project CRUD, import/export
│ │
│ ├── services/ # AI integration layer
│ │ ├── openWorldService.ts # Open World scene generation pipeline
│ │ ├── openWorldContext.ts # Context assembly for the writer LLM
│ │ ├── ttsService.ts # Chunked streaming TTS
│ │ ├── aiChatService.ts # In-app chat agent loop
│ │ ├── gameStateAPI.ts # 56+ game state commands
│ │ ├── gameStateAPI.registry.ts # Command metadata & system prompt
│ │ ├── gameStateAPI.context.ts # Game state context builder
│ │ └── lifecycleChecks.ts # Co-write lifecycle assertions
│ │
│ ├── utils/ # Utilities
│ │ ├── blobCache.ts # Asset offloading (base64 → blob URLs)
│ │ ├── thumbnailCache.ts # Canvas node thumbnail generation
│ │ ├── performanceDiagnostics.ts # Console-based performance health checks
│ │ ├── idGenerator.ts # UUID generation
│ │ └── owContextStore.ts # Open World context persistence
│ │
│ └── components/
│ ├── common/ # Shared UI (Modal, Tabs, Button)
│ ├── dashboard/ # Project manager with card grid
│ ├── editor/ # Canvas editor, toolbar, top bar
│ ├── nodes/ # Custom React Flow node renderers
│ ├── inspector/ # Right-side property panel
│ ├── variables/ # Variable manager modal
│ ├── entities/ # Entity editor (characters, locations, etc.)
│ ├── notes/ # Project notes editor
│ ├── settings/ # AI Settings modal (read-only for users)
│ ├── admin/ # Admin panel (users, AI config, usage)
│ │ ├── AdminDashboard.tsx # System stats overview
│ │ ├── AdminUsers.tsx # User management + inline editing
│ │ ├── AdminConfig.tsx # AI provider configuration
│ │ └── AdminUsage.tsx # Usage analytics
│ ├── auth/ # Login / Register pages
│ └── player/ # Adventure Engine (game runtime)
│ ├── AdventureEngine.tsx # Main game loop, OW mode, scene transitions
│ ├── DialogBox.tsx # Typewriter text display
│ ├── HUD.tsx # Health bars, stats, floating numbers
│ └── OpenWorldInput.tsx # Player action input (text + voice)
│
├── server/ # Express API server
│ ├── index.cjs # Server app factory
│ ├── db.cjs # SQLite database (sql.js)
│ ├── auth/ # Auth routes + middleware + Google OAuth
│ ├── projects/ # Project CRUD routes
│ ├── assets/ # Binary asset storage routes
│ ├── ai/ # AI proxy routes (image, chat, TTS, ASR, OW)
│ │ ├── routes.cjs # All AI endpoints
│ │ ├── quotaCheck.cjs # Per-user rate limiting
│ │ └── usageLogger.cjs # Usage tracking
│ ├── admin/ # Admin panel routes
│ └── utils/crypto.cjs # AES-256-GCM encryption for API keys
│
├── server-data/ # Runtime data (gitignored)
│ ├── dream-e.db # SQLite database file
│ └── master.key # Encryption master key
│
├── docs/ # HTML documentation
├── public/ # Static assets
├── index.html # HTML entry point
├── vite.config.ts # Vite config + server middleware mount
├── tailwind.config.js # Design system tokens
├── package.json # Dependencies and scripts
└── README.md # This file
| Node | Color | Programming Concept | What It Does |
|---|---|---|---|
| Scene | Blue | Function / Output | Displays story content (text, image, audio). The game pauses here for player input. |
| Choice | Yellow | If-Then-Else | Evaluates a condition (e.g., HP > 50) and routes to Success or Failure. Executes instantly. |
| Modifier | Green | Variable Assignment | Changes a variable: Math (add/sub/mul/div), Set (assign), or Random (range). Executes instantly. |
| Comment | Gray | Code Comment | Designer notes. Does not affect gameplay. |
Execution flow:
- Start at the first Scene node
- Display scene to player (background, text, audio, choices)
- Player clicks a choice → follow its connection
- If the next node is a Modifier or Choice, execute instantly and keep following connections
- When a Scene node is reached, display it → repeat from step 2
Variables are the "game state" — they persist across scenes and drive conditional logic.
| Type | Example | Programming Concept |
|---|---|---|
integer |
HP = 100, Gold = 0 | Integer variables |
float |
Accuracy = 0.85 | Floating-point numbers |
boolean |
HasKey = false | Boolean flags |
string |
PlayerName = "Hero" | String variables |
collection |
Inventory = ["Sword", "Shield"] | Arrays / Lists |
HUD Display: Toggle "Show in HUD" for numeric variables to display as progress bars during gameplay.
Interpolation: {{Gold}} in story text renders the live value of the Gold variable.
Entities represent the characters, locations, objects, and concepts in your world:
| Entity Type | Examples | Features |
|---|---|---|
| Character | NPCs, the player, enemies | Reference portrait, personality profile, linked locations |
| Location | Towns, dungeons, rooms | Reference image, description, linked characters |
| Object | Weapons, keys, artifacts | Properties, linked locations |
| Concept | Factions, magic systems, lore | Descriptions, linked entities |
Each entity has:
- Reference image: Used by AI image generation for visual consistency
- Profile: Editable key-value fields (appearance, personality, goals, etc.)
- Entity links: Connections to other entities (character → location, object → character)
In Open World mode, the AI uses entity profiles and reference images to maintain consistency across scenes.
Click Play to launch your story. The player provides:
- Full-screen backgrounds with crossfade transitions
- Dialog box with typewriter effect and speaker name
- Choice buttons with lock icons for unmet conditions
- HUD with stat bars, counters, and floating damage/gain numbers
- System menu (Escape) with Save/Load, audio settings, text speed
- Open World input with text and voice input (microphone)
- Background music with crossfade between scenes
- AI voiceover with configurable narrator voice
| Theme | Style | Feel |
|---|---|---|
| Fantasy | Parchment textures, gold borders, warm tones | Medieval RPG |
| Cyberpunk | Neon glow, sharp edges, dark background | Sci-fi thriller |
| Modern | Glassmorphism, rounded corners, clean layout | Contemporary VN |
| Shortcut | Action |
|---|---|
Ctrl + S |
Save project |
Ctrl + Z |
Undo |
Ctrl + Y |
Redo |
Ctrl + C |
Copy selected node |
Ctrl + V |
Paste copied node |
Ctrl + X |
Cut selected node |
Delete / Backspace |
Delete selected node or edge |
Escape |
Deselect / Open system menu (in player) |
| Command | Description |
|---|---|
npm install |
Install dependencies (first time only) |
npm run dev |
Start dev server at http://localhost:5173 with hot reload |
npm run build |
Type-check + production build → dist/ |
npm run preview |
Preview production build at http://localhost:4173 |
npm run lint |
Run ESLint |
| Browser | Minimum | Status |
|---|---|---|
| Chrome | 90+ | Fully supported |
| Edge | 90+ | Fully supported |
| Firefox | 90+ | Fully supported |
| Safari | 15+ | Supported |
Requires IndexedDB (all modern browsers). Best with hardware-accelerated CSS.
- Ensure Node.js 18+ is installed (
node --version) - Delete
node_modules/andpackage-lock.json, then retry - On Windows, try running as Administrator
- Check browser console (F12) for errors
- Navigate to
http://localhost:5173(not afile://path) - Hard refresh:
Ctrl + Shift + R
- Dream-E includes memory optimization (blob URL offloading, thumbnail caching, concurrent limits), but very large projects (100+ scenes with full-res images) can still be demanding
- Close other browser tabs to free memory
- The app auto-evicts old scene assets from memory during Open World play
- Click anywhere on the page first (browsers block autoplay)
- Check volume in the System Menu (Escape key in player)
- Dream-E stores everything in IndexedDB — clearing browser data deletes projects
- Always export your projects as
.dream-e.zipfiles for backup - The app also accepts
.storyweaver.zipfiles from older versions
- Configure API keys in AI Settings (gear icon in toolbar)
- Google API key: get one at aistudio.google.com
- BFL API key: get one at api.bfl.ai
- Check the browser console (F12) and Vite terminal for detailed error logs
MIT License — free for personal and commercial use.