Binarii Pages

A Notion-like WYSIWYG markdown editor for VS Code — rich editing, slash commands, callouts, mermaid diagrams, tables, and more.

Binarii Pages replaces the default markdown preview with a true WYSIWYG experience. Open any .md file and start editing visually — no split pane, no preview toggle.

Features

Slash commands

Type + at the beginning of a line to open the command palette. Insert headings, lists, tables, callouts, code blocks, and more — without leaving the keyboard.

Rich text editing

• Floating toolbar — Select text to format: bold, italic, strikethrough, highlight, code, link, headings
• Keyboard shortcuts — Cmd+B bold, Cmd+I italic, Cmd+Shift+S strikethrough, Cmd+Shift+H highlight, Cmd+K link
• Task lists — Nested checkboxes with toggle support

Callouts

Obsidian-compatible syntax with automatic icons and colors:

> [!note] Important
> This is a note callout with a blue accent.

> [!warning] Attention
> This is a warning callout with an orange accent.

Supported types: note, tip, warning, danger, info, success, question, abstract, example, quote, and more.

Mermaid diagrams

Fenced mermaid code blocks are rendered as live SVG diagrams. Hover to reveal the edit button, modify the source, and see the result instantly.

graph LR
  A[Write markdown] --> B[See it rendered]

Tables

Full table support with resizable columns. A floating toolbar appears when your cursor is inside a table — insert or delete rows and columns with one click.

Frontmatter

YAML front matter is displayed as a clean property grid with icons (title, author, date, tags, status...). Double-click to edit the raw YAML.

---
title: My document
author: Camille
tags: [design, product]
status: draft
---

Syntax highlighting

Code blocks support 200+ languages with automatic syntax highlighting powered by highlight.js.

Theme integration

All colors are inherited from your active VS Code theme. Binarii Pages looks native in any theme — light or dark.

Getting started

1. Install Binarii Pages from the VS Code Marketplace
2. Open any .md file — it opens in the Binarii Pages editor by default
3. Start editing visually

To switch back to the default text editor for a file, right-click the tab and select Reopen Editor With... > Text Editor.

Requirements

• VS Code 1.80 or later

Known limitations

• The editor works best with standard markdown. Some edge cases in complex nested structures may not render perfectly yet.
• Images are embedded as base64 — large images increase file size.
• No split view (WYSIWYG only, no side-by-side source).

Feedback & issues

Found a bug or have a feature request? Open an issue on GitHub.

Development

git clone https://github.com/binarii-io/binarii-pages.git
cd binarii-pages
npm install

• npm run build — Build the extension
• npm run watch — Rebuild on file changes
• F5 in VS Code — Launch the Extension Development Host for debugging
• npm run package — Create a .vsix file

See CLAUDE.md for detailed architecture documentation.

License

Proprietary — Binarii