Design Mode: Pixel-Perfect UI Without Code

Every visual novel has a distinct look — the textbox shape, character positioning, name badge style, choice layout. In most engines, customizing these means editing CSS, tweaking coordinates in config files, or working within rigid templates.

Nongine's Design mode lets you drag every UI element to exactly where you want it.

Freeform canvas

The design canvas shows a live preview of your novel's UI. Every element is draggable and resizable:

• Textbox — position, size, background color/image, opacity, border radius
• Name badge — position, font size, color per character
• Portraits — character slots with X/Y/scale controls
• Choices — choice panel position, button styling
• Click indicator — the "click to continue" prompt
• Decorations — PNG overlays with 9-slice support, blend modes, z-index

Per-scene overrides

Set a global style, then override it for specific scenes. A dark cave scene can have a different textbox style than a bright outdoor scene — without changing the global theme.

Per-character themes

Each character can have their own textbox background, name color, and text style. When that character speaks, the UI transforms to match their personality.

Layout presets

Not sure where to start? Pick from 5 layout presets:

1. Classic — bottom textbox, standard VN layout
2. Wide — full-width textbox for cinematic feel
3. Centered — centered textbox for mobile
4. NVL — scrolling text log, fullscreen
5. ADV — adventure game style

Each preset is a starting point — customize everything after applying.

Mobile preview

Toggle between desktop and mobile viewports to see how your design looks on different screens. Per-screen layouts let you create separate designs for mobile without affecting desktop.