Motiond

An IDE extension that give markdown file the Notion-style editing experience

2026 . IDE Extension . Website
Hero Image Placeholder

Background

I was vibe coding in Cursor when I noticed a problem: markdown files were everywhere—prompts, documentation, planning notes—but editing them was painful for anyone without a technical background.

People would see raw markdown syntax and freeze. ## Heading, - [ ] task, table formatting—it all looked like code. For non-technical team members, contributing to docs or writing prompts meant either learning markdown syntax or avoiding it entirely.

I wanted to fix this. Markdown is too important in AI workflows to be a barrier. It should feel like writing a normal document, not programming.

Solution

What I Built

Motiond is a VS Code extension that replaces the default markdown editor with a visual, block-based interface. Think Notion, but your files stay as plain .md files.

Inspiration

I love Notion's editing experience—the block model is intuitive, the slash commands make inserting content effortless, and drag-and-drop feels natural. I wanted to bring that same ease to markdown editing inside the IDE.

How It Works

Instead of writing markdown syntax, you use simple interactions:

  • Type / to insert any block type
  • Click to edit inline
  • Drag blocks to reorder
  • Everything auto-saves to your .md file

Your file remains standard markdown, so it works with git, AI tools, and any other editor. But when you're editing in VS Code, it just feels like writing a document.

Features

  • Slash Commands — Type / to insert headings, lists, tables, code blocks, quotes, or images
  • Visual Editing — No syntax knowledge needed; edit content directly
  • Drag & Drop — Reorder blocks by dragging them around
  • Syntax Highlighting — 20+ programming languages with automatic theme matching
  • Real-Time Sync — Every edit saves instantly to your markdown file
  • Theme Support — Automatically follows VS Code's light/dark theme
  • Image Handling — Upload or paste images; stored locally in your project
  • Git-Friendly — Files remain as plain markdown, fully compatible with version control

Tech Stack

  • VS Code Extension API — Custom Editor Provider for markdown files
  • React 18 + TypeScript — Frontend framework and type safety
  • BlockNote — Visual block editor built on Prosemirror and Tiptap
  • Shiki — Syntax highlighting engine with 20+ language grammars
  • esbuild — Fast bundling for extension and webview code

I built this entire project using AI tools—Claude Code in Cursor and Google Gemini via Aider. It felt appropriately meta: using AI to build better tools for AI-assisted workflows.

®AYMOND