Messenger & Visual Novel Views

10 min readUpdated 2026-10-29

On this page

Don't just read a manuscript written in dialogue — play it! One line of frontmatter turns a note into a messenger screen with chat messages arriving in real time, or a visual novel game screen alive with backgrounds, characters, and background music. 🎮💬

← Home: ObsiKO 101 · Related: 18-2 Character Codex & References · 18-1 E-book & Web Novel Viewer

1-Minute Summary ⏱️

view: messenger → a messenger view inside a phone frame 💬, view: visualnovel → a full-screen visual novel view 🎮
Write the script using the <<name:image>> reference from 18-2 Character Codex & References — the alignment suffix (|--/--|) becomes the speech-bubble direction or standing position.
Click (Space/Enter) to advance one line of dialogue at a time, ← to rewind, and ▶ auto-play is available too.
Background music, sound effects, screen effects, emotion motions, exits — both views understand the same direction syntax.
If the syntax is hard to remember, just pick and insert it with the story toolbar buttons on the left side of the editor (see section 4).

1. How to Write a Script — Shared Syntax ✍️

Add view: messenger or view: visualnovel to the frontmatter, and the matching item ("Messenger View" / "Visual Novel View") appears inside the View menu (👁) at the top.

💡 Just two rules to follow: ① The view: value must be English — messenger/visualnovel (webnovel/book for web novels and books). Case doesn't matter, and visual novel can be shortened to vn or visual-novel, but a Korean value like 메신저뷰 won't make the item appear. ② A dialogue line must start with the <<name:image>> token to be recognized as dialogue (put it mid-sentence and it just renders as narration).

---
view: messenger
---
<<Background:alley-night.png>>
<<Seoyeon:seoyeon-default.png|-->> [10:23] Where are you? Are you here yet?
<<Minjun:minjun-hurry.png--|>> Sorry, sorry, 5 more minutes!!
<<Seoyeon:seoyeon-pouting.png!shake|-->> Overslept again, didn't you?
%%shake%%
Minjun broke into a sprint at full speed.
<<Minjun:->>

Syntax	Meaning
`<<name:image>> dialogue`	That character's line (image = expression)
`<<background name:image>>`	Scene transition — messenger = chat wallpaper, visual novel = stage background (a `type: background` entry)
`[10:23]`	Placed before a line, sets its timestamp (messenger)
`# Heading`	A scene label (chapter marker)
A plain sentence	Narration (stage directions)
`> Blockquote`	Messenger = a pinned notice at the top (like a group chat notice 📢 — in plain writing with no dialogue at all, an in-flow quote card), visual novel = a system alert in the center of the screen
`---`	A divider — in visual novel, everyone exits and background music stops (scene cleanup)
`%%comment%%`	A note that doesn't appear on screen

Alignment suffix: Attach |-- (left) or --| (right) after the image name; leave it off for center. In messenger, this becomes the speech-bubble direction (right = "me"); in visual novel, it becomes where the character stands. You can also just pick it in step 3 of << autocomplete!

Put a File Where the Dialogue Goes 📎

Put an attachment where the dialogue would go, like <<Seoyeon:seoyeon-default.png>> ![[selfie.jpg]], and —

Image → messenger = a photo bubble (click to enlarge), visual novel = a CG in the center of the screen
Audio ([[voice.mp3]]) → messenger = a voice message with a play button
Any other file → messenger = a file card
Use just the token with no text, and in messenger that character's image is sent as a photo.
Stickers → add |sticker after the file, like ![[heart.png|sticker]], and it is sent as a big frameless picture like a chat-app sticker (messenger = in place of the bubble, visual novel = a pop-up next to the speaking character). Create a “stickers” folder in the vault and put images (png · gif · webp) there: the story toolbar's sticker button collects them, and images in that folder count as stickers even without |sticker. Animated gif/webp keep moving.

Direction Syntax 🎇 — Shared by Both Views!

Syntax	Effect
`![[song.mp3]]` (or a line with only music)	Background music — loops; when the track changes, the old track fades out while the new one fades in, overlapping into a smooth crossfade 🎵
`[ding-dong](bell.mp3)` inline in a sentence	Sound effect — plays once, right before that line 🔔
`%%shake%%` `%%flash%%` `%%fade%%`	Screen effects — shake · flash · fade to black (Korean aliases like `%%흔들림%%` also work)
`!question` `!exclaim` `!sweat` `!heart` `!anger` `!note` `!sleep` `!sparkle` after an image	Emote — visual novel = a small balloon pops above the character's head, messenger = a small badge on the bubble's corner. Emoji work too: `!❓` `!💦` `!❤️` `!💢` `!♪` `!💤` `!✨`. Combine with a motion like `!jump!heart` (the align mark goes last: `!jump!heart\|--`)
`!jump` `!shake` `!nod` after an image	Emotion motion — messenger = the bubble bounces, visual novel = the character bounces (`!jump`/`!shake`/`!nod`)
`<<name:->>`	Exit — messenger = a "○○ has left" system message, visual novel = the character exits the stage

2. Messenger View 💬 — Chat in Real Time

A phone frame appears in the center of the screen, and one message arrives with every click.

It feels genuinely real: for a message on the left, a "••• typing" bubble appears first; for a message on the right (you), it's typed out letter by letter in the input box at the bottom before being sent! A just-sent message briefly shows the read receipt "1" before it disappears.
Timestamps: write [10:23] for that exact time, or leave it out and a natural-feeling fake time passes. When the same person sends several messages in a row, the timestamp appears only on the last bubble, just like KakaoTalk.
A message with just 1–3 emoji shows up big, with no bubble 😆
Group chat notice 📢: put a > blockquote in the script and a pinned notice bar appears at the top of the chat (like a KakaoTalk group notice). It's collapsed by default and expands when tapped. A notice placed before the first line of dialogue shows up at the top as soon as you open the view, and every time playback passes a new > quote, the notice content is swapped in at that moment.
- Open plain writing with no dialogue (<<name:image>>) at all in messenger view, and > quotes and callouts don't get pulled out as notices — they stay in the flow of the text as quote cards (callouts just drop the marker like [!info]). So even an ordinary note opens without any text going missing.
Links feel like a real messenger 🔗: a web address placed in dialogue or narration opens when clicked, with a preview card (title, description, thumbnail) appearing below the bubble. [[wiki links]] also show up as a card that takes you to that note when clicked. In narration, a line that only lists links becomes neat pill buttons, one per line, and a link inside a sentence slips in as a small pill right where it is, without breaking the sentence. (Web preview images are filled in on the desktop app and the iPhone, iPad, and Android apps. In the web version running in a browser, some sites may show only the address on the card.)
Theme ◐: Default · Kakao · iMessage · Dark — even the input box color changes with it.
Controls: ▶ auto-play (×1/×1.6/×2.4 speed) · ⏭ skip to the end · ⏮ restart from the beginning · ♪ mute · ◐ theme · ← rewind one step (effects rewind along with it). To close, press the ‹ (back) button at the top-left of the phone frame or Esc. Your reading position is remembered per document!

3. Visual Novel View 🎮 — Just Like a Game Screen

A background fills a full-screen stage, and characters stand at left, center, or right to deliver their lines.

Stage: switches via background references (a smooth transition plus a subtle Ken Burns zoom). The speaking character stays sharp and bright, while a silent character quietly steps back and dims. Even swapping a character's expression (image) happens as a smooth crossfade — the new image is preloaded and blended in.
Dialogue box: a frameless, cinematic gradient — the speaker's name appears near their standing position in the color shade with an outline, and the dialogue types out like a typewriter (with Markdown formatting and highlight colors supported).
Branching choices: put a [[wiki link]] on a narration line and it becomes a choice button! [[#Heading]] jumps within the document, and [[other document]]/[[other document#Heading]] leads to a different episode. An interactive story, complete! 🌿
Ending: when the content runs out, the screen fades and shows "The End" — the lingering mood included.
Controls: click/Space = next, ← = rewind, ▶ auto-play (×1/×1.7/×2.6 speed), hold down on the screen (or hold Ctrl) = skip, 🔇 mute, and adjust text speed/size from ⚙. Your reading position is remembered too, of course.
📱 In the phone and tablet apps, the clock and battery hide while the stage is open so it uses the whole screen. The menu at the top (title · back · control buttons) sits a little in from the screen corners so it's easy to tap.

🎬 Same manuscript, three different theaters: you can view a single script as a novel in the Web Novel View, as a chat drama in the Messenger View, or as a game in the Visual Novel View. Just change the view value!

🤖 The AI Agent knows this syntax completely: ask it "turn this novel into a messenger-view script" or "write a branching-choice visual novel episode with Seoyeon and Minjun," and it checks the registered characters' actual image filenames and produces a script that follows the syntax correctly. If a needed character doesn't exist yet, it'll create the frontmatter note first.

Open a document whose frontmatter view: is one of the four story views (book, webnovel, messenger, visualnovel) — for web novels, a note marked as an episode like type: episode counts too — and a vertical toolbar appears against the left wall of the editor. No need to memorize the syntax — just press a button and pick, and it writes the right Markdown for you. The manuscript always stays plain Markdown.

Button	What it does
Add character	Pick a character → an expression (image) to insert a `<<name:image>>` dialogue line. Press it with a sentence selected and that sentence becomes the character's line
Add background (Insert scene background in e-book and web novel)	Pick a background note or an image from the vault to insert a scene transition
Add background music · Add sound effect	Pick an audio file from the vault to insert. You can Preview it before inserting
Screen effect	Shake · Flash · Fade to black
Stickers & emotes	Send an image from the "stickers" folder, or attach an emote above a character's head
Scene	Insert a new scene title (`# Title`) or a scene break (`---`)
Choice	Pick the section to continue to and insert a `[[#Heading]]` choice, or create a new section and link it right away
Notice & time	Insert a pinned notice (`>`) or a message's send time (`[10:23]`)
Preview ▶	Play the document in that view starting from the cursor
Ready to continue (e-book & web novel)	See the last episode's final scene and summary, the timeline events around this episode, open setups, and the last status window at once → 18-1 E-book & Web Novel Viewer
Writing log (clock, e-book & web novel)	See your writing time and where the current text came from (already there / typed / pasted), and replay how the manuscript grew as a timelapse → 18-1 E-book & Web Novel Viewer
Pre-publish check (e-book & web novel)	Points out unclosed quotes, name typos, mixed symbols, unfilled placeholders and status-window numbers that dropped — three at a time
Copy for pasting (e-book & web novel)	Pick serial site, manuscript file or as-is, then copy or save as .txt — the manuscript itself stays untouched

Each view shows different buttons: buttons a view doesn't use are hidden entirely. E-book and web novel show character, scene background, background music, scene and preview plus four manuscript buttons (Ready to continue, Writing log, Pre-publish check, Copy for pasting); messenger drops the four manuscript buttons and adds sound effect, screen effect, stickers, and notice & time; visual novel has choice instead of notice & time.
On phones and tablets: the toolbar starts collapsed so it doesn't cover your text. Tap the handle (≡) at the top to expand or collapse it, and drag the handle to move the toolbar up or down (the spot you choose is remembered).

← Previous: Character Codex & References · Home · Next: Random Box →