This is a VS Code Markdown WYSIWYG markdown editor.
WYSIWYG editing surface with a ribbon-style toolbar
Standard formatting buttons for bold, italic, headings, lists, links, and rules
Protected YAML frontmatter panel that is preserved separately from the body
Image import workflow that copies selected images into a sibling *.assets/ folder
Mermaid fenced block support with live rendering inside the editor
Table insertion and round-tripping back to Markdown
Source mode and design mode toggle
Why this architecture
The project uses a VS Code custom editor backed by a webview and applies changes to the underlying Markdown text document. Mermaid rendering happens in the browser view from fenced mermaid blocks.
Project structure
src/extension.ts — VS Code extension activation and custom editor provider
Navigate to the project directory and install dependencies:
npm install
Compile the extension:
npm run compile
Package the extension:
npm run package
This command runs the prepackage lifecycle script first, which bumps the patch version and compiles the extension. Then it packages the VSIX into build/, for example build/markdown-genie-0.2.1.vsix.
The full flow is:
npm run prepackage
npm run package
But you only need to run npm run package because npm executes prepackage automatically.
In VS Code, open the Extensions view (Ctrl+Shift+X), click the "..." menu, and select "Install from VSIX...".
Select the generated .vsix file to install the extension.
Once installed, you can open Markdown files with Markdown Genie by right-clicking the file and selecting "Open with..." or using the command palette.
Run locally
npm install
npm run compile
Then press F5 in VS Code.
Open a Markdown file and run:
Open Markdown Genie
Or use:
Reopen Editor With... → Markdown Genie
Notes
This is a simple WYSIWYG markdown editor meant for non-techies, not a full replacement for Word or Google Docs. The adoption of using mardown in many business cases is its learning curve for not techies. This is meant to help fix that so we can start leveraging markdown more easily for ingestion into other systems such as LLM and business documentation, standard operating procedures and such.
