Visual Novel Dating Sim Editor

A web-based editor for creating and previewing Visual Novel scripts with real-time feedback.

🏗 Architecture

Frontend: Next.js (TypeScript) + Tailwind CSS.
State Management: React useState and useEffect in app/page.tsx.
Script Engine: Custom regex-based parser in lib/vn-parser.ts.
Renderer: Dynamic React component in components/VNPreview.tsx that reconstructs the scene state.
Persistence:
- Automatic localStorage sync for current session.
- Script export/import as .vns files.
- Inline Base64 image embedding for portable project files.

say Character "Dialogue": Display dialogue for a character.
say "Dialogue": Narrator text.
sprite Char Emotion at Position: Place a character on screen.
- Positions: pos1 to pos8.
wait 2s: Pause for duration (can add skippable).
label Name: Define a jump point.
choice "Text" jump:Label: Create a branching choice.
define_sprite Char ID "URL": Register a sprite asset.

The project is optimized for Docker using Next.js standalone output.

# Build the image
docker build -t vn-editor .

# Run the container
docker run -p 3000:3000 vn-editor

npm install
npm run build
npm run start