E-book & Web Novel Viewer

What if you could preview your writing exactly as it would look in a real e-book or web novel app? One line of frontmatter turns an ordinary note into a page-turning e-book, or a web novel right inside a phone screen! 📖📱

← Home: ObsiKO 101 · Related: 18 Making Presentations · 18-2 Character Codex & References · 18-3 Messenger & Visual Novel Views

---

1-Minute Summary ⏱️

• Add view: book to the frontmatter → a page-turning e-book viewer 📖
• Add view: webnovel → a web novel viewer right inside a phone frame 📱
• Both viewers let you freely adjust font, size, margins, and theme from a single round floating settings button in the bottom-right corner! (Same glass design as the formatting toolbar in 23 Settings & Themes.)
• The magic spell works exactly the same way as marp: true in 18 Making Presentations.

1. Casting the Viewer Spell 🪄

Just add a view property to the frontmatter (the note's "ID card") area at the top of the document.

If there's no frontmatter box yet, right-click (long-press on iOS) and choose "Insert Frontmatter". Click the "+ Add Property" button below the box, pick view (it shows up as soon as you type v), and set the value to book (e-book) or webnovel (web novel) — done!

---
view: book
---

Once this spell is in place, open the View menu (👁) at the top and an item that's usually not there appears — ta-da!

• view: book → "View as Book" (open-book icon 📖)
• view: webnovel → "Web Novel View" (smartphone icon 📱)

💡 For web novels, web-novel and novel work just as well, and the value isn't case-sensitive (Book is fine too).

---

2. E-book Viewer 📖 — Just Like a Real E-book

Click the button and the screen goes full-screen, with the document automatically split into pages that fit the screen size, just like a book.

• Single-page / two-page view: Desktop, iPad, Android tablets and an unfolded iPhone Duo default to two-page view (showing pages side by side, joined at the center, like an open book), and you can switch to single-page view. On phones (iPhone, Android phones and a folded iPhone Duo), the screen width means it's always single-page view. Fold or unfold the Duo with a book open and it re-lays the pages right there between single and two-page view, keeping the line you were reading on screen.
• Font choice: Pick from Maru Buri, RIDIBatang, KoPubWorld Batang/Dotum, Seoul Namsan, Source Han Sans, Source Han Serif, or the system font. The default font depends on the layout below.
• Font size · margins: Font size uses a stepper (− number +), and margins have three levels — narrow/normal/wide.
• Theme: Day (light) · Sepia (easy-on-the-eyes cream) · Night (dark).
• Page numbers · progress: Each page has a number at the bottom, and a progress bar at the top shows at a glance how far you've read.
• Title page (first page): Opening a book shows a title page first. In two-page view it sits on the right only, like the first leaf of a real book, with the left side left blank. Page numbers start at 1 with the body text, not the title page.
  • Color cover: if the note has a color property (color · 색상 · 컬러 — a Korean color name like 남색 or a code like #2c3e66 both work), the title page is painted that color. The title text turns light or dark on its own to suit the background, and from the next page on it's plain paper.
• Status windows (code blocks): lines longer than the page width wrap inside the box, and a status window longer than one page continues onto the next page (the next column in Magazine).
• Highlighter: Select text while reading and a color palette appears. The color is written into the note itself (==text==), so it's still there when you go back to the editor. Click a highlight to change its color or remove it (the text stays). If the same sentence appears more than once and the spot can't be pinned down, ObsiKO writes nothing and tells you — select a little more in that case.

Choosing a Layout 📐

In the Layout row of the settings button (⚙), you can pick one of five page designs for your book.

💡 Each layout remembers its own font, font size, and margins. Change the font in Classic, hop over to Magazine and back, and it's still the same. To go back to the original look, press "Reset this layout" (it only shows up when you've changed something). The theme and single/two-page view are shared by all layouts.

Turning Pages

• → / Space / PageDown: next page, ← / PageUp: previous page
• Click the left/right edge of the screen, or swipe left/right on a touch device
• The leaf turns: when you turn a page, two-page view flips the leaf around the spine, and single-page view slides it aside. On a touch screen, drag with your finger and the leaf follows your fingertip; when you let go, the speed and distance decide whether it turns or springs back. With your device's 'Reduce Motion' on, pages turn instantly with no motion.
  • It bends like paper 📄: in two-page view the leaf doesn't swing round stiff as cardboard — it bends like paper with a little spring in it. Midway through, the outer edge curls slightly ahead, and once it lands the edge gives a tiny bounce and settles. You can even see a hint of paper thickness at the turning leaf's edge. The cover (first page) bends less. Turning with your finger works the same way.
• 📱 Phone and tablet apps (iPhone, iPad, Android): while a book is open, the clock and battery hide and the paper fills the screen edge to edge. The top bar and settings stay hidden at first and appear when you tap the center of the screen (tapping the left or right side only turns pages).
• Home / End: zip to the very beginning / the very end
• + / −: increase / decrease font size

3. Web Novel Viewer 📱 — That In-Your-Phone Feel

This time your writing appears inside a phone frame, just like a real web novel app. It even has space at the top and bottom for the camera and home button, for extra realism!

• 📱 Phone and tablet apps (iPhone, iPad, Android): just like the e-book viewer, the clock and battery hide and it uses the whole screen while it's open. On a phone (a folded iPhone Duo included) the text fills the screen with no frame; on iPad, Android tablets and an unfolded iPhone Duo the frame stays, and you can use multi-page view below. The menu at the top (✕ · table of contents) sits a little in from the screen corners so it's easy to tap.

Layout Presets

We've prepared five presets that match the exact page proportions of real platforms. Each preset has its own default font, font size, line spacing, and background.

The preset dropdown in the bottom-right is always visible, so feel free to switch back and forth anytime. Amazingly, each preset remembers your own settings (theme, font, etc.) separately — so if you switch to Night theme in RIDI and then move to Kakao and back, RIDI is still exactly how you left it!

Scroll View ↕ vs Page View 📄

• Scroll view: The familiar way of reading up and down. Turn on the auto-scroll button (3 speed levels) and it reads on smoothly without you lifting a finger!
  • Scroll down and the top bar and the settings and auto-play buttons hide right away, leaving just the text; scroll up and they come back. On a touch screen, a tap on the text shows or hides them.
• Page view: One screen is one page. Read by flipping left and right. On a wide screen, the Multi-page row in settings lets you spread two or three pages side by side (always one page on a phone). Reading two pages on an unfolded iPhone Duo and fold it? It switches to one page, and back to two when you unfold — you stay on the same line.
• The auto button also works in page view — here, pages turn by themselves at a steady interval. While auto-play is running, (on supported devices) it keeps the screen from turning off. 📱✨

Zip to the Next Episode — Continuous Serial Reading 📚

• If there are multiple view: webnovel documents in the same folder (like a serialized manuscript), the "Next Episode ▸" / "◂ Previous Episode" buttons on the last page let you switch files and keep reading straight through. They move in file-name order.
• Instead of view, you can also write type: episode, type: webnovel (or 웹소설) — the note counts as a web novel episode for the viewer button, next episode, the episode list, and the episode table on a web novel project's dashboard (the "Web novel" template).

Other Settings

• Font · font size · line spacing · margins
• Alignment: left-aligned / justified
• Background: White · Cream · Sepia · Green · Dark
• 💡 Even if you resize the ObsiKO window, the content doesn't reflow — it just scales up and down at the same proportions, so your reading flow never breaks.

4. Tips Common to Both Viewers 🍯

• Resume where you left off 🔖: Close the viewer and reopen it, and it picks up exactly where you left off (remembered per document). A document you've read all the way to the end starts over from the beginning next time. Your reading position and bookmarks are saved in the vault's .obsiko/reader-pos.json file, so you can keep reading on any other device that opens the same vault. Even if you edit the manuscript a little, it finds the sentence you were reading.
• Contents button 📑 — search, bookmarks, and episodes too: Press the Contents button at the top and a small panel opens.
  • Search text: Type a word in the box at the top and the matching lines appear; click one to jump right there! Pressing ⌘F (Ctrl+F on Windows and Android) in the viewer opens this box directly.
  • Bookmarks: Press "＋ Bookmark here" to bookmark the spot you're viewing. Click one in the list to go back there, or ✕ to remove it.
  • Episodes (web novel): If the same folder has several web novel documents, an episode list appears so you can jump straight to any episode.
  • Contents: If the document has headings (#, ##...), the chapter list shows up here too.
• "Manuscript changed · Reload" chip: If the manuscript changes while the viewer is open (say, the AI edited it or it synced from another device), this chip appears on screen. The text doesn't re-flow on its own, so your reading isn't interrupted; press the chip and it shows the new manuscript right from where you were.
• Jump via the top progress bar: Click or drag the progress bar at the top to jump straight to that spot (in scroll view, it moves to that scroll position).
• Info in the top-right: Tells you the document's total page count · character count · estimated reading time (about n minutes) (character count in web novel scroll view).
• Floating settings button (round ⚙) in the bottom-right: Click it and the settings slide open upward. Click it again or tap outside to close. You don't need to open it every time you turn a page, so leave it closed normally. (On a folded iPhone Duo, this button and the web novel's auto-play ▷ button move to the strip on the right of the screen, and the settings open to their left → 25 Platform Guide)
• Mute the background music ♪: If the manuscript carries background music, a ♪ button appears at the top. Tap it to mute when you want to read in silence.
• Buttons quietly fade away: If there's no activity for a moment, the buttons and progress bar fade out softly so you can focus purely on the text. Move the mouse or tap the screen and they reappear (in the e-book viewer of the phone and tablet apps, tap the center of the screen).
• Links in the text are clickable too: You can click [[wiki links]] or web links right in the text to navigate (even if they sit on top of the page-turn area, the link takes priority).
• Exit: Click the ✕ button in the top-right of the screen, or just press Esc, to return to the editing screen (in the e-book viewer of the phone and tablet apps, tap the center to bring up the top bar, then ✕).

5. What Can You Include? 🎁

Almost every bit of Markdown you normally use renders beautifully as-is — headings, lists, blockquotes, tables, highlights, images, code blocks, even charts and diagrams and KaTeX equations! The mood of the text follows whatever theme (background, text color) you've chosen in the viewer.

Character References and Background Music Come Alive Too 🎭🎵

If your manuscript contains the <<name:image>> syntax from 18-2 Character Codex & References —

• A character reference appears as a round face icon + "quoted dialogue" with no name, and a background reference appears as a divider reading "name · image name" (a scene transition).
• A line that attaches only music (![[song.mp3]], [[song.mp3]], or a bare path) loops as background music while that passage is visible. When you reach the next song's passage, the previous track fades out while the new one fades in — a smooth crossfade. Sound-effect links inline in a sentence and %%comments%% are quietly hidden.

🧰 When writing a manuscript like this, try the story toolbar that appears on the left side of the editor. It lets you pick and insert characters, scene backgrounds, background music, and scenes with buttons → More about the story toolbar

Seeing this episode's length 📏

When you open a web novel episode, a chip like 1,500 / 5,000 chars appears in the status bar. It shows the whole length of this episode against your goal; the bar under the text fills up and turns the accent color when you reach the goal.

• It counts as the text would be pasted into a serial site — properties, markdown symbols, %%notes%%, images and the leading title are left out, and spaces are counted by default. That's why it differs a little from the "total characters" item next to it (which counts the raw text).
• Put a line saying Author's note at the end of the manuscript (## Author's note, [Afterword] or Author's note: Thanks for reading! work too) and everything below it is left out of the length — hover over the chip to see how many characters were left out.
• Click the chip to change the goal (3,000–7,000 presets, − / + in steps of 100 — hold to repeat) and whether spaces count — or use Goal (characters) and Length goal count under Settings ▸ Status bar items. The goal applies to every episode.
• How much you wrote this session is counted separately by the character counter in the focus timer (the two do different jobs).
• Add a file.chars (characters) or file.charsNoSpace column to a table (.base) of episodes and each episode's length fills in automatically. The web novel project's episode table has it from the start.
• If the chip gets in the way, turn off Settings ▸ Status bar items ▸ Length goal.

Ready to continue 📖

Before writing a new episode, press Ready to continue (a book with a back arrow) in the story toolbar.

• Last episode — the previous episode in the same folder, with its last scene (the last two paragraphs, skipping author's notes). If that episode has a summary: it's shown too.
• Summarize in 3 lines (AI) (when AI is available) — what happened, how characters changed, how it ends. It stays on the card until you press [Save], which writes it to the last episode's summary property (marked summary_ai: true). Notes with ai: deny are never sent. AI does not write the story for you.
• Open setups — unchecked items from the foreshadowing ledger (a note with "foreshadow" in its name) inside the work's folder. Write (planted ep. 3 → due 5) and what's due floats to the top. [Paid off] checks it right there, and a new setup typed below goes into the ledger with (planted ep. 6) — a ledger is created if there isn't one.
• Reader time — each setup line gets 18 ep. ago · readers saw it 23 days ago. You remember everything, but readers forget a scene from days or weeks ago. "Episodes ago" comes from the (planted ep. 12) tag; "days ago" is shown only when both episodes have a release date (no guessing). Hover to see which episode's date was used.
• Save a setup straight from the manuscript — in an episode, select a sentence, right-click (long-press on phones) and choose Save as a setup…. A small card opens: add what it sets up in one line (optional) and the episode to pay it off, then press Enter — the ledger gets The killer's footwork — “the sentence” (planted ep. 1) (due ep. 12). The manuscript itself doesn't change. Click that line in this list to jump to the sentence in the episode where you planted it (if you've rewritten the sentence since, just that episode opens). Saving the same sentence twice tells you it's already there.
• Last status window — if your work uses status windows, the last one from the previous episode shows up here. [Insert] puts it at the cursor, [Copy] to the clipboard; switch between characters with the name chips. See "Living status windows" below.

A quick check before pasting ✅

Press the Pre-publish check button (a clipboard with a check mark) in the story toolbar and it looks at just five things that break immersion — showing the first 3 instead of a flood.

• An open dialogue quote — dialogue that closes within the next line or two is fine. [Show] jumps there.
• A suspected name typo (Korean names only for now) — a spelling one syllable off from a Korean name in the codex (e.g. 에리카 → 에리타), or one that only differs in spacing (마나 스톰 ↔ 마나스톰). Even if the codex has only a full name like 김수아, the given name 수아 used in the text is recognized as that name. It never flags another character's name. Names in other scripts aren't checked yet. [Change to “에리카”]
• Mixed symbol styles — ellipses (... and …) or scene breaks (*** and ◇) mixed → [Unify]. Dialogue quotes mixed as “ ” and " " (or ‘ ’ and ' ') are flagged too — pick [Unify to “ ”] or [Unify to " "] and only quotes that clearly pair up on one line change, while apostrophes like don't and quotes inside code or links stay as they are. Lines where a quote faces the wrong way, like “Really?“, get a [Fix direction] button (if straight quotes are mixed in too, the two buttons above fix the direction as well).
• Unfilled spots — TODO, ○○, [미완] (??? isn't counted — it's common in dialogue and status windows; the flagged marker shows in bold in the list)
• Status numbers that dropped without explanation — only when it looks like you copied the character's last status window and mistyped one number (e.g. STR 42 → 41). Not flagged when several numbers move together (level-up, gear swap, buff ending), when the preceding paragraphs mention a curse, exhaustion, regression and so on, or when you wrote the change yourself with an arrow (47 → 45).

Fixes can be undone with ⌘Z, and when everything's clear you'll see "Ready to paste". The Copy for pasting box also mentions it in one line when something needs a look.

Pasting into a serial site 📋

When you move a finished episode to a serial site or a manuscript file, press the Copy for pasting button (the clipboard icon) near the bottom of the story toolbar.

• Serial site — a blank line between paragraphs, and the leading title is left out (sites have a separate title field).
• Manuscript — each paragraph starts with a full-width indent, with no blank lines in between (for submissions).
• As is — only the markdown symbols are removed; the lines stay as in your draft.

Symbols like bold and links, properties, and %%notes%% are removed, scene breaks (---) become * * *, and status windows (code blocks) go in as is. Check the preview and the character count with and without spaces, then press Copy or Save as .txt. Your draft note doesn't change at all. "Copy for pasting" in the command palette (⌘P) copies right away in the format you picked last.

• Many serial sites have separate boxes for the title, body and author's note, so the window has [Title] [Copy body] [Author's note] buttons — press them one at a time, in the order of the boxes. Everything from the Author's note line at the end of the manuscript down is left out of the body and copied separately (the title is the leading # heading of the body, or the note name if there isn't one).

Dialogue quotes and scene breaks on a phone ✍️

On phones and tablets, the formatting button (the small round button in a corner of the screen) shows two more buttons — only in web novel and book documents.

• “ ” (Dialogue quotes) — inserts a pair of dialogue quotes with the cursor in the middle. If the manuscript already uses corner brackets 「 」, it uses those instead (with no quotes yet, Japanese and Chinese screens start with 「 」, others with “ ”). Select text and press it to wrap that text; press it again on empty quotes to remove them.
• Scene break — inserts a scene-break line with a blank line before and after. It follows the style your manuscript already uses (◇ ◇ ◇, *** and so on), so 'Mixed symbol styles' never comes up in the Pre-publish check.

Living status windows 📊

In hunter, game-fantasy and regression stories, a slip like "the hero was level 45, and in episode 50 he's 43" gets called out in the comments right away. ObsiKO reads the status windows you already write and remembers each character's last one — no separate spreadsheet, no new syntax.

• Write them the way you always do: two or more bracket lines like [Name: Kang Jin-hyuk] [Level: 12] [STR: 47] [AGI: 30], Name: value lines under a [Status] or [Kang Jin-hyuk's Status] header, a code block (```), a ┌─┐ box drawing, or STR 10 | AGI 12.
• A small badge next to changed numbers — ▲3, ▼2, new. Hover to see what it was compared with ("episode 2 status window: 47 → now 50"); click to jump there. The manuscript itself doesn't change.
• Enemies, companions and love interests are tracked separately. Only windows with a name are compared (a Name: line or a [… 's Status] header). A window with only a title, like a boss the hero inspects ([Grash]), is tied to that character if the name is registered in the Codex. Romance-fantasy lines like [Kyle's affection: 40%] are followed per character too.
• Deliberately not compared: windows without a name (they can't be told apart from monster windows), titles not in the Codex (two [Goblin Warrior]s may be different goblins), values that naturally go up and down like HP, MP and EXP, fractions like 90/200, and trailing parentheses like (+5) (gear bonus or change — it differs by story). It stays quiet rather than show a wrong badge.
• Just one [Name: …] line at the top of a window turns comparison on.
• Recall by name — start typing a name in a new window's name field, like [Name: Gr, and that character's last status window (the one above in this episode, or else the previous episode's) appears in a list. Pick it with a tap, a click or Tab (Tab on computers — tap only on iPhone and iPad) and the rest of the lines are filled in exactly as you wrote them. Enter still just starts a new line — so typing a new character's name never pulls in someone else's window. Starting with a header like [Grash's Status works too.
• /status — on an empty line it shows one "Status window · Grash" item per character. Type part of a name (/Gra) to filter, or /status Grash to go straight there. Writing the name line first ([Name: Grash]) and then /status below it fills in that character too. Choosing plain "Status window (last one)" lists the character named in the sentence just above first, then the most recent ones (with only one character it goes straight in — unless the sentence above talks about someone else, like Seoyeon's status window flickered up., in which case it asks). With no window yet, you get a starter template.
• Side stories are kept apart from the main story. Episodes in the same folder are compared in order.

Mobile preview 📱

While you write, the [Mobile preview] tab of the Reference panel on the right shows the note you're writing on a phone screen (desktop and tablet). "Mobile preview" in the command palette opens and closes it too. It works for every note, not just web novel episodes. → 07 Search & Navigation

• It breaks lines at a real phone width (360) and then scales to fit the panel — so you see how long a paragraph feels on a phone as you write. Font size, line spacing, margins and theme follow what you set for that style in the web novel viewer.
• It updates shortly after you stop typing and scrolls to your cursor; while you're composing Korean it waits. The reader style defaults to Smartphone; switch to the Ridi, Series, Munpia or Kakao style from the list under the tabs.
• Next to it, [Scroll | Page] picks the view mode. Page splits the text into pages like the web novel viewer and shows the page your cursor is on — see where a sentence breaks across pages as you write. Turn pages with ‹ › below, by clicking the left or right side of the page, or with the mouse wheel. Your choice is remembered.

Writing log & timelapse ⏱️

Just as illustrators share a timelapse of drawing something themselves, ObsiKO can keep how your manuscript grew and show it back.

• When you write a web novel or book manuscript, every keystroke is logged inside the vault (.obsiko/writing-log) automatically (Settings ▸ Save ▸ Writing log: web novel & book manuscripts only / all notes / off). Sync the vault with iCloud or Dropbox and what you wrote on your Mac, iPhone and iPad piles up in one place; GitHub sync carries it when “Sync app records too” is on. A vault shared with Obsidian logs nothing until you press [Turn on for this vault] in the popover.
• The Writing log (clock) button in the story toolbar — writing time, sessions, days, where the current text came from (already there / typed / pasted / app features — text that existed when the log started, like a note converted from a document, counts as “Already there”, and deleted text drops out; properties and spaces aren’t counted), characters added while logging (including deleted ones), time per device, a bar per day, and "✓ Continues into the current manuscript" (it tells you when another device’s records haven’t arrived yet).
• [Watch timelapse] — replays on a real editor screen. Korean syllables composing, the caret and line wrapping look exactly as they did while writing, and pasted or AI-inserted text drops in all at once, just as it happened (no tags or coloring on stage — the scrubber’s tick marks and a one-line caption below tell you). Speed: real time, 2×, 4×, 8×, 16×; frame: vertical, landscape or square. Long breaks show "3 hours later" or "Next day", and where another device continued you see "Branch written on another device".
• [Save video] (desktop app — the real screen pixels; vertical 9:16, landscape 16:9 or square) · [Save log card] (an image with your time, ratios and daily bars) · [Save log file] (.obsiko-log.json — replay it in ObsiKO with "Open writing log file"). On iPhone, iPad and Android you get replay, the card and the file.
• ⚠ This is a record of exactly how you wrote. Deleted passages stay in the log, so keep that in mind when sharing a vault with others. Deleting a note moves its log to the trash with it (restoring brings it back), and renaming carries it along.

If you're writing a novel, essay, or any long-form piece, the web novel viewer is perfect for checking "this is how it'll look to readers." If you're putting together a manuscript to bind into a book, preview the open-book feel with the e-book viewer! ✨

---

← Previous: Making Presentations · Home · Next: Character Codex & References →