Visual novels are the most under-served genre in the browser-game weekend-build canon. The format has a proven audience — Steam counts more than 3,000 published VNs across paid and free tiers, and 5pb / MAGES titles like the Steins;Gate series have sold well past two million units lifetime (verified against en.wikipedia.org/wiki/Visual_novel on 2026-08-10) — but almost every "how to make a visual novel" tutorial still assumes you will download Ren'Py, learn a Python-adjacent DSL, and treat the browser as an afterthought. The 2026 pipeline is very different. HTML5 layered images render the classic full-bleed background plus character-portrait layout for free, a coding agent scaffolds the scene interpreter in one prompt, and AI generation covers every asset a VN needs. In a browser, that means WizardGenie to scaffold the scene interpreter, Sorceress AI Image Gen for reference-consistent character portraits and painted backgrounds, Speech Gen for full voice acting or a specific cloned voice, Music Gen for the mood-shifting soundtrack, and SFX Gen for page-flip stingers and ambient loops. This guide is the honest end-to-end for how to make a visual novel in 2026, in a browser, in a weekend.
What "how to make a visual novel" actually means in 2026
The query "how to make a visual novel" almost always hides one of two very different intents. Some searchers want a kinetic novel — a linear illustrated story you click through, no branches, no choices, essentially an animated e-book with voiced dialogue and BGM. Others want a full branching-narrative VN with multiple endings, affinity variables, and route unlocks in the tradition of Fate/stay night or Doki Doki Literature Club. This guide targets the second, because the branching version is what "visual novel" means to most players in 2026 and because the linear kinetic case is just the branching case with a single default choice per scene. Once the interpreter can handle branches, the linear case is free.
The presentation contract is the same in either case. A full-bleed painted background fills the browser window. One to three character portraits layer on top in canonical slot positions (left, center, right) with a slight vertical anchor at the bottom so the head sits above the dialogue box. A dialogue box sits along the bottom fifth of the screen, with a name-tag identifying the current speaker and a typed-in line of dialogue. When the current line ends, either a click advances to the next scene or a choice UI appears as inline buttons on top of the dialogue box. That is the whole layout. Every published VN from 1990s NEC PC-9801 releases through modern Nintendo Switch entries honours the same four-element stack, which is why the format renders so cleanly in a browser: it is fundamentally a positioned-image UI, and HTML has been positioning images since 1993.
The visual novel game loop in one minute (show scene, present choice, branch, save)
Six moving parts and nothing else, in strict order per scene tick. First, load the current scene node from the scene graph — a JavaScript object with an id, a background image path, an optional music-track path, a speaker, a line of dialogue, and either a next id (linear) or a choices array. Second, cross-fade the background image if it changed since the last scene. Third, position the character portraits — add sprites to their slot positions, fade out ones that left the scene, fade in ones that entered. Fourth, render the dialogue box — set the speaker name tag, type the line of dialogue with a small per-character delay (the classic VN feel is roughly 30 milliseconds per character, with a Space or Enter press to instantly complete the line). Fifth, on click after the line completes, either jump to next or render the choices array as inline buttons and wait for a click. Sixth, on choice click, apply any variable mutations, jump to the chosen next id, and loop.
Every three or four scenes, autosave — write the current scene id and all variables to localStorage under a key like vn.autosave. On page load, if an autosave exists, offer a "Continue" button next to "New Game". That is the entire game. Six steps, executed once per scene click, driven by a plain JavaScript state machine. Everything else — the CG gallery, the achievements grid, the localisation-switch dropdown, the character-affection tracker sidebar, the log-of-past-lines panel — is polish layered on top. Keep the core loop tight, ship the first three scenes end-to-end, and only then start layering polish. A first-time VN that ships one linear route with two endings will teach you more than a partially-built VN with a full features spec.
Pick your engine for how to make a visual novel: vanilla JS, Phaser 4, or WizardGenie
Three good browser targets in 2026, each with a very different trade-off. Vanilla JavaScript with a DOM-based layout is the honest default and the pick this guide recommends for a first build. A VN is fundamentally a stacked-image UI: three CSS-positioned img elements (background, character-left, character-right) plus a dialogue-box div plus a scene-interpreter script is under 400 lines and ships as a static HTML file. The HTMLAudioElement API handles BGM and dialogue voice playback natively; the Fetch API or a dynamic import() loads scene JSON on demand. No engine to install, no build step, deploy the whole game to any static host including GitHub Pages.
Phaser 4.2.1 "Giedi" (released 9 July 2026, verified against phaser.io/download/stable on 2026-08-10) becomes the right pick if you want smooth character-portrait tweening (fade-in, slide-in-from-left, subtle idle bob, sprite-shake on angry lines), particle effects for scene transitions, integrated audio timeline management so BGM cross-fades cleanly with voice ducking, or if the VN has any real-time gameplay interludes (rhythm mini-games, timed choices, action segments). Phaser bundles Scene management, an asset loader, and audio playback in one file — roughly 900 KB minified — and its Scene lifecycle maps cleanly onto VN chapter breaks. If you have already used Phaser on a previous game, use it here too; there is no benefit to switching back to vanilla DOM just because the presentation is static.
WizardGenie is not a separate rendering engine — it scaffolds whichever of the above you pick, from a single natural-language prompt. WizardGenie is the Sorceress game-native coding agent. It ships as both a desktop app (Windows installer with auto-update, available to Early Access supporters and above) and a no-install web build at the same URL. Its coding-model lineup covers Claude Opus 4.7, Claude Sonnet 4.6, GPT-5.5, Gemini 3.1 Pro, DeepSeek V4 Pro, Kimi K2.5, Grok 4.2, and MiniMax M2.7 (verified 2026-08-10 in src/app/_home-v2/_data/tools.ts). For a VN-scale project, any frontier model scaffolds the whole scene interpreter in one prompt. If you want to run cheap, pair a frontier planner (Claude Opus 4.7 or GPT-5.5) with a budget executor (DeepSeek V4 Pro or Kimi K2.5) and let the executor do the typing — the Dual-agent planner-and-executor pattern is the whole reason WizardGenie exists, and it lands most projects at roughly one-fifth the single-frontier cost.
Step 1 — write the script and design the branching choice tree
Nothing else in the pipeline matters if the script is not written first. A VN lives or dies on the writing, and every hour spent on assets before the script is a bet against the story. Open a plain text editor, sketch three to seven characters with one-paragraph bios each, pick a setting, and draft the branching outline as a bulleted tree: opening scene, first choice, two branches, first convergence, second choice, four branches, second convergence, ending selection. Do not write dialogue yet. Verify the tree is finite (no infinite loops), that every branch reaches an ending, and that every ending is reachable from at least one opening-choice combination. Twelve to twenty scenes is the sweet spot for a first VN — enough to feel like a story, small enough to finish.
Now convert the outline into the scene-graph JSON. Each scene is one object: {id: 'sc02_classroom', bg: 'bg_classroom_sunset', bgm: 'bgm_calm', speaker: 'Aiko', line: 'You always leave right after class...', choices: [{label: 'Talk to her', next: 'sc03_talk', effects: {affection_aiko: 1}}, {label: 'Leave', next: 'sc03_leave', effects: {trust_kai: -1}}]}. Linear scenes drop the choices array and take a next field instead. Convergence scenes look identical to linear scenes — the interpreter does not care that four different paths land on the same id. Ending scenes have neither choices nor next, and set a special ending field with a name.
Now write the dialogue. This is the part that cannot be delegated. A VN reader spends more time inside a single well-written line than any other browser genre, so the words carry the whole experience. Use short lines (a VN line is one to three sentences, not a paragraph), keep the speaker's voice distinctive per character, and lean on ellipses and short beats between speakers rather than long stage-direction paragraphs. If a scene needs an emotional beat, do it in one line and cut. When a scene grows past four lines, split it into two scenes chained with next so the click cadence stays snappy. Total dialogue for a one-hour first VN comes out around 400 lines — that is a real evening's work, not a weekend.
