Skip to main content

Design Mode

Design mode lets you visually compose the VN screen — drag UI elements freely, customize styles per-scene and per-character, and add decorative images.

Canvas​

The central area shows a live preview of your VN screen with real data from your selected scene. All UI elements are draggable and resizable:

  • Textbox — where dialog/narration appears
  • Portrait — character portrait display
  • Name Badge — character name plate
  • Choices — choice button layout
  • Click Indicator — "click to continue" marker
  • Character Slots — 5 positions where characters stand

Controls​

  • Drag any element to reposition
  • Resize handles — 8 handles on corners and edges
  • Arrow keys — nudge selected element (5% step, Shift for 1%)
  • Grid — 5% snap grid (toggle with Grid button)
  • Alignment guides — appear when near center or edges

Preview Modes​

Bottom bar switches between: Dialog, Choice, NVL, Chapter, Ending.

Editing Target​

  • Global Style — changes apply everywhere
  • Scene overrides — changes apply only to that scene

Presets​

  • Theme Presets — colors, fonts, effects (Classic Dark, Light Novel, Retro Pixel, etc.)
  • Layout Presets — element positions (Classic, Compact, Cinematic Wide, Center Stage, Side Panel)

Right Inspector​

Select an element to edit its properties:

  • Position — X, Y, Width, Height in %, Anchor point
  • Textbox — background color/image, opacity, blur, border, shape, animation
  • Typography — font, sizes, colors, letter spacing, text shadow, text stroke
  • Choices — button colors, hover, border, font, layout
  • Character Slots — X, Y, scale
  • Decorations — opacity, z-index, blend mode, nine-slice, attach to parent

Decorations​

Add PNG overlays as UI elements:

  1. Click + Decoration → select image
  2. Drag and resize on canvas
  3. Set opacity, z-index, blend mode in inspector
  4. Attach to parent — follows textbox/portrait when moved
  5. Nine-slice — stretchable frames (corners preserved)

Per-Scene and Per-Character Overrides​

  • Per-scene: Click scene name in sidebar → edit overrides (orange badge)
  • Per-character: Assets mode → Character Detail → Theme Overrides section
  • Priority: character > scene > global

Undo​

All design changes support Ctrl+Z. Drag operations are debounced (snapshot after 500ms).