Editor

Live preview editing, supported Markdown syntax, images, tables, and diagrams.

Live Preview

mdnb uses a hybrid editor: paragraphs you're not editing show rendered formatting (bold, italic, headings), while the paragraph under your cursor reveals the raw Markdown syntax. This gives you the best of both worlds: a clean reading experience and full control over your markup.

Supported Markdown

mdnb supports standard Markdown plus GitHub Flavored Markdown extensions:

  • Headings (H1 through H6)
  • Bold, italic, strikethrough, and inline code
  • Bullet lists and numbered lists
  • Task lists with clickable checkboxes (- [ ] and - [x])
  • Blockquotes
  • Horizontal rules
  • Fenced code blocks with syntax highlighting (language-specific: Swift, Python, JavaScript, and more)
  • Links and images
  • Tables (with inline editing)
  • Inline #tags
  • YAML frontmatter

Images

You can add images to your notes in several ways:

  • Drag and drop an image file into the editor. mdnb copies it to the note's folder and inserts a Markdown image link.
  • Write a standard Markdown image link: ![alt text](image.png)
  • Use wikilink syntax: ![[image.png]]

mdnb resolves image paths relative to the note, and can also find images by filename anywhere in your vault. Supported formats: PNG, JPG, GIF, WebP, SVG, BMP, and TIFF.

Link Previews

When you paste a URL on its own line, mdnb fetches OpenGraph metadata and renders a rich preview card with the page title, description, and thumbnail image. Click the card to open the URL.

Tables

Markdown tables render inline with click-to-edit cells. Click any cell to open a text field for editing. Right-click a table for additional options:

  • Insert row above or below
  • Delete row
  • Insert column left or right
  • Delete column

Mermaid Diagrams

Fenced code blocks with the mermaid language tag render as interactive diagrams inline. Supported diagram types include flowcharts, sequence diagrams, state diagrams, class diagrams, and ER diagrams.

You can pan and zoom rendered diagrams with scroll or pinch gestures. Hover a diagram to reveal an edit button (to modify the source) and an expand button (to view it full-screen).

mdnb includes an experimental native renderer. You can switch between the native renderer and the mermaid.js fallback in Settings > Editor.

IFrame Embeds

HTML <iframe> tags in your notes render as inline web views. You can configure which hosts are allowed in Settings > Editor under "IFrame allowed hosts."

Autosave

Notes save automatically one second after your last edit. You can also save explicitly with Cmd+S.

Properties Panel

Toggle the properties panel from the toolbar to view and edit YAML frontmatter as structured key-value pairs. The tags property gets special treatment: tags appear as removable chips with a dedicated input field for adding new ones. Changes in the properties panel update the raw frontmatter in your note automatically.