Author in Ink. Render with Atrament. Ship a polished visual novel to web, PWA, or single-file HTML — with character portraits, emotion swaps, themed dialog boxes, and pill choices out of the box.
A starter template for building visual novels with Atrament and Ink.
Live demo: Play now
Atrament already ships the runtime engine, choice/scene/markup system, save/load, audio, input, and PWA builds. This template layers a visual-novel UI on top of it:
- Character portraits with per-character emotion swaps (
# CHAR: <name>resolves tocharacters/<name>/<emotion>.pngvia a<name>_emotionVAR) - VN-style dialog boxes anchored to left or right portraits (
vn_left/vn_rightparagraph classes), with themed name plates - A separate narrative box for portrait-less prose between character beats (
vn_narrative) - Pill choice buttons (
PILL_PRIMARY/PILL_SECONDARY) with a slate-gradient locked-pill skin for Atrament's# UNCLICKABLEtag, plus a re-skinned click-to-continue and timer bar - One CSS token file (
theme.css) drives every colour in the UI; three CSS variables tune all portrait geometry — works with portrait, half-body, or full-body art - A structured
root/game/story/folder layout (state.ink,helpers.ink,chapters/) with enforced INCLUDE order instory.ink - A self-documenting demo chapter (
_demo.ink) that exercises every feature with inline-commented tags — doubles as a copy-paste cheat sheet
Everything else (backgrounds, audio, player input, conditional content, the toolbar binding mechanism, # CHECKPOINT, save/load, build targets) is stock Atrament — see atrament.ink and the @atrament/web-ui README.
| You want to… | Read |
|---|---|
| See what the template provides (every tag and class) | TEMPLATE.md — the feature catalog |
- Atrament Web UI by Serhii "techniX" Mozhaiskyi — the runtime engine, choice/scene/markup system, save/load, and PWA scaffolding.
- inkjs — JavaScript port of Ink by Inkle, the narrative scripting language.
- Preact — the UI runtime.
Huge thanks to Serhii "techniX" Mozhaiskyi — the author and maintainer of Atrament. Beyond building the engine this template stands on, he personally helped shape this template through reviews, testing, and patient guidance on the engine's internals. This project wouldn't exist in its current form without him. Go check out his work and give Atrament a star.
MIT. See LICENSE.md — upstream Atrament copyright preserved.




