Live preview

The right pane is the document rendered as styled HTML, updated live as you type. Links work, tables align, code is shown in a monospace block, task lists get checkboxes, and every rendering-extension block (see below) draws its figure in place. The preview is a faithful picture of what an HTML or PDF export will look like.

If a Markdown document opens with a YAML front-matter block — the --- key: value --- section that tools like Jekyll, Hugo and Obsidian put at the very top — Markzen renders it as a tidy metadata card above the document, instead of letting the closing --- turn into a stray heading.

Layout modes

A group of three toolbar buttons sets what the window shows:

• Split view — editor and preview side by side. Drag the divider to change how much space each gets.
• Show editor — the editor alone, filling the window for distraction-free writing.
• Show preview — the preview alone, a clean full-width reader.

Table of contents

The Table of Contents button opens a panel built automatically from every heading in the document (#, ##, ###, …). Click any entry to scroll the preview to that section. Any heading with sub-headings beneath it shows a chevron: click it to Collapse that section and hide its nested headings, or Expand to bring them back — so you can fold a long outline down to just the parts you're working in. The small 2 / 3 / 4 buttons in the panel header limit the outline to that heading depth — useful in a long document when you only want the top levels in view — and clicking the active one again brings every level back. The panel resizes by dragging its left edge and collapses to free up reading space. It's a navigation aid inside the app only — it never appears in an export.