Features

Core Editor

5 min read
Core Editor

Core Editor

Write in rich text, save in markdown. Never lose your work.

RiteMark gives you a visual editor that feels like a word processor but saves everything as plain markdown files. Your documents stay portable, readable, and yours.


What You Can Do

  • Write visually - See formatting as you type, no preview pane needed
  • Auto-save - Every change saves automatically after 1 second
  • Word count - Live word count in the status bar
  • Slash commands - Type / to insert any block type
  • Drag blocks - Reorder paragraphs, lists, and other blocks
  • Mermaid diagrams - Write mermaid code blocks and see them rendered as visual SVG diagrams
  • Work offline - No internet required for editing

How It Works

Visual Editing

When you open a markdown file, RiteMark shows it as formatted text:

  • Bold text appears bold (not **bold**)
  • Headings appear large (not # Heading)
  • Lists show bullets (not - item)

When you save, it converts back to standard markdown. Open your files in any text editor and they look normal.

Auto-Save

Your document saves automatically:

  1. Make any change
  2. Wait 1 second
  3. File saves to disk

No save button needed. No "unsaved changes" warnings. If RiteMark crashes, you lose at most 1 second of work.

Slash Commands

Type / anywhere to open the command menu:

Command Inserts
/heading1 Large heading (H1)
/heading2 Medium heading (H2)
/heading3 Small heading (H3)
/bullet Bullet list
/numbered Numbered list
/task Task list with checkboxes
/code Code block
/quote Blockquote
/divider Horizontal line
/table Table
/image Image from file picker
/mermaid Mermaid diagram block

Start typing to filter. Press Enter to insert.

Block Reordering

Every block (paragraph, heading, list, etc.) has a drag handle on the left:

  1. Hover over a block to see the grip icon
  2. Click and drag to move it
  3. Drop where you want it

The + button next to the handle inserts a new block above.

Word Count

The status bar at the bottom shows:

  • Current word count
  • Updates live as you type

Mermaid Diagrams

Ritemark renders fenced mermaid code blocks as visual SVG diagrams directly in the editor. Type /mermaid or write a fenced code block with mermaid as the language, and the diagram appears automatically.

Each mermaid block has a toggle button in the top-right corner. Click it to switch between the rendered diagram and the source code. This makes it easy to edit the diagram definition and see the result without leaving the document.

Mermaid diagrams follow your current theme. In light mode they render with light backgrounds, in dark mode they adapt accordingly.

When you export to Word (.docx) or PDF, mermaid diagrams are converted to PNG images automatically. The exported document shows the diagram just as it appears in the editor.

If the mermaid syntax contains errors, Ritemark shows a clear error message instead of the diagram. You can still edit the source code and fix the syntax -- the error display does not lock you out.

Supported diagram types include flowchart, sequence, class, state, entity-relationship, Gantt, and pie chart. For a full reference, see the Mermaid Diagrams support article.


Linking to Other Files

As of v1.7.2, you can link to any file in your workspace without leaving the keyboard.

Type @ anywhere in the editor and a file search picker appears right at your cursor. Start typing a filename to filter, use the arrow keys to move through the results, and press Enter to insert a Markdown link with the correct relative path already worked out for you.

Every file in your workspace is searchable. There is no extension allowlist, so prose, notes, spreadsheets, images, and source files all show up. Only the usual noise folders are excluded (node_modules, .git, dist, build, and similar). Markdown files rank highest in the results because that is what you link most often, with code and config files lower down but still reachable.

The same @ flow works inside the Add Link dialog. Press Cmd+K, then type @ in the URL field to pick a file the same way. Press Escape at any point to dismiss the picker without inserting anything.

Hold Cmd (or Ctrl on Windows and Linux) and click any internal Markdown link to open its target:

Link target What opens
.md / .mdx Opens as a Ritemark document in a new tab
PDF, image, CSV, source files Opens via VS Code's default opener
External URL (http://, https://) Opens in your system browser

A regular click still opens the Edit Link dialog, so this does not change any existing behavior. If a link points outside your workspace, Ritemark surfaces a non-blocking warning instead of following it, so a stray ../../ path can never walk out of your project.


Supported File Types

Extension Mode Description
.md Edit Full editing
.markdown Edit Full editing
.csv Edit Spreadsheet view
.xlsx, .xls Preview Excel preview
.html Browser Opens as a rendered page in the in-app browser (right-click to "Open as Text")

Note: As of v1.7.0, .html files open in the in-app browser by default, in the same tab bar as your markdown files. The browser is a real Electron browser with back/forward, reload, history, DevTools, and a cookie store. Use the right-click context menu and choose "Open as Text" if you want to view the raw HTML source instead.


Tips

  • Quick formatting - Select text to see the formatting bubble menu
  • Keyboard shortcuts - Cmd+B for bold, Cmd+I for italic, Cmd+K for links
  • External changes - If you edit the file outside RiteMark, it reloads automatically